createTestingPinia doesn't mock actions using vitest vi.fn

[dennybiasiolli]

Reproduction

Note: the code in the branch is working with a workaround, to reproduce this issue you need to comment two lines specified at step4.

https://github.com/dennybiasiolli/vuex-to-pinia-vue3/blob/moving-to-pinia/tests/unit/components/Counter.spec.js#L26-L27

Steps to reproduce the bug

1. clone this repo: https://github.com/dennybiasiolli/vuex-to-pinia-vue3.git

   git clone https://github.com/dennybiasiolli/vuex-to-pinia-vue3.git
   # or
   git clone git@github.com:dennybiasiolli/vuex-to-pinia-vue3.git

2. enter the repo directory and switch to moving-to-pinia branch

   cd vuex-to-pinia-vue3
   git checkout moving-to-pinia

3. install dependencies with npm install

4. comment out the two lines of Counter.spec.js

   // comment out this two lines
   store.increment = vi.fn() // FIXME: this should already by mocked
   store.incrementAsync = vi.fn() // FIXME: this should already by mocked    

5. run tests with npm run test and notice that tests are breaking with

   TypeError: [Function] is not a spy or a call to a spy!

   even if in the docs they say that they should be automatically stubbed with the createSpy function defined

Expected behavior

Pinia actions should already be mocked with the createSpy function

Actual behavior

Tests are breaking with

TypeError: [Function] is not a spy or a call to a spy!

even if in the docs they say that they should be automatically stubbed with the createSpy function defined

Additional information

Using the same code with Vue 2, Pinia and Jest is working fine.
You can take a look at the parallel repository here: https://github.com/dennybiasiolli/vuex-to-pinia-vue2
(same branch)

[posva]

It works on my end:

Moving to a discussion until this can be reproduced

[dennybiasiolli]

Even with commenting these lines in Counter.spec.js?

From

    // store.isEven = true // getters are writable only in tests
    store.increment = vi.fn() // FIXME: this should already by mocked
    store.incrementAsync = vi.fn() // FIXME: this should already by mocked

to

    // store.isEven = true // getters are writable only in tests
    // store.increment = vi.fn() // FIXME: this should already by mocked
    // store.incrementAsync = vi.fn() // FIXME: this should already by mocked

And launching tests?

[dennybiasiolli]

Note: the code in the branch is working with a workaround, to reproduce this issue you need to comment two lines specified at step4.

[posva]

Ah found the culprit: it's because useStore() is called outside of mounting a component context and plugins are not added in the correct order and the devtools plugin (which should not be included in test env) override actions. You can add fakeApp: true for the moment.

I'm working on a fix so this workaround isn't needed

[dennybiasiolli]

Great, with this workaround is working fine.

[dennybiasiolli]

Not sure if it's related, but without specifying createSpy: vi.fn, with Vitest I'm getting this error:
Error: You must configure the createSpy option.

[posva]

that's expected when not using globals: true

[dennybiasiolli]

Great, perfect, sorry for the question 😉

[lobo-tuerto]

I just had a problem with an action that was called on the onMounted hook.

This is the code:

onMounted(() => {
  authStore.refresh().catch(() => {
    /* We do nothing if we can't automatically refresh on load */
  })
})

The store action refresh() returns a promise.

This was my test code:

test('mount component', () => {
  expect(App).toBeTruthy()

  const pinia = createTestingPinia()

  const wrapper = mount(App, {
    global: {
      plugins: [router, pinia],
    },
  })

  expect(wrapper.html()).toBeTruthy()
})

When running the tests it was failing with some errors that I was not able to interpret properly.
After looking for a while, defining pinia like this solved the issue for me:

const pinia = createTestingPinia({
    createSpy() {
      return () => {
        return Promise.resolve()
      }
    },
  })

But left me wondering what's gonna happen if I use a couple of stores (or more) on the onMounted hook and they happen to return different data types (promises, objects, functions, etc).

[fredericlam]

Thanks so much, you saved my day. I spent the whole morning looking for a solution

[myan9527]

But left me wondering what's gonna happen if I use a couple of stores (or more) on the onMounted hook and they happen to return different data types (promises, objects, functions, etc).

I'm writing test case for such component, of which the onMounted hook used several stores and they return different types. So tests will fail since some properties are undefined, is there a solution for such issue?

FYI:
If you're using vuex, such issue can be solved by createStore and load mocked modules.

[myan9527]

I've just found solution for this. Here is the component that should be tested:

onMounted(() => {
  aStore.m1().then(...)
  bStore.m2().then(...)
})

with vitest, we can use spyOn function to mock theses stores:

const pinia = createTestingPinia({
  fakeApp: true,
})

setActivePinia(pinia)
const aStore = useAStore()
const spyM1 = vi.spyOn(aStore, 'm1')
spyM1.mockImplementation(...)
// omit mock another store

[richardkshergold]

I'm getting this error but only when I run Coverage, anyone know why?