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.

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

Pinia Nuxt module breaks the createTestingPinia helper in tests #2555

Open
antoinezanardi opened this issue Jan 16, 2024 · 7 comments
Open
Labels
bug Something isn't working contribution welcome ⛰ pkg:nuxt Related to @pinia/nuxt 🧪 pkg:testing Related to the @pinia/testing package

Comments

@antoinezanardi
Copy link

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 }
})
Copy link
Member

posva commented Jan 17, 2024

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

@posva posva added contribution welcome 🧪 pkg:testing Related to the @pinia/testing package ⛰ pkg:nuxt Related to @pinia/nuxt bug Something isn't working labels Jan 17, 2024 — with Volta.net
@antoinezanardi
Copy link
Author

antoinezanardi commented Jan 25, 2024

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
Copy link
Member

posva commented Jan 25, 2024

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

@posva posva added upstream The fix depends on a dependency and removed bug Something isn't working labels Jan 25, 2024
@antoinezanardi
Copy link
Author

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 posva added bug Something isn't working and removed upstream The fix depends on a dependency labels Jan 25, 2024
@posva
Copy link
Member

posva commented Jan 25, 2024

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

@OnlyWick
Copy link
Contributor

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.

OnlyWick added a commit to OnlyWick/pinia that referenced this issue Feb 13, 2024
OnlyWick added a commit to OnlyWick/pinia that referenced this issue Feb 13, 2024
OnlyWick added a commit to OnlyWick/pinia that referenced this issue Feb 13, 2024
OnlyWick added a commit to OnlyWick/pinia that referenced this issue Feb 13, 2024
OnlyWick added a commit to OnlyWick/pinia that referenced this issue Feb 13, 2024
@lucasecdb
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working contribution welcome ⛰ pkg:nuxt Related to @pinia/nuxt 🧪 pkg:testing Related to the @pinia/testing package
Projects
Status: 💬 In discussion
Development

Successfully merging a pull request may close this issue.

4 participants