Use @cypress/vue with createTestingPinia

[LAURENS-Damien]

Hello,

I am trying to use cypress for Unit testing and i have a problem with usage of createSpy function. I have the message You must configure the createSpy option. because i don't use Jest for Unit Testing. I have tried to do this but it doesn't works :
const wrapper = mount(MyComponent, { global: { plugins: [ createTestingPinia({ createSpy: cy.spy }), ], }, });

Any idea?
Thanks for responses ^^

[vikrantrath]

createSpy probably expects a spy getter.
Try the below.
const wrapper = mount(MyComponent, { global: { plugins: [ createTestingPinia({ createSpy: ()=>cy.spy() }), ], }, });

[LAURENS-Damien]

I have tried with a arrow function and i have non longer the error message, thanks!
However, my test fail. In my component, i call à myStore.callApiWithXhrs function and in my test component, the XHRs are emits during the test. Use createTestingPinia don't must disable this beahaviour?

[vikrantrath]

Can you share your test case here as well as the functionality you're trying to test?
Also you can pass stubActions: false along with createSpy to make sure the actual actions are called and not stubbed.

[LAURENS-Damien]

In my Header component, i call my store :

customerInfosStore
    .initCustomerInfos()
    .then(() => {
		  // bla bla
    })

In my action initCustomerInfos, i call the Api like that :

export const useCustomerInfosStore = defineStore("customerInfos", {
  state: () => {
    return {
      customer: null
    };
  },
  actions: {
    async initCustomerInfos() {
      await this.getCustomer();
    },
    async getCustomer(pid: string) {
      this.customer = await CustomerApi.getCustomer(pid); // i call my api with axios
    },
  },
});

And in my cypress test i do that :

describe("Header should ", () => {
  it("render wordings", () => {
    // const mockAdaptater = new MockAdaptater(axios);
    const customerMock = {
      customer: {
        salutation: "Mr",
        lastName: "TOTO",
      } as Customer,
    };

    mount(Header, {
      global: {
        plugins: [
          createTestingPinia({
            createSpy: () => cy.spy(),
          }),
        ],
      },
    });

    const customerInfosStore = useCustomerInfosStore();
    customerInfosStore.customer = customerMock.customer;

    cy.get("#customerName").should(
      "have.text",
      `${customerMock.customer.salutation} ${customerMock.customer.lastName}`
    );
  });
});

My test fail beacause i see the XHR called during a few seconds until the failure :

The only way i found to pass my test is to mock directly Axios with MockAdaptater without using createTestingPinia. Maybe my use case of createTestingPinia is not possible...