/
Testing with Cypress - Species Selector

Testing with Cypress - Species Selector

Owned by Jingtong Xu
Feb 25, 2025
2 min read

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.

All E2E tests in the Species Selector have been updated to use real-time data from API responses, improving the ability to detect potential API issues.

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

The E2E testing mainly tests the major functions for mostly used pages in the app, including the Landing page, Location page, Crop Calendar page and My Cover Crops page, 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:

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

loginToAuth0: Custom command for login to through Auth0.

getReduxState: Custom command for getting redux store.

assertByTestId: Get and assert the existence of the item by it’s data-test property.

beforeEachVisitBaseUrl: Close the initial dialogs when entering the app, usually used in beforeEach()

The commands are defined in cypress/support/command.js, these are defined as Cypress custom commands which could be used in various testings.

Currently there’s one utility function defined in cypress/support/e2e.js, the function is used for side bar filter e2e testings, which take the api response and compare with the filter results.

Component Testing

The component tests serve as a supplement to the E2E tests, covering various components on the Site Condition and Goals Selection pages.

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.

 

Related content