freeCodeCamp/docs/how-to-add-cypress-tests.md

2.1 KiB

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.

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 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

2. 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