Pinia Nuxt module breaks the createTestingPinia helper in tests

[antoinezanardi]

Reproduction

https://github.com/antoinezanardi/nuxt-pinia-testing

Steps to reproduce the bug

1. Clone the reproduction repository.
2. Run pnpm install
3. Run vitest --config vitest.unit-config.ts

Expected behavior

The test should pass as the method from store is called when the component is mounted.

Actual behavior

When using the createTestingPinia util method in a Nuxt project, the stores are not correctly mocked.

I created a simple test which expect a method from a store to be called when the component is mounted.

However, the test fails with the following logs :

fetchAndSetRoles # <- This is the log from the store method, proving it's called and not correctly mocked.

stderr | tests/unit/app.nuxt.spec.ts > App Component > Store > should call method from store when mounted.

[Vue warn]: App already provides property with key "Symbol(pinia)". It will be overwritten with the new value. # <- This warning is not expected.

FAIL  tests/unit/app.nuxt.spec.ts > App Component > Store > should call method from store when mounted.

TypeError: [Function] is not a spy or a call to a spy! # <- Store is not mocked

Additional information

I'm pretty sure that the nuxt module is the source of the problem.

If you comment the module in the nuxt.config.ts at the root of the project, the test passes.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    //"@pinia/nuxt", <- If you comment this line, the test passes …!
  ],
  devtools: { enabled: true }
})

[posva]

Maybe the source code is using a different version of Pinia or is not setting the NODE_ENV to test. Contribution Welcome!

[antoinezanardi]

While waiting for this bug to be fixed, here is my quick dirty fix solution :

// nuxt.config.ts
const modules = [
  process.env.NODE_ENV !== "test" && "@pinia/nuxt",
];

export default defineNuxtConfig({
  app: { head: { link: [{ rel: "icon", type: "image/png", href: "/favicon.png" }] } },
  modules,
  devtools: { enabled: true },
  typescript: {
    strict: true,
    typeCheck: true,
  },
});

As you can see, I add the pinia nuxt module in my nuxt.config.ts file if I'm not in a TEST environnement. You must add the NODE_ENV="test" env var yourself before launching your tests.

This way, you can enjoy the pinia nuxt module when running your app and disable it when you want to mock them in your unit tests.

[posva]

FYI, the NODE_ENV=test should be set by the tool launching the tests. If it isn't, the bug should be reported there

[antoinezanardi]

The NODE_ENV=test is set by myself for my personal needs. It is not related to this issue.

When checking the env, I can assure you that the NODE_ENV=test is set by nuxt when running unit tests. So the bug is not from there.

[posva]

I see, I misread that. For anybody, feel free to try to fix this and submit a PR 👍

[OnlyWick]

I see, I misread that. For anybody, feel free to try to fix this and submit a PR 👍明白了，我看错了。对于任何人，请随时尝试解决此问题并提交 PR 👍

I took a look, and the issue appears to be in the createTestingPinia function. @nuxt/pinia maybe no issue.

[lucasecdb]

issue was fixed downstream in @vue/test-utils, simply upgrade to 2.4.6 to fix the issue

[avxkim]

@lucasecdb i've upgraded @vue/test-utils to 2.4.6, we still cannot use createTestingPinia :

const mountComponent = async () => {
  return mountSuspended(IndexPage, {
    global: {
      plugins: [testingPinia],
      stubs: {
        SharedElasticSearch: ElasticSearch,
      },
    },
  })
}

still giving an error: "[Vue warn]: App already provides property with key "Symbol(pinia)". It will be overwritten with the new value."

workaround from @antoinezanardi worked, but there's cases, when you want to test an actual store instead of mocks.

[lucasecdb]

@avxkim can you create a minimal reproduction repository? I haven't had any issues since May with using testing pinia in my tests

[avxkim]

Do you use import { mountSuspended } from '@nuxt/test-utils/runtime' ? What versions of Nuxt/Pinia you have? Can you show your package.json and actual use of createTestingPinia with mountSuspended?

[lucasecdb]

we use renderSuspended (but in the end of the day it should be the same, since testing-library uses mount under the hood). We are currently running on latest Nuxt version, @pinia/nuxt is on 0.4 and pinia is on 2.2

the way we pass testing pinia to Nuxt renderSuspended is the same as in your example:

const mountComponent = async () => {
  const testingPinia = createTestingPinia(/* ... */);

  return await renderSuspended(Component, {
    global: {
      plugins: [testingPinia],
    },
  });
};