chore: add component tests

examples/webapp/cypress.config.ts

@@ -17,7 +17,7 @@ module.exports = defineConfig({
   },
 
   component: {
-    specPattern: "cypress/component/*.spec.js",
+    specPattern: ["pages/**/*.spec.tsx", "pages/*.spec.tsx"],
     setupNodeEvents(on, config) {
       return currents(on, config);
     },

examples/webapp/next-env.d.ts

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

examples/webapp/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true,
+};

examples/webapp/package.json

@@ -3,16 +3,23 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
+    "build": "next build",
+    "start": "next start",
     "cypress:script": "ts-node scripts/currents-script.ts"
   },
   "dependencies": {
-    "cypress": "^12.6.0",
     "@currents/cypress": "*",
+    "cypress": "^12.6.0",
     "cypress-terminal-report": "^5.0.0",
+    "next": "^13.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "ts-node": "^10.9.1"
   },
   "devDependencies": {
     "@types/node": "^17.0.12",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "eslint": "7.32.0",
     "eslint-config-custom": "*",
     "tsconfig": "*",

examples/webapp/pages/about.tsx

@@ -0,0 +1,7 @@
+export default function About() {
+  return (
+    <div>
+      <h1>About Page</h1>
+    </div>
+  );
+}

examples/webapp/pages/aboutAbout-failing.spec.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import About from "./about";
+
+describe("<About />", () => {
+  it("renders", () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<About />);
+    cy.contains("Not About Page");
+  });
+});

examples/webapp/pages/aboutAbout.spec.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import About from "./about";
+
+describe("<About />", () => {
+  it("renders", () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<About />);
+    cy.contains("About Page");
+  });
+});

examples/webapp/pages/another.tsx

@@ -0,0 +1,7 @@
+export default function Another() {
+  return (
+    <div>
+      <h1>Another Page</h1>
+    </div>
+  );
+}

examples/webapp/pages/anotherAnother.spec.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import Another from "./another";
+
+describe("<Another />", () => {
+  it("renders", () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<Another />);
+    cy.contains("Another Page");
+  });
+});

examples/webapp/pages/index.tsx

@@ -0,0 +1,12 @@
+import Link from "next/link";
+
+export default function Home() {
+  return (
+    <nav>
+      <Link href="/about">About</Link>
+      <Link href="/another">Another</Link>
+    </nav>
+  );
+}
+
+export {};

examples/webapp/pages/indexHome.spec.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import Home from "./index";
+
+describe("<Home />", () => {
+  it("renders", () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<Home />);
+    cy.contains("About");
+    cy.contains("Another");
+  });
+});

examples/webapp/tsconfig.json

@@ -30,6 +30,6 @@
       "module": "CommonJS"
     }
   },
-  "include": ["src"],
+  "include": ["next-env.d.ts"],
   "exclude": ["node_modules"]
 }