Testing mocking a store, Error: You must configure the createSpy option.

[mpont91]

Reproduction

1. I created a fresh project using npm init vue@latest. On the interactive menu I only chose to add pinia.
2. On the HelloWorld component I imported the default store counter and tried to run the test. As it must be, it failed.
3. I followed the documentation to fix the test: https://pinia.vuejs.org/cookbook/testing.html#unit-testing-components
4. But the test keep failing, showing this error: Error: You must configure the createSpy option.

Steps to reproduce the behavior

I created a simple repo to show the problem.

1. Go to https://github.com/mpont91/vue3-pinia-mocking
2. Clone the repository: https://github.com/mpont91/vue3-pinia-mocking.git
3. Install the dependencies: npm install
4. Run the unit tests: npm run test:unit

Expected behavior

Pass the tests

Actual behavior

The tests are failing:

FAIL src/components/tests/HelloWorld.spec.js > HelloWorld > renders properly
Error: You must configure the createSpy option.
❯ Module.createTestingPinia file:/vue3-pinia-mocking/node_modules/@pinia/testing/dist/index.mjs:21:11
❯ src/components/tests/HelloWorld.spec.js:12:18
10| { msg: 'Hello Vitest' },
11| global: {
12| plugins: [createTestingPinia()],
| ^
13| },
14| })

Additional information

Maybe there is something I'm doing wrong... But I didn't figured out what it is.
And I couldn't find on the internet this specific error.
Seems a bug for me, because the line which is failing is from source code: node_modules/@pinia/testing/dist/index.mjs:21:11 and there is nothing about createSpy on the documentation that I have to take care.

[posva]

If you hover the createSpy option when providing it, it I’ll show you an example of what you need to do

[mpont91]

I'm sorry but I don't get it. I guess I have to provide a createSpy inside createTestingPinia() but I don't know how to do it... I don't understand what is this createSpy object and I don't find it in pinia documentation.
Please can you give me the link with this example? Or just doing a PR on my repository fixing the test.

[mpont91]

You meant this doc? https://pinia.vuejs.org/api/interfaces/pinia_testing.TestingOptions.html#createspy
But I don't understand how to provide it, and there is not an example... In addition this parameter is optional.

[mpont91]

I finally solved my problem.

I think that because I'm not using Jest, i need to provide a createSpy parameter when I use createTestingPinia plugin.

So the solution is, first import fn from vitest:

import { describe, expect, it, vi } from 'vitest'

Then inject inside createTestingPinia:

        plugins: [
          createTestingPinia({
            createSpy: vi.fn,
          }),
        ]

It seems easy now, but I was completely lost at the moment... I think it should be on the documentation because now it's the default scaffold when you init a Vue3 project.

[tulioFcastro]

Why not write as a function?

createSpy: vi.fn()

[nerdstrike]

I'm a bit concerned that I've ended up here after reading "createTestingPinia automatically stubs actions using the spy function based on the existing test framework (jest.fn or vitest.fn)"" from the docs. I'm using vitest, but I still needed to specify a spy function.

Thanks to @uasd7 for your example.

[bylmzio]

I'm a bit concerned that I've ended up here after reading "createTestingPinia automatically stubs actions using the spy function based on the existing test framework (jest.fn or vitest.fn)"" from the docs. I'm using vitest, but I still needed to specify a spy function.

Thanks to @uasd7 for your example.

Same for me. I tried to find my configuration problems.

[Fish-century]

Why not write as a function?

createSpy: vi.fn()

• "vitest": "^0.29.2"
• "pinia": "^2.0.30"
• "@pinia/testing": "^0.0.15"
  In the above version, the following is correct：
  import { vi } from 'vitest';
  createTestingPinia({ createSpy: vi.fn })

[CriPstian]

For vitest version 0.31.0 the fn is declared local, but not exported.
I had to import fn from `@vitest/spy' like:

import { fn } from '@vitest/spy'
...
  createTestingPinia({
    createSpy: fn
  })
...

[datsenkoboos]

There is a better solution, just add globals: true to vitest.config.js:

export default {
    ...
    test: {
        ...
        globals: true,
        ...
    },
    ...
}