Mocking mutation/state data on Vuex [Not Component Testing]

[notfounnd]

Hi. Is it possible mock data for the Vuex behavior like e.g. 'cy.intercept' simulate backend responses?

I need access some screens to execute UI tests, but this screens works together Vuex resources (mutation/state).

I need inject data on Vuex resources to enable directly access on this screens.

[notfounnd]

Hi all, any ideia?

[gkatsanos]

@notfounnd Cypress doesn't have access to the Vuex layer; you'd need https://v1.test-utils.vuejs.org/ to test Vuex related stuff. (component testing..)
But, if your Vuex Action makes a client-side API call, then of course you can intercept this call, like any normal call, and use fixtures to mock the return of this endpoint, then your Vuex would work perfectly as it would 'think' it got real data from the API..

Did I answer your question?

[gkatsanos]

@notfounnd

[notfounnd]

@gkatsanos sorry to late feedback.

Yes, I believe it answered my question.

Then, would be this feature an interesting resource to have in Cypress?

I believe so. I understand modern frontend frameworks enabled this option as a behavior in apps interface.

Is this feature possible in Cypress architecture?

[gkatsanos]

As I said above, if your Vuex is calling an API client-side, you could intercept and pass fixtures.

[notfounnd]

I understood your answer, but in this case Vuex don't call APIs.

In some steps of system process Vuex change screens based on Vuex storage only (client-side), without call any API.

E.g.:

Step 1: Fill and save form with personal infos (go to another screen)
Step 2: Fill and save form with food kinds you like (go to another screen)
Step 3: Fill and save form with additional infos about you

From step 1 to 3 the frontend use only Vuex to storage the sended data.

Without injecting data in Vuex isn't possible, for example, access directly screens 2 and 3 of the process.

I'm looking for a solution about this context.