cypress-and-jest-typescript-example

Example using Jest and Cypress with TypeScript in a single repo

If you are using Jest and Cypress types in the same project, they might conflict because both test runners use globals like expect. This project shows how to isolate Cypress TypeScript definitions from Jest TS definitions in the same project.

See the root level tsconfig.json and jest.config.js. The Cypress types are isolated from the root in the file cypress/tsconfig.json. The root tsconfig explicitly only includes libs with Jest globals (without Cypress)

Linting

While writing the production code, we want to limit ourselves to the src TS files without including the spec files. While linting, we want to lint all files. Thus we create a separate tsconfig.lint.json file that includes all src files, but sets noEmit: true compiler option. The command npm run lint thus lints src folder, without Cypress files.

To lint Cypress specs, we have a separate lint command that points at cypress/tsconfig.json file.

{
  "scripts": {
    "build": "tsc",
    "lint": "tsc --project tsconfig.lint.json",
    "lint:cypress": "tsc --project cypress/tsconfig.json"
  }
}

Additional information

See the excellent advice on setting TypeScript for Jest and Cypress in TypeScript Deep Dive e-book by Basarat Syed

• Using Jest with TypeScript
• Cypress E2E with TypeScript
• Cypress TypeScript transpilation is using built-in TS support

Questions or problems

If you hit a problem using Jest and Cypress in the same project, please open an issue in this repository. Include a fork of this repository that shows the problem.

CircleCI workflow

The file .circleci/config.yml shows how to run Cypress and Jest tests using Cypress CircleCI Orb

GitHub Actions workflow

This repo shows how to install dependencies and how to run Jest test in separate jobs on GitHub Actions. See the workflow file .github/workflows/ci.yml for several different approaches

• install and cache dependencies yourself using actions/cache
• install and cache NPM dependencies using bahmutov/npm-install helper
• install and cache NPM dependencies using cypress-io/github-action

Tip: you can learn more about running Cypress tests on continuous integration services from Cypress CI guide and Cypress on CI workshop.

License

This project is licensed under the terms of the MIT license.