Testing async component that gets data from store

[moreorover]

Hi, I'm trying to write some tests for my components, however, unsuccessfully.

My store is composed using Pinia.

Customers component is an async component, so I'm wrapping it into the ShowCustomers component using Suspense. Customers component when created will check with pinia store to see if it should run fetchAll() method which sends out get request to api using axios. I'm mocking an axios get request to return a list of customers.

My expectation: is that a test suite mounts ShowCustomers component then it mounts a Customers component into Suspend, waits until it gets resolved, which is Customers component calls an action fetchAll from customersStore, an axios get request is made and my mocked axios service responds with a list of customers. Then this list of Customers is shown inside a Customers component.

What actually happens: Customers component is mounted, pinia store action fetchAll is called once as per expectation, however, this does not resolve state being updated. In fact, the axios get request is not executed.

Customers.vue

<script setup lang="ts">
import { useCustomersStore } from '@/store/customersStore';
import { computed, ref } from 'vue';
import CustomerDialog from '@/components/customers/CustomerDialog.vue';
import CustomerCard from '@/components/customers/CustomerCard.vue';
import BaseCardGrid from '@/components/base/BaseCardGrid.vue';

const customersStore = useCustomersStore();

if (customersStore.shouldLoadState) await customersStore.fetchAll();

const customers = computed(() => customersStore.getAll);

const search = ref('');
</script>

Test:

describe('Customers', () => {
  it('jada jada', async () => {
    const mock = new MockAdapter(axios);
    mock.onGet('/customers').reply(200, customers);

    const wrapper = mount(ShowCustomers, {
      global: {
        plugins: [createTestingPinia()],
      },
    });

    const customersStore = useCustomersStore();
    await flushPromises();

    const title = wrapper.find('[data-test="title"]');

    expect(title.text()).toEqual('Customers');
    expect(customersStore.fetchAll).toHaveBeenCalledTimes(1);
    expect(mock.history.get.length).toBe(1);
    expect(customersStore.all).toEqual(customers);
    expect(customersStore.fetchAll).toHaveBeenLastCalledWith();
  });
});

[posva]

This is actually expected when using a testing pinia. You can use a regular pinia instance too or let the actions run like at https://github.com/posva/pinia/blob/v2/packages/testing/src/testing.spec.ts#L65

[moreorover]

Thank you for your response. This makes sense now, however, doing so wrapper becomes empty and the following error is shown.

 FAIL  src/views/customers/Customers.spec.ts
  ● Console

    console.info
      <Suspense> is an experimental feature and its API will likely change.

      at createSuspenseBoundary (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:893:47)

  ● Customers › jada jada

    Cannot call text on an empty DOMWrapper.

      831 |     const cs = wrapper.find('[data-test="cs"]');
      832 |
    > 833 |     expect(title.text()).toEqual('Customers');
          |                  ^
      834 |     expect(customersStore.fetchAll).toHaveBeenCalledTimes(1);
      835 |     expect(mock.history.get.length).toBe(1);
      836 |     expect(customersStore.all).toEqual(customers);

      at Object.get (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:6923:27)
      at Object.<anonymous> (src/views/customers/Customers.spec.ts:833:18)

[posva]

That seems unrelated to pinia but the error says it didn’t find the title with th selector you gave it

[moreorover]

Understand that it cannot find the selector given. However, if I change stubActions back to true, component renders, and the test passes. What does the createTestingPinia function do when not stubbing actions differently that it prevents from mounting an async component. It seems that setting stubActions to false no longer mounts the component...? Link to repo

[moreorover]

Please ignore, did not import router plugin into component, therefore it was breaking when mounting.