How to get/set state in E2E (Cypress) test?

[TomaszG]

I'm trying to access the react component state in Cypress tests. There are some tutorials on how to do it with redux, e.g.
https://glebbahmutov.com/blog/react-app-actions/
https://www.cypress.io/blog/2018/11/14/testing-redux-store/
https://dev.to/damcosset/testing-a-redux-data-store-with-cypress-io-36gd

however, they don't seem to be applicable to zustand. Is there any way to access and edit applications state (set by zustand's useStore from shared state) outside of the app? I thought that https://github.com/bahmutov/cypress-react-app-actions will do its job (as it allows to get react component state), however, the returned state is always empty which obviously is incorrect.

[dai-shi]

Is there any way to access and edit applications state (set by zustand's useStore from shared state) outside of the app?

useStore.getState() should be what you are looking for.

[TomaszG]

Thank you for the answer, however, it's not really clear to me how I can use it in tests that run the app in the browser.

1. Invoking it in the tests returns the state object of the correct shape, however, it doesn't represent the state of the tested app.
2. Invoking it in the app obviously returns the correct state, however, I don't see a way how to pass it to the tests or how to amend it in the tests.
3. Attempt to invoke it in the tests on the tested component ends up with an error that useStore is not present in the component.

[dai-shi]

Hmm, I think I misunderstood the question. I'm not super familiar with Cypress. Let's see if someone can help.

[brian3814]

Trying to do sth similar and came across this post. I'm quite new to FE/Testing and not sure if this is the best practice, at least it seems to work for me. Please kindly correct me if there will be side effects doing so

Added this in the entry component of my React App from CRA (e.x App.js)

useEffect(() => {
    if (window.Cypress) {
        window.store= `${your_store}`;
    }
},[])

then access it in Cypress with

it('Check store', () => {
    cy.window().its('store').invoke('getState').its('key').should('eq', 'value'); // check state

    cy.window().its('store').invoke('setState',{key:`newValue`}); // update state

    cy.window().its('store').invoke('getState').its('key').its('key').should('eq', 'newValue'); // assert to true
})

[stellenberger]

⏫ This is how cypress actually suggest doing it in their official documentation, so if you are using a store like redux, this is the answer! ⏫

For those who are not using redux for state management, and perhaps are passing down their state as props; I am not sure if theres a good way to test for state in cypress unless you do this way suggested above with Redux. If there is, let us know!

[wortley]

setState is not a valid function. Correct way:

cy.window().its("store").invoke("dispatch", setFoo("bar"))

(source: https://glebbahmutov.com/blog/spok-redux/)

[giltroymeren]

Thank you everyone!

I was able to do it in my zustand & TypeScript project with @orw22's linked article.

My only modification was in my store file:

if (window.Cypress) {
  //@ts-ignore
  window.Storage = useMyModelStore;
}

and I found the storage object in my test files as:

cy.window()
  .its("Storage")
  .invoke("getState")
  .its("myModel[0].attribute")
  .otherCypressConditions(...)

[RAFA3L]

I could make it work in this way

  useEffect(() => {
    if (window.Cypress) {
      window.store = useMyStore;
    }
  }, [])

    cy.window().its('store').invoke('getState').invoke('setName', 'asdasd');
    cy.window()
      .its('store')
      .invoke('getState')
      .its('name')
      .should('eq', 'asdasd');