mountSuspended & createTestingPinia

[danilchernov]

Environment

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.9.3
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: [email protected]
• Builder: -
• User Config: modules, devtools
• Runtime Modules: @pinia/[email protected], @nuxt/test-utils/[email protected]
• Build Modules: -

Reproduction

Minimal reproduction

Describe the bug

Hi all! Do I understand correctly that on the current version of @nuxt/test-utils there is no way to pre-fill a store using this instruction from the Pinia documentation.

import { describe, test, expect, vi } from 'vitest';
import { createTestingPinia } from '@pinia/testing';
import { mountSuspended } from '@nuxt/test-utils/runtime';
import App from './app.vue';

const siteInfoMock = {
  title: 'Nuxt 3',
  url: 'https://nuxt.com',
};

describe('App link', async () => {
  const wrapper = await mountSuspended(App, {
    global: {
      plugins: [
        createTestingPinia({
          initialState: {
            Site: {
              siteInfo: siteInfoMock,
            },
          },
          createSpy: vi.fn,
        }),
      ],
    },
  });

  test('Should render the link with a substitute title', () => {
    expect(wrapper.get('[data-test-id="link"]').text()).toBe(
      siteInfoMock.title
    );

    // The test passes because the data in the "Site" store has not been changed.
    // expect(wrapper.get('[data-test-id="link"]').text()).toBe('Example.com');
  });

  test('Should render the link with the spoofed link', () => {
    expect(wrapper.get('[data-test-id="link"]').attributes().href).toBe(
      siteInfoMock.url
    );

    // The test passes because the data in the "Site" store has not been changed.
    // expect(wrapper.get('[data-test-id="link"]').attributes().href).toBe('https://example.com');
  });
});

The component is also rendered, receiving default data from the store. In turn, I expect replacement data in the store.

I tried to look for information about a similar case in local chats and here in different threads, but I just didn’t receive any information. Several users have raised a similar issue.

• https://discordapp.com/channels/473401852243869706/1199858451833168004/1199858605831241820
• https://discordapp.com/channels/473401852243869706/496371343542059011/1195669478403489862
• https://discordapp.com/channels/473401852243869706/496371343542059011/1153407426087886942

It seems like @pinia/nuxt & @nuxt/test-utils are not fully compatible, namely the createTestingPinia & mountSuspended methods.

Please tell me, someone was able to solve the problem of how to create a test instance of Pinia.

Additional context

No response

Logs

stdout | createSuspenseBoundary (/home/projects/rlmilwjxk.github/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1439:43)
<Suspense> is an experimental feature and its API will likely change.

stderr | warn$1 (/home/projects/rlmilwjxk.github/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:46:13)
[Vue warn]: App already provides property with key "Symbol(pinia)". It will be overwritten with the new value.

[danilchernov]

Fun fact. If you replace the mountSuspended method from the @nuxt/test-utils library with the mount method from the @vue/test-utils library, then the initial state will be correct, the one that was overridden in the createTestingPinia call.

[antoinezanardi]

I think your issue is linked to the one I opened on @pinia/nuxt : vuejs/pinia#2555

[AchrafAdev]

Have you found a solution? Happens to me with await RenderSuspended. But if your method is mountSuspended insead of await mountSuspended you get correctly the initial state. But tests will fail as you need the await.

For example if I have this customRender function for my tests

export async function customRender(component) {
  return await renderSuspended(component, {
    global: {
      plugins: [i18n, createTestingPinia({
        initialState: {
          some: {
            colors: [{ id: 1, name: 'Blue' }, { id: 2, name: 'Red' }],
          },
        },
      })],
    },
  })
}

This won´t work

it('can mount some component', async () => {
  await customRender(someComponent)

  const some = useSomeStore()

  console.log(some.colors) => []
})

And this will work:

it('can mount some component', async () => {
  customRender(someComponent)

  const some = useSomeStore()

  console.log(some.colors) => [{ id: 1, name: 'Blue' }, { id: 2, name: 'Red' }]
  // Assertions and Expects that wont work without the await 
})

[lucasecdb]

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

[avxkim]

@lucasecdb not fixed: vuejs/pinia#2555 (comment)