Cypress Redux Persist

This is just a bunch of hooks and Cypress commands that will assist you in dealing with the redux-persist package. It's not complete, and it works on a lot of assumptions about your setup.

Configuration

When testing, you will need to add the redux store into the window object so that Cypress is able to grab onto it. You can do this somewhere in your store initialization code. You will want to add:

if(window.Cypress) {
   window.store = store;
}

Where store is your redux store object.

Doing this allows Cypress to hook into the store object and invoke functions.

Pitfalls

The nature of redux-persist is that during it's hydration process, it will grab the localStorage key persist:root or whatever you've named your store and then inject it into the redux store at run time. This presents an issue with Cypress as the localStorage is cleared out any time a test finished or the page reloads.

For applications that rely on redux having persistant data, this obviously makes things impossible to test. This package attempts to solve that problem by using two functions - saveReduxStore and loadReduxStore.

Calling saveReduxStore will persist (inside Cypress) all the values currently in the redux store.

Calling loadReduxStore will retreive those values and using persist/HYDRATE will insert them into Redux.

Cypress is funny in that if you ever call cy.reload() it will blow the localStorage away, which isn't the expected behaviour in a live browser, but to recover your redux store, you can simply change cy.reload().loadReduxStore() and all data saved to this point will be re-injected into Redux.