cypress-example-forms [![renovate-app badge][renovate-badge]][renovate-app] [](https://circleci.com/gh/bahmutov/cypress-example-forms/tree/master)

Forms component is uniforms

• single-test.js shows a single long test that goes through the 3 pages of the form.
• three-tests.js splits this long test into 3 tests. Each test ends by confirming the internal application state, then a new test starts by setting that state. This sets the second test at the same checkpoint as if the test went through the user interface.
• actions.js shows even better approach to controlling the application's state from the tests using cypress-react-app-actions plugin, read "Control React Applications From Cypress Tests".

Main points

Application exposes its reference by setting it on the window object.

// application code
class MasterForm extends React.Component {
  constructor (props) {
    super(props)
    if (window.Cypress) {
      window.app = this
    }
  }
  ...
}

Then the first test ends with a known state - we assert the internal state object.

// end of the first test
const startOfSecondPageState = {...}
cy.contains('Next').click()

cy.log('Second page')
cy.contains('h1', 'Book Hotel 2')
cy.window()
  .its('app.state')
  .should('deep.equal', startOfSecondPageState)

The second test starts by visiting the application page and setting the state object.

// start of the second test
cy.window().its('app').invoke('setState', startOfSecondPageState)

cy.log('Second page')
cy.contains('h1', 'Book Hotel 2')

Once the test invokes the app.setState(...) it "becomes" exactly as if the test went through the user interface filling the first page.

See more notes about this direct access from the Cypress test to the application in Stop using Page Objects and Start using App Actions.

License

This project is licensed under the terms of the MIT license.