Skip to content

kylemh/next-ts-with-cypress-coverage

Repository files navigation

This is a Next.js project bootstrapped with create-next-app for the express purpose of demonstrating Next.js, TypeScript, and Cypress working together with working coverage reports.

Older Versions

You can see an example that should work with any combination of Next.js 9 thru 12 and Cypress 5 thru 9 here.

Contributing

Instructions on how to get started with this repo are below. Contributions we would love to receive:

  • An example without Babel. This would use the SWC Coverage Plugin. The current examples all have a slower build, slower dev server, and slower hot reload than Next.js applications that DONT use Babel.
  • An example using Next.js's App Directory and providing coverage for server components.
  • Use GitHub Actions to prove that coverage is outputting so that people can freely contribute without manual review on their branch.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Then open the Cypress test runner:

npm run cypress open
# or
yarn cypress open

The Proof

To see coverage, yarn build && yarn start followed with a separate yarn cypress run. Once finished, yarn see-cy-coverage.

Screenshot of coverage report

About

An example create-next-app project using TypeScript, Cypress, @testing-library/cypress, and instrumented coverage

Topics

Resources

Stars

Watchers

Forks