Merge pull request #6 from warizz/bump-dependencies-main

Author: kylemh

.nycrc.json

@@ -1,6 +1,5 @@
 {
   "extension": [".js", ".jsx", ".ts", ".tsx"],
-  "extends": "@istanbuljs/nyc-config-typescript",
   "include": ["pages/**/*"],
   "exclude": ["pages/api/__coverage__.js"],
   "all": true,

README.md

@@ -1,5 +1,22 @@
 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:
@@ -20,6 +37,9 @@ npm run cypress open
 yarn cypress open
 ```
 
-## The Proof!
+## 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](./coverage_screenshot.png)
+![Screenshot of coverage report](./coverage_screenshot_next13.png)

coverage_screenshot_next13.png

@@ -0,0 +1,18 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  env: {
+    codeCoverage: {
+      url: '/api/__coverage__',
+    },
+  },
+
+  e2e: {
+    baseUrl: 'http://localhost:3000/',
+    supportFile: 'cypress/support/e2e.ts',
+    setupNodeEvents(on, config) {
+      require('@cypress/code-coverage/task')(on, config);
+      return config;
+    },
+  },
+});

cypress.config.ts

@@ -0,0 +1,21 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+import '@cypress/code-coverage/support';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

cypress.json

@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.