Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kylemh/next-ts-with-cypress-coverage
An example create-next-app project using TypeScript, Cypress, @testing-library/cypress, and instrumented coverage
https://github.com/kylemh/next-ts-with-cypress-coverage
cypress istanbul nextjs testing-library typescript
Last synced: 28 days ago
JSON representation
An example create-next-app project using TypeScript, Cypress, @testing-library/cypress, and instrumented coverage
- Host: GitHub
- URL: https://github.com/kylemh/next-ts-with-cypress-coverage
- Owner: kylemh
- Created: 2020-10-09T04:46:14.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-01-13T10:36:23.000Z (almost 2 years ago)
- Last Synced: 2024-10-04T15:51:20.606Z (about 2 months ago)
- Topics: cypress, istanbul, nextjs, testing-library, typescript
- Language: TypeScript
- Homepage:
- Size: 395 KB
- Stars: 14
- Watchers: 3
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/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](https://github.com/kylemh/next-ts-with-cypress-coverage/tree/next9thru12-and-cypress5thru9).
## 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](https://github.com/kwonoj/swc-plugin-coverage-instrument). 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](https://beta.nextjs.org/docs/getting-started) 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:
```bash
npm run dev
# or
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
Then open the Cypress test runner:
```bash
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`.
