try-cra-app-typescript

@cypress/react-4.16.4-brightgreen" alt="@cypress/react version">

This project was bootstrapped with Create React App using TypeScript template

$ npx create-react-app try-cra-app-typescript --template typescript
info Direct dependencies
├─ cra-template-typescript@1.0.3
├─ react-dom@16.13.1
├─ react-scripts@3.4.1
└─ react@16.13.1

Then add Cypress and cypress-react-unit-test

$ yarn add -D cypress cypress-react-unit-test
info Direct dependencies
├─ cypress-react-unit-test@3.0.1
└─ cypress@4.3.0

Create cypress.json and point at the unit testing settings: support and plugins to read the create-react-app webpack config and load tests from src folder.

Create src/App.cy-spec.tsx. Run using yarn cypress open and you should see the working component test.

The test vs the original React Testing Library test file (nothing like type clashes between Mocha and Jest assertions, right)

Code coverage

The component tests collect code coverage automatically. You should see messages in the command log.

When running on CI, the collected coverage information is checked using check-code-coverage utility. If the code coverage is not being collected, run Cypress with environment variable to see logs:

DEBUG=cypress-react-unit-test,find-webpack