tour-of-heroes-react-cypress-ts VS react-cypress-ts-template

ToH is the final app built in the book CCTDD: Cypress Component Test Driven Design. It has a few dozen Cypress component tests and their RTL mirrors. We will cover a few examples to showcase the main differences.

We'll start by examining a Tour of Heroes repo, featured in the book CCTDD: Cypress Component Test Driven Design. This repository demonstrates various test checks, including lint (ESLint), type checks (TS), unit tests (Jest), and Cypress component tests & end-to-end tests. The tests are parallelized to reduce feedback time to approximately five minutes, which is an optimal duration to promote a continuous feedback loop for this size of repo.

Any blog post is lackluster without working code, so here is a PR from scratch adding esbuild to a repository with Cypress. You can find the final code on the main branch of the repository we will use in this example. Other examples can be found at tour-of-heroes-react-cypress-ts as well as a VueJS app. The framework and the bundler the framework uses are irrelevant, any repo can take advantage of cypress-esbuild-preprocessor for e2e tests.

This is a new section in my book, chapter 20 of CCTDD: Cypress Component Test Driven Design. It is being shared here to reach a wider audiance. All the content is paired with the application Tour of Heroes in React Cypress TS. The PR for the functional refactor can be found in here. While all the code is copy pastable, you can find working prototypes here and here.

In the previous post we covered triple combined coverage in a React app written in JS . Alas, Typescript can be tricky with combined code coverage. We continue the series with a Typescript example using the React TS app featured in the book CCTDD: Cypress Component Test Driven Design. The application built in the book is in TS, includes Cypress e2e, CT tests, as well as React Testing Library mirrors of them. The repo tour-of-heroes-react-cypress-ts has the final version of the repo with triple combined coverage setup. The state of the repo prior to code coverage is in the branch before-code-coverage and there is a sample PR for reproducing this guide.

This optimization will help speed up our test warmup time at scale, further simplify our plugin and task configurations. The process is described elaborately in this video, the PR, and the final code is shown in two simple template examples; CRA-repo, Vite-repo. This is the way we wish Cypress came out of the box.