Testing with Cypress

Cypress is a modern, end-to-end testing framework built specifically for web applications. Unlike traditional testing tools, Cypress is designed to be fast, reliable, and developer-friendly, with an intuitive interface and powerful features that streamline the entire testing process.

We have integrated both End-to-End (E2E) and component testing into our project, tests run automatically on our CI/CD pipelines. This approach will help us identify issues early in the development process, enabling faster detection and resolution of problems, while maintaining the reliability and quality of our application.

Quick start

Cypress is already included as a project dependency. For a quick start and detailed guidance on using Cypress, please refer to the documentation.

To open the Cypress app, run:

npm run cy:open

To run Cypress tests in headless mode, run:

npm run dev:test:all

There are several other commands for running e2e tests and component tests separately, all the scripts are defined in package.json.

Development

There are two config files under the root folder, cypress.config.mjs is used for testing on the CI/CD pipelines, if you are developing on your local, edit dev.cypress.config.mjs and then copy it to cypress.config.mjs so it’ll be applied on the pipeline.

E2E Testing

Since the Seeding Rate Calculator is relying on selections from a few steps, the E2E testing are developed based on each step, you can find E2E tests under cypress/e2e. There are also a few commands and utility functions defined, here’s a quick introduction for them:

The commands are defined in cypress/support/command.js, these are defined as Cypress custom commands.

getByTestId: Gets the item by it’s data-test property.

reactComponent: This is for reaching the React component directly through Cypress for more complex testing scenarios.

updateSlider: Custom command for updating Slider component.

loginToAuth0: Custom command for login to through Auth0.

getReduxState: Custom command for getting redux store.

The utility functions are defined in cypress/support/utils.js, these are functions that could be used for automatically go through each steps, which are usually used in beforeEach().

Component Testing

Not all components under src/components have tests because some of them are not used in the app, and some of them have some logics that’s needed in the app so it’s not possible to test it in an separate environment.

The cy.mount() command is a custom command defined in cypress/support/component.jsx because some components need the theme, router or redux store to work. The command would mount the component under an environment with these support.

The Cypress App would not run all component tests at one time, so it’s recommended to run component testing in headless mode so it’ll run one time for all the components.

Code Coverage

Code coverage is setup with @cypress/code-coverage, here’s an introduction for cypress code coverage. The code coverage tool will update code coverage after every tests running, and you’ll find the code coverage report at coverage/lcov-report/index.html.