Skip to content

Instantly share code, notes, and snippets.

@textbook

textbook/cypress-cra.md

Last active Apr 10, 2021
Embed
What would you like to do?
Adding Cypress to a Create React App app

Here is how to add Cypress E2E tests to a Create React App bootstrapped application. Assumes the *nix command line, you may need to adapt this for a Windows command line (or use WSL or Git Bash).

  1. Install Cypress and the Testing Library utilities for it (to match the helpers CRA installs):

    $ npm i {,@testing-library/}cypress

    i is short for install, and the braces {} are expanded by brace expansion to cypress @testing-library/cypress.

    CRA seems to install everything as a production dependency, but you can add --save-dev if you like.

  2. Open the Cypress UI to bootstrap the test setup:

    $ ./node_modules/.bin/cypress open

    NPM installs the executables for all of your installed modules in the .bin directory, so you can use this for things you don't want to add to the package file.

    You can quit the Cypress UI after you've had a look at the examples.

  3. Delete the example files:

    $ rm -rf ./cypress/fixtures/example.json ./cypress/integration/examples/
  4. Set a base URL in the cypress.json per the best practices (I've also disabled automatic video recording):

    {
      "baseUrl": "http://localhost:3000",
      "videos": false
    }
  5. Set up the Testing Library utilities by adding the following to ./cypress/support/commands.js:

    import "@testing-library/cypress/add-commands";
  6. Make sure you exclude any videos and screenshots recorded by Cypress from your commits by adding the following to .gitignore:

    # Cypress
    cypress/screenshots/
    cypress/videos/
  7. Add a script that runs the E2E tests into the package file:

    "scripts": 
      "e2e": "cypress run",
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
  8. Create a new test file e.g. ./cypress/integration/home.test.js with the following:

    it("should load the page", () => {
      cy.visit("/");
      cy.findAllByText(/learn react/i).should("have.length", 1);
    });

    This is the same as the default src/App.test.js, but running via Cypress rather than Jest.

  9. Start the app in one terminal (npm start) then run the tests in another (npm run e2e). It should pass!

  10. Install the ESLint plugin with npm install eslint-plugin-cypress then add the following to the eslintConfig object in package.json:

      "overrides": [
        { 
          "extends": [
            "plugin:cypress/recommended"
          ],
          "files": [
            "cypress/**/*.js"
          ]
        }
      ]

    This is optional, but will ensure the linting passes (by adding the Cypress globals) and give some useful hints on good test practices.

#!/bin/bash
set -euo pipefail
if [[ $# -ne 1 ]]; then
echo 'Usage: new-cra-app.sh <app-name>'
exit 1
fi
echo 'Create default React app'
npx create-react-app@latest --use-npm "$1"
cd "$1"
echo 'Install Cypress dependencies'
npm install \
cypress \
eslint-plugin-cypress \
@testing-library/cypress
echo 'Opening Cypress, please exit the UI once it has loaded'
node_modules/.bin/cypress open
echo 'Removing preinstalled examples'
rm -rf \
cypress/fixtures/example.json \
cypress/integration/examples/
echo 'Updating Cypress configuration'
echo '{"baseUrl": "http://localhost:3000", "video": false}' \
| jq \
| tee cypress.json
echo "import '@testing-library/cypress/add-commands';" >> cypress/support/commands.js
echo 'Creating basic E2E test'
cat <<-EOF > cypress/integration/home.test.js
it("should load the page", () => {
cy.visit("/");
cy.findAllByText(/learn react/i).should("have.length", 1);
});
EOF
echo 'Ignoring Cypress test assets'
cat <<-EOF >> .gitignore
# cypress
cypress/screenshots/
cypress/videos/
EOF
echo 'Setting NPM package configuration'
cat package.json \
| jq '.scripts.e2e = "cypress run"' \
| jq '.scripts.lint = "eslint cypress/ src/"' \
| jq '.eslintConfig.overrides = [{"extends": ["plugin:cypress/recommended"], "files": ["cypress/**/*.js"]}]' \
| tee package.json
echo 'Install and configure Cypress'
git add .
git commit -m 'Set up Cypress testing'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment