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'])
})