Plugins not overwritten when passed as options

[lucasecdb]

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: [email protected]
• Builder: -
• User Config: devtools, modules, pinia, typescript
• Runtime Modules: @nuxt/test-utils/[email protected], @pinia/[email protected]
• 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]

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

• mountSuspended & createTestingPinia
• src/runtime-utils/render.ts
• src/runtime-utils/mount.ts

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.

[lucasecdb]

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

• Plugins are applied on line 276: https://github.com/vuejs/test-utils/blob/1cdd7ae5a973e8a2de8eef8c22159bc0cc97f911/src/createInstance.ts#L269-L278
• Provides values are copied to the vue instance on line 303: https://github.com/vuejs/test-utils/blob/1cdd7ae5a973e8a2de8eef8c22159bc0cc97f911/src/createInstance.ts#L299-L305

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]

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.

[danielroe]

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