fix: use modern conventions for component testing setup (#1296)

* fix: use modern conventions for component testing setup

* fix: fix yarn.lock

Author: astone123

cypress.config.js

@@ -7,7 +7,6 @@ import { percyHealthCheck } from "@percy/cypress/task";
 import codeCoverageTask from "@cypress/code-coverage/task";
 import { defineConfig } from "cypress";
 import "@cypress/instrument-cra";
-const { devServer } = require("@cypress/react/plugins/react-scripts");
 
 dotenv.config({ path: ".env.local" });
 dotenv.config();
@@ -52,7 +51,10 @@ module.exports = defineConfig({
     googleClientSecret: process.env.REACT_APP_GOOGLE_CLIENT_SECRET,
   },
   component: {
-    devServer,
+    devServer: {
+      framework: "create-react-app",
+      bundler: "webpack",
+    },
     specPattern: "src/**/*.cy.{js,jsx,ts,tsx}",
     supportFile: "cypress/support/component.ts",
     setupNodeEvents(on, config) {

cypress.d.ts

@@ -0,0 +1,13 @@
+import { mount } from "cypress/react";
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount;
+    }
+  }
+}

cypress/support/component.ts

@@ -1,2 +1,28 @@
 import "@cypress/code-coverage/support";
+// ***********************************************************
+// This example support/component.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";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from "cypress/react";
+
+Cypress.Commands.add("mount", mount);
+
+// Example use:
+// cy.mount(<MyComponent />)

cypress/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "../tsconfig.json",
-  "include": ["./**/*.ts"],
+  "include": ["./**/*.ts", "../cypress.d.ts"],
   "exclude": [],
   "compilerOptions": {
     "types": ["cypress", "@percy/cypress"],

package.json

@@ -51,7 +51,6 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.10.0-dev.1",
     "@cypress/instrument-cra": "1.4.0",
-    "@cypress/react": "^5.10.0",
     "@cypress/webpack-dev-server": "^1.6.0",
     "@faker-js/faker": "6.1.2",
     "@percy/cypress": "2.3.4",

src/components/AlertBar.cy.tsx

@@ -1,5 +1,4 @@
 import { startCase } from "lodash";
-import { mount } from "@cypress/react";
 import { interpret } from "xstate";
 import AlertBar from "./AlertBar";
 import { Severities, snackbarMachine } from "../machines/snackbarMachine";
@@ -20,7 +19,7 @@ describe("Alert Bar with state", () => {
       snackbarService.send(payload);
       expect(snackbarService.state.value).to.equal("visible");
 
-      mount(<AlertBar snackbarService={snackbarService} />);
+      cy.mount(<AlertBar snackbarService={snackbarService} />);
       cy.get("[data-test*=alert-bar]")
         .should("contain", payload.message)
         .and("have.class", `MuiAlert-filled${startCase(severity)}`);

src/components/SignInForm.cy.tsx

@@ -1,4 +1,3 @@
-import { mount } from "@cypress/react";
 import { interpret } from "xstate";
 import { MemoryRouter } from "react-router-dom";
 import SignInForm from "./SignInForm";
@@ -31,7 +30,7 @@ describe("SignInForm", () => {
   });
 
   it("submits the username and password to the backend", () => {
-    mount(
+    cy.mount(
       <MemoryRouter>
         <SignInForm authService={authService} />
       </MemoryRouter>

src/components/TransactionDateRangeFilter.cy.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { mount } from "@cypress/react";
 import { addDays, format as formatDate, startOfDay } from "date-fns";
 import TransactionDateRangeFilter from "./TransactionDateRangeFilter";
 import { endOfDayUTC } from "../utils/transactionUtils";
@@ -9,7 +8,7 @@ describe("Transaction Date Range Filter", () => {
     const filterDateRangeSpy = cy.spy();
     const resetDateRangeSpy = cy.spy();
 
-    mount(
+    cy.mount(
       <TransactionDateRangeFilter
         filterDateRange={filterDateRangeSpy}
         dateRangeFilters={{}}
@@ -27,7 +26,7 @@ describe("Transaction Date Range Filter", () => {
       dateRangeEnd: new Date("Dec 05 2030").toISOString(),
     };
 
-    mount(
+    cy.mount(
       <TransactionDateRangeFilter
         filterDateRange={filterDateRangeSpy}
         dateRangeFilters={dateRangeFilters}
@@ -45,7 +44,7 @@ describe("Transaction Date Range Filter", () => {
     const dateRangeStart = startOfDay(new Date(2014, 1, 1));
     const dateRangeEnd = endOfDayUTC(addDays(dateRangeStart, 1));
 
-    mount(
+    cy.mount(
       <TransactionDateRangeFilter
         filterDateRange={filterDateRangeSpy}
         dateRangeFilters={{}}

src/components/TransactionTitle.cy.tsx

@@ -1,11 +1,10 @@
 import * as React from "react";
-import { mount } from "@cypress/react";
 import TransactionTitle from "./TransactionTitle";
 
 it("Transaction Title", () => {
   cy.fixture("public-transactions.json").then((transactions) => {
     const transaction = transactions.results[0];
-    mount(<TransactionTitle transaction={transaction} />);
+    cy.mount(<TransactionTitle transaction={transaction} />);
     cy.get("[data-test*=transaction-sender]").should("contain", transaction.senderName);
   });
 });

src/containers/TransactionsContainer.cy.tsx

@@ -1,10 +1,9 @@
-import { mount } from "@cypress/react";
 import { MemoryRouter } from "react-router-dom";
 import TransactionsContainer from "./TransactionsContainer";
 
 describe("Transactions Container", () => {
   it("should not render transactions", () => {
-    mount(
+    cy.mount(
       <MemoryRouter initialEntries={["/"]}>
         <TransactionsContainer />
       </MemoryRouter>
@@ -15,7 +14,7 @@ describe("Transactions Container", () => {
     cy.intercept("http://localhost:3001/transactions/*", {
       fixture: "public-transactions.json",
     });
-    mount(
+    cy.mount(
       <MemoryRouter initialEntries={["/"]}>
         <TransactionsContainer />
       </MemoryRouter>
@@ -27,7 +26,7 @@ describe("Transactions Container", () => {
     cy.intercept("http://localhost:3001/transactions/*", {
       fixture: "public-transactions.json",
     });
-    mount(
+    cy.mount(
       <MemoryRouter initialEntries={["/contacts"]}>
         <TransactionsContainer />
       </MemoryRouter>
@@ -39,7 +38,7 @@ describe("Transactions Container", () => {
     cy.intercept("http://localhost:3001/transactions/*", {
       fixture: "public-transactions.json",
     });
-    mount(
+    cy.mount(
       <MemoryRouter initialEntries={["/personal"]}>
         <TransactionsContainer />
       </MemoryRouter>

tsconfig.json

@@ -18,5 +18,5 @@
     "noFallthroughCasesInSwitch": true,
     "types": ["cypress"]
   },
-  "include": ["src/**/*.cy.{js,ts,jsx,tsx}", "scripts", "backend", "src/__tests__"]
+  "include": ["src/**/*.cy.{js,ts,jsx,tsx}", "scripts", "backend", "src/__tests__", "cypress.d.ts"]
 }

yarn.lock

@@ -3277,21 +3277,6 @@
     debug "4.2.0"
     find-yarn-workspace-root "^2.0.0"
 
-"@cypress/[email protected]":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@cypress/mount-utils/-/mount-utils-1.0.2.tgz#afbc4f8c350b7cd86edc5ad0db0cbe1e0181edc8"
-  integrity sha512-Fn3fdTiyayHoy8Ol0RSu4MlBH2maQ2ZEXeEVKl/zHHXEQpld5HX3vdNLhK5YLij8cLynA4DxOT/nO9iEnIiOXw==
-
-"@cypress/react@^5.10.0":
-  version "5.12.0"
-  resolved "https://registry.yarnpkg.com/@cypress/react/-/react-5.12.0.tgz#f68e3e08bdbf6644f81246e0ca6ba9d8bbd6fb8d"
-  integrity sha512-SfkXf9Mg03gsOziOTo8oVhhwnEPF/3Vw13t9wE2crmRZsbLg1IaFKYDFKIvcMq821TDWkiU+xfjRZsOTQ05+LA==
-  dependencies:
-    "@cypress/mount-utils" "1.0.2"
-    debug "^4.3.2"
-    find-webpack "2.2.1"
-    find-yarn-workspace-root "2.0.0"
-
 "@cypress/request@^2.88.10":
   version "2.88.10"
   resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.10.tgz#b66d76b07f860d3a4b8d7a0604d020c662752cce"
@@ -7567,13 +7552,6 @@ debug@4, [email protected], debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, de
   dependencies:
     ms "2.1.2"
 
-[email protected]:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
-  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
-  dependencies:
-    ms "^2.1.1"
-
 [email protected]:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.2.0.tgz#7f150f93920e94c58f5574c2fd01a3110effe7f1"
@@ -9095,24 +9073,7 @@ find-up@^3.0.0:
   dependencies:
     locate-path "^3.0.0"
 
-[email protected]:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/find-webpack/-/find-webpack-2.2.1.tgz#96e7b701a2d37c3500cae30d4dc59e14923ba460"
-  integrity sha512-OdDtn2AzQvu3l9U1TS5ALc7uTVcLK/yv3fhjo+Pz7yuv4hG3ANKnbkKnPIPZ5ofd9mpYe6wRf5g5H4X9Lx48vQ==
-  dependencies:
-    debug "4.1.1"
-    find-yarn-workspace-root "1.2.1"
-    mocked-env "1.3.2"
-
-[email protected]:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/find-yarn-workspace-root/-/find-yarn-workspace-root-1.2.1.tgz#40eb8e6e7c2502ddfaa2577c176f221422f860db"
-  integrity sha512-dVtfb0WuQG+8Ag2uWkbG79hOUzEsRrhBzgfn86g2sJPkzmcpGdghbNTfUKGTxymFrY/tLIodDzLoW9nOJ4FY8Q==
-  dependencies:
-    fs-extra "^4.0.3"
-    micromatch "^3.1.4"
-
-[email protected], find-yarn-workspace-root@^2.0.0:
+find-yarn-workspace-root@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz#f47fb8d239c900eb78179aa81b66673eac88f7bd"
   integrity sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==
@@ -9272,15 +9233,6 @@ fs-constants@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
   integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
 
-fs-extra@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
-  integrity sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
 fs-extra@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
@@ -12380,16 +12332,6 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-[email protected]:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/mocked-env/-/mocked-env-1.3.2.tgz#548eb2fde141d083de70dc6b231cd9f3210d8731"
-  integrity sha512-jwm3ziowCjpbLNhUNYwn2G0tawV/ZGRuWeEGt6PItrkQT74Nk3pDldL2pmwm9sQZw6a/x+ZBGeBVYq54acTauQ==
-  dependencies:
-    check-more-types "2.24.0"
-    debug "4.1.1"
-    lazy-ass "1.6.0"
-    ramda "0.26.1"
-
 [email protected]:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.10.0.tgz#091778abc1fc47cd3509824653dae1faab6b17d7"
@@ -14478,11 +14420,6 @@ raf@^3.4.1:
   dependencies:
     performance-now "^2.1.0"
 
-[email protected]:
-  version "0.26.1"
-  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
-  integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==
-
 random-bytes@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/random-bytes/-/random-bytes-1.0.0.tgz#4f68a1dc0ae58bd3fb95848c30324db75d64360b"