How to test if a key:value is present in Redux using Cypress

Question

I have configured the store this way:

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

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

I want to check if the following value exists. In redux is here: store => store.auth.user.account.person.email and the value is a string, an email address.

I am trying with the following test:

 it.only('checks if email is being shown', () => {
    cy.get('.email-button')
    .should(() => {
        Cypress.store.getState().then(state => {
          console.log("state", state);
        expect(state.auth.user.account.person.email).to.equal('asfasdf')
      })
    })
  })

But it is failing with the following error:

Timed out retrying after 4000ms: Cypress.store.getState(...).then is not a function

  40 |     cy.get('.contact-button.email')
  41 |     .should(() => {
> 42 |         Cypress.store.getState().then(state => {
     |                                  ^
  43 |           console.log("state", state);
  44 |         expect(state.token).to.equal('asfasdf')
  45 |       })

How can I fix it? What am I doing wrong?

Answer 1

Redux's store.getState() is a synchronous function. It does not return a promise. Try something like this:

it.only('checks if email is being shown', () => {
  cy.get('.email-button')
  .should(() => {
    const state = Cypress.store.getState();
    expect(state.auth.user.account.person.email).to.equal('asfasdf');
  })
})