kylemh / next-ts-with-cypress-coverage

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

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.

next-ts-with-cypress-coverage's Issues

Attempt at a no babel example

I had a run at a no babel example that you can find here: https://github.com/henricook/next-ts-with-cypress-coverage-swc-example

Unfortunately it looks like the SWC plugin crashes on start. There are no obvious error messages. I thought I'd post this here in case anyone has any thoughts/inspiration.

nextjs-types.d.ts is duplicated

The @types/nextjs-types.d.ts file already exists in /next-env.d.ts

Thank for you for work. Are you able to update to next 12?

Server-side coverage is not tracked

Hey!

Thanks for putting this together, I was able to adopt it for my project ❤️

However, I found that some files don't seem to be tracked, specifically anything that runs server-side. In my project, I have middlewares, api routes, getServerSideProps, etc... and all of that is not being tracked.

I've put together a minimum example with a single getServerSideProps call.

I made sure to explicitly include the file I want to cover in the .nycrc.json file, however, code in no-coverage-here is not being tracked as you can see:

An interesting side note seems to be, that there invocation of foo() seems to be tracked correctly, it's really just the file inside no-coverage-here that's missing.

Any idea what could be going wrong here?

Does code coverage get bundled into production builds?

Will the istanbul code coverage instrumented code get bundled for production and be part of a production build?

Update to Cypress v10

Let's keep this repo updated and lets keep current main on a v5-9 branch