Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Plugins not overwritten when passed as options #828

Closed
lucasecdb opened this issue Apr 24, 2024 · 5 comments · Fixed by vuejs/test-utils#2423
Closed

Plugins not overwritten when passed as options #828

lucasecdb opened this issue Apr 24, 2024 · 5 comments · Fixed by vuejs/test-utils#2423
Assignees
@danielroe
Labels
bug Something isn't working vitest-environment

Comments

@lucasecdb
Copy link

Environment

  • Operating System: Darwin
  • Node Version: v20.11.0
  • Nuxt Version: 3.11.2
  • CLI Version: 3.11.1
  • Nitro Version: 2.9.6
  • Package Manager: pnpm@8.14.2
  • Builder: -
  • User Config: devtools, modules, pinia, typescript
  • Runtime Modules: @nuxt/test-utils/module@3.12.1, @pinia/nuxt@0.5.1
  • Build Modules: -

Reproduction

https://github.com/lucasecdb/nuxt-app-pinia-repro

Install dependencies with pnpm install then run pnpm test

Describe the bug

If you configure a vue plugin using Nuxt plugins, like the following:

// plugins/pinia.ts
import { createPinia } from 'pinia';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(createPinia())
})

Given the following component and Pinia store:

<template>
  <p>{{ date }}</p>
</template>

<script setup>
const store = useMyStore();

const date = computed(() => store.date);
</script>
// stores/my-store.ts
export const useMyStore = defineStore('my-store', () => {
  return {
    date: ref(new Date()),
  };
});

And then try to overwrite that plugin during testing:

// __tests__/my-component.test.ts
import { createPinia } from 'pinia';

it('should pass', async () => {
  await renderSuspended(MyComponent, {
    global: { plugins: [createPinia()] },
  });

  // ...
});

The instance returned by useMyStore will always use the Pinia store supplied by plugins/pinia, and not from the global.plugins parameter provided to renderSuspended.

Additional context

No response

Logs

No response
@dosubot DosuBot
Copy link

dosubot bot commented Apr 24, 2024 •
edited

The issue you're experiencing with Pinia store instances not being overwritten during testing with renderSuspended is likely due to how the testing setup is configured, specifically with regard to state management plugins like Pinia. The renderSuspended function, as part of the test setup, does not directly manipulate or replace state management instances. It focuses on Vue's global properties, provided values, and components, without specific handling for Pinia stores.

To address this, you'll need to manually configure or mock the Pinia store before running your tests to ensure that the mock store is used. This might involve mocking global imports or providing a mock store through the global properties or provides context in your test setup.

Additionally, there's a similar issue discussed in the @nuxt/test-utils repository, specifically in mountSuspended & createTestingPinia, which points to an existing issue on the @pinia/nuxt repository. For more detailed information and potential solutions, you might want to check out the discussion there: vuejs/pinia#2555. This could provide further insights into how others have approached and potentially resolved similar testing challenges with Pinia in a Nuxt environment.

Details

Sources


About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

@dosubot dosubot bot added the bug Something isn't working label Apr 24, 2024
@lucasecdb
Copy link
Author

The issue occurs because on @vue/test-utils the plugins from the global properties are applied before the provides:

And since renderSuspended copies over the provided values from the global instance down to the render call, the plugin will always be overwritten back by the vueApp provided value:

test-utils/src/runtime-utils/render.ts

Line 136 in 08ee351

provide: vueApp._context.provides,

@lucasecdb
Copy link
Author

lucasecdb commented Apr 24, 2024 •
edited

The issue @dosubot linked is caused by this exact same issue, the pinia store is being overwritten by the value injected in @pinia/nuxt plugin.

Changing the test to use either mount or render (from testing-library) solves the issue because we are not reusing the context from nuxtApp.vueApp.

@dosubot DosuBot

This comment was marked as outdated.

Sign in to view
@danielroe danielroe mentioned this issue Apr 26, 2024
Merged
@danielroe danielroe self-assigned this Apr 30, 2024
@danielroe
Copy link
Member

This is now resolved in the latest @vue/test-utils: https://github.com/vuejs/test-utils/releases/tag/v2.4.6.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@danielroe danielroe

Labels
bug Something isn't working vitest-environment
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: set global provides before running vue plugins danielroe/test-utils-1
2 participants
@lucasecdb @danielroe