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 test code.

I also watched a course on testing by Mr. Kent C. Dodds where he mentions a redux store could be initialized with existing data in Cypress (before or within tests, not sure)

I went through pretty much all the docs and googled and I just can't find any references or examples of actually doing this other than it being mentioned as one of the key differences on the introductory page.

How does one achieve something like that, if possible?

The case I am interested in is for E2E tests:

• First I would test my auth/login functionality as a standard E2E test
• Then for testing other parts of the application I would add a Cypress Command that would directly make the auth call and set up the store from the response whenever I needed to log in (same for log out), instead of manually typing in the credentials & clicking log in (which might be what I end up doing anyway)

This might not be the best use case (or a good one even) but I'm sure there are other cases where at least initializing your redux state with some data would come in very handy.

Thanks!

Answer 1

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.

Answer 2

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