Testing components using asynchronous store actions

[rdoepke]

Hello everyone,

I am new to both vue and JS testing and cannot get my component test to work with cypress.

Lets say we have very simple component MyComponent that triggers a fetchData() action on my store:

<template>
  <div>{{myData}}</div>
</template>

<script lang="ts"> 
import {useDataStore} from 'stores/data'
const myData = ref('');
const dataStore = useDataStore()
dataStore.fetchData().then({
  myData.value = dataStore.myData;
})
</script>

My DataStore is very basic as well:

export const useDataStore = defineStore('data', {
  state: () => ({
    myData: 'initialData'
  }),
  actions: {
    fetchData: async function () {
      try {
        const { data } = await axios.get('/api/mydata'); // returns string with "foo"
        this.myData = data;
        console.log('Successfully fetched data!');
      } catch (error) {
        console.error("error", error)
      }
    },
  },
});

Now my test should assert that it properly displays "foo"

import { mount } from '@cypress/vue';
import MyComponent from '../MyComponent.vue';
import { createTestingPinia } from '@pinia/testing';

describe('MyComponent', () => {
  it('should render foo', () => {
    mount(MyComponent, {
      global: {
        plugins: [
          createTestingPinia({
            createSpy: () => cy.spy(),
            fakeApp: true,
            stubActions: false,
          }),
        ],
      },
    });

    cy.dataCy('div').should('contain', 'foo');
  });
});

However, I am always getting

The component works in the actual implementation. It looks like my fetchData() is neither called (there is no xhr request), nor I am to the state that I could mock my api call yet.

This is from an (almost) fresh quasar project with typescript and test extension using cypress.

What am I doing wrong?

[gustavo-iha]

I would suggest using the setActivePinia instead to create a working instance of Pinia in your spec: https://pinia.vuejs.org/cookbook/testing.html#unit-testing-a-store