How to expose/access a data store like Redux within a cypress test?

Question

The Cypress docs say you can

Expose data stores (like in Redux) so you can programmatically alter the state of your application directly from your te

Answer 1

I am not sure of the exact syntax for a React app, but see this blog Testing Vue web applications with Vuex data store & REST backend.

Vuex is the VueJs equivalent of Redux. In summary, you add a reference to the store at some point in the app startup (code snippet is modified from the blog to be a bit more generic)

if (window.Cypress) {
  // only available during E2E tests
  window.appStore = app.store  // Substitute an appropriate expression for React Redux
}

and reference it in tests like so

const getStore = () => cy.window().its('appStore')

it('has loading, newTodo and todos properties', () => {
  getStore().its('state').should('have.keys', ['loading', 'newTodo', 'todos'])
})

Answer 2

Based on the answer about Vuex, I did that, which works:

// after createStore(...)
if (window.Cypress) {
  window.__store__ = store;
}

// in cypress tests
cy.window().should('have.property', '__store__');
cy.window().its('__store__')
  .then(
    store => store.dispatch({ type: 'UPDATE_CURRENT_PROFILE' })
  );

Don't forget to cy.visit('anyRoute') before doing anything with the store, so that React app is started and redux store is already created when you try to access it.