I am getting the following error on cypress when testing my application:

CypressError: Timed out retrying: cy.its() errored because the property: 'store' does not exist on your subject.

Here is the test line which is broken:

cy.window().its('store').invoke('getState').then((state) => {
      expect(state.token).to.equal(tokenResponseMock.token);
    });

In my code everything is working fine, i got all data on the store, no issues, but do not pass on the test due to the 'store' not found. I wonder why I am getting store error if it's working as expected. I have no clue what is going on. Does anybody can give me a light on how to solve this error?

Login.js - the function which dispatch to the store

  async function handleClick() {
    const { dispatchToken } = props;
    const tokenInfo = await fetchToken();
    localStorage.setItem('token', JSON.stringify(tokenInfo.token));
    dispatchToken(tokenInfo.token);
    history.push('/game');
  }

CodePudding user response：

Just found out what was going on. When using cypress for testing, you need to add the following code to the store file in order to work:

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

CodePudding user response：

Don't mix up localStorage and React store, they are two different things.

localStorage

cy.get(somthing).click()
  .should(() => {
    const token = localStorage.getItem('token')
    expect(token).to.equal(tokenResponseMock.token)
  })

React store

In React app, add store to Cypress object

// init store
if (window.Cypress) {
  window.Cypress.store = store  // add to Cypress not window in case of conflict
}

In test

cy.get(somthing).click()
  .should(() => {
    Cypress.store.getState().then(state => {
      expect(state.token).to.equal(tokenResponseMock.token)
    })
  })