add cypress and coverage reporting

Author: kylemh

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["istanbul"]
+}

.gitignore

@@ -30,5 +30,6 @@ yarn-error.log*
 .env.test.local
 .env.production.local
 
-# vercel
-.vercel
+# coverage
+.nyc_output
+cypress-coverage

.nycrc.json

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

@types/files.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}

@types/nextjs-types.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

README.md

@@ -1,4 +1,4 @@
-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).
+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.
 
 ## Getting Started
 
@@ -12,19 +12,10 @@ yarn dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+Then open the Cypress test runner:
 
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+```bash
+npm run cypress open
+# or
+yarn cypress open
+```

cypress.json

@@ -0,0 +1,9 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "nodeVersion": "system",
+  "env": {
+    "codeCoverage": {
+      "url": "/api/__coverage__"
+    }
+  }
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/about.spec.ts

@@ -0,0 +1,7 @@
+describe('app', () => {
+  it('redirects to /', () => {
+    cy.visit('/about');
+    cy.location('pathname').should('equal', '/');
+    cy.findByTestId('landing_page').should('exist').and('be.visible');
+  });
+});

cypress/integration/index.spec.ts

@@ -0,0 +1,5 @@
+describe('landing', () => {
+  it('should render', () => {
+    cy.visitAndWaitFor('/', 'landing_page');
+  });
+});

cypress/plugins/index.ts

@@ -0,0 +1,31 @@
+// ***********************************************************
+/// <reference types="cypress" />
+
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const pluginConfig: Cypress.PluginConfig = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+
+  const browserify = require('@cypress/browserify-preprocessor');
+  const options = browserify.defaultOptions;
+  options.browserifyOptions.transform[1][1].babelrc = true;
+  options.typescript = require.resolve('typescript');
+
+  require('@cypress/code-coverage/task')(on, config);
+  on('file:preprocessor', browserify(options));
+
+  return config;
+};
+
+module.exports = pluginConfig;

cypress/support/commands.ts

@@ -0,0 +1,36 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+import '@testing-library/cypress/add-commands';
+
+/**
+ * NOTE: If you add a custom command, please add types for it.
+ * @see https://docs.cypress.io/guides/tooling/typescript-support.html#Types-for-custom-commands
+ * */
+
+Cypress.Commands.add('visitAndWaitFor', (pathname, testId) => {
+  cy.visit(pathname);
+  cy.findByTestId(testId).should('exist').and('be.visible');
+});

cypress/support/index.d.ts

@@ -0,0 +1,15 @@
+// in cypress/support/index.d.ts
+// load type definitions that come with Cypress module
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  interface Chainable {
+    /**
+     * @description Custom command to bootstrap initial page visit
+     * @param pathname - the path you want to end up on before tests execute
+     * @param testId - the test id of the element that should be visible before tests execute
+     * @example cy.visitAndWaitFor('/contact', 'contact_page_hero_banner')
+     */
+    visitAndWaitFor(pathname: string, testId: string): void;
+  }
+}

cypress/support/index.ts

@@ -0,0 +1,18 @@
+// ***********************************************************
+// This example support/index.js 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';

cypress/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "../.",
+    "isolatedModules": false
+  },
+  "files": ["./support/index.d.ts"],
+  "include": ["**/*.ts", "../@types/*.d.ts"]
+}

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

package.json

@@ -1,15 +1,38 @@
 {
   "name": "cypress-coverage",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "see-cy-coverage": "open ./cypress-coverage/lcov-report/index.html",
     "start": "next start"
   },
   "dependencies": {
     "next": "9.5.4",
     "react": "16.13.1",
     "react-dom": "16.13.1"
+  },
+  "nyc": {
+    "extends": "./.nycrc.json",
+    "report-dir": "cypress-coverage",
+    "reporter": [
+      "json",
+      "lcov"
+    ]
+  },
+  "devDependencies": {
+    "@cypress/browserify-preprocessor": "^3.0.1",
+    "@cypress/code-coverage": "^3.8.1",
+    "@istanbuljs/nyc-config-typescript": "^1.0.1",
+    "@testing-library/cypress": "^7.0.1",
+    "@types/node": "^14.11.7",
+    "@types/react": "^16.9.51",
+    "@types/react-dom": "^16.9.8",
+    "@types/testing-library__cypress": "^5.0.8",
+    "babel-plugin-istanbul": "^6.0.0",
+    "cypress": "^5.3.0",
+    "nyc": "^15.1.0",
+    "typescript": "^4.0.3"
   }
 }

pages/_app.js

@@ -0,0 +1,13 @@
+import { NextComponentType } from 'next';
+import '../styles/globals.css';
+
+interface CustomAppProps {
+  Component: NextComponentType;
+  pageProps: { [key: string]: any };
+}
+
+function App({ Component, pageProps }: CustomAppProps) {
+  return <Component {...pageProps} />;
+}
+
+export default App;

pages/_app.tsx

@@ -0,0 +1,18 @@
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+
+export default function About() {
+  const router = useRouter();
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+    router.replace('/');
+  }, []);
+
+  if (!isMounted) {
+    return null;
+  }
+
+  return <>You should never see this</>;
+}

pages/about.tsx

@@ -0,0 +1 @@
+module.exports = require('@cypress/code-coverage/middleware/nextjs');

pages/api/__coverage__.js

@@ -0,0 +1,28 @@
+import Link from 'next/link';
+import Head from 'next/head';
+import styles from '../styles/Home.module.css';
+
+export default function Home() {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Next.js + Cypress</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main} data-testid="landing_page">
+        <h1 className={styles.title}>
+          Welcome to the TypeScript <a href="https://nextjs.org">Next.js</a>{' '}
+          Cypress example.
+        </h1>
+
+        <div className={styles.linkContainer}>
+          <Link href="/about">
+            <a data-testid="about_page_link">Try going to about page...</a>
+          </Link>
+          <>(you can't lol, idk)</>
+        </div>
+      </main>
+    </div>
+  );
+}