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

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:

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!

2 Answers
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.

cy.visit('anyRoute')

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


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.