Skip to content

Latest commit

 

History

History

blogs__testing-redux-store

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Testing Redux Store

Testing Redux store using Cypress as described in this blog post.

Shows how to

  • control application via DOM and check that Redux store has been properly updated
  • drive application by dispatching Redux actions
  • use Redux actions directly from tests
  • load initial Redux state from a fixture file
  • use automatic user function retries with cypress-pipe
  • use snapshot testing via meinaart/cypress-plugin-snapshots plugin

Application

The example TodoMVC application in this folder was copied from https://github.com/reduxjs/redux/tree/master/examples/todomvc on November 2018.

The application exposes the reference to to the store while running inside Cypress-controlled browsers like this

const store = createStore(reducer)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

// expose store when run in Cypress
if (window.Cypress) {
  window.store = store
}

And the tests can access the store using

it('has expected state on load', () => {
  cy.visit('/')
  cy.window().its('store').then(store => {
    // manipulate the store reference
  })
})