How to add Cypress tests

When making changes to JavaScript, CSS, or HTML which could change the functionality or layout of a page, it's important to add corresponding Cypress integration tests.

To learn how to write Cypress tests, or 'specs', please see Cypress' official documentation.

Note: When writing tests for freeCodeCamp, remember to add /* global cy */ to the top of the file to avoid ESLint issues.

Where to add a test

Cypress tests are in the ./cypress directory.
Cypress tests for a curriculum module are in the corresponding curriculum directory, i.e. cypress/integration/learn/responsive-web-design/basic-css/index.js.

How to run tests

Note

If using GitPod, please see Cypress-GitPod Setup

1. Ensure that MongoDB and client applications are running

2. Run the cypress tests

To run tests against production builds, replace dev with prd below.

To run all tests in the ./cypress directory:
```
npm run cypress:dev:run
```

To run a single test:

npm run cypress:dev:run -- --spec=cypress/pathToYourSpec/youSpecFileName.js

To create a development build, start the development server, and run all existing cypress end-to-end tests:
```
npm run e2e:dev:run
```

Cypress-GitPod Setup

1. Ensure you are on the Feature Preview of GitPod as of 01/02/2021

Go to GitPod Docs - Feature Preview to see how to enable Feature Preview

2. Ensure Development Environment is Running

If starting the GitPod environment did not automatically develop the environment:

Start the database

mongod

Seed the database

npm run seed

Develop the server and client

npm run develop

3. Install Cypress Build Tools

npm run cypress:install-build-tools

When prompted in the terminal, select your keyboard layout by language/area

Now, Cypress can be run

2.4 KiB Raw Blame History