Refactor Cypress related files

cypress.d.ts

+import { mount } from "cypress/react18";
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount;
+      login(): Chainable<void>;
+    }
+  }
+}

cypress/support/commands.js

@@ -26,8 +26,13 @@
 
 // Import React Testing Library commands (select by a11y role etc)
 import "@testing-library/cypress/add-commands";
+import { mount } from "cypress/react18";
 
 // import custom auth commands
 Cypress.Commands.add("login", () => {
   cy.setCookie("ce-deploy-auth", "DEADBEEF");
 });
+
+Cypress.Commands.add("mount", (component, options) => {
+  return mount(component, options);
+});

cypress/support/component.jsx

@@ -15,7 +15,6 @@
 
 // Import commands.js using ES2015 syntax:
 import "./commands";
-import { ReduxProvider } from "../../src/store/ReduxProvider";
 
 // Alternatively you can use CommonJS syntax:
 // require("./commands")
@@ -23,8 +22,9 @@ import { ReduxProvider } from "../../src/store/ReduxProvider";
 import { mount } from "cypress/react";
 import { interceptAPI } from "./interceptAPI";
 import configure from "./configureWindowVars";
-Cypress.Commands.add("mount", (component, options = {}) => {
+import { ReduxProvider } from "../../src/store/ReduxProvider";
 
+Cypress.Commands.add("mount", (component, options = {}) => {
   const wrappedComponent = <ReduxProvider>{component}</ReduxProvider>;
   return mount(wrappedComponent, options);
 });

src/api/UserProvider.spec.tsx

 import { useContext } from "react";
 import { userContext } from "@ess-ics/ce-ui-common";
 import { SnackbarProvider } from "notistack";
-import { DeployAPIProvider } from "./APIProvider";
 import { UserProvider } from "./UserProvider";
 
-function AppHarness({ children }) {
-  return (
-    <SnackbarProvider
-      preventDuplicate
-      maxSnack="5"
-    >
-      <DeployAPIProvider>{children}</DeployAPIProvider>
-    </SnackbarProvider>
-  );
-}
-
-function mountIntoHarness(children) {
-  cy.mount(<AppHarness>{children}</AppHarness>);
-}
-
 function DisplayUserContextValue() {
   const contextValue = useContext(userContext);
-
   return <pre id="display">{JSON.stringify(contextValue, null, 2)}</pre>;
 }
 
@@ -32,10 +15,15 @@ describe("UserProvider", () => {
     });
 
     it("provides the user", () => {
-      mountIntoHarness(
-        <UserProvider>
-          <DisplayUserContextValue />
-        </UserProvider>
+      cy.mount(
+        <SnackbarProvider
+          preventDuplicate
+          maxSnack={5}
+        >
+          <UserProvider>
+            <DisplayUserContextValue />
+          </UserProvider>
+        </SnackbarProvider>
       );
 
       cy.wait("@getUserRoles");

src/components/IOC/IOCTable/IOCTable.spec.tsx

@@ -45,7 +45,7 @@ describe("IOCTable", () => {
               .should(($el) => {
                 const text = $el.text().trim().toLowerCase();
                 const expected = firstRowData[index].trim().toLowerCase();
-                cy.expect(text).to.equal(expected);
+                expect(text).to.equal(expected);
               });
           }
         });

src/components/host/HostTable.spec.tsx

@@ -45,7 +45,7 @@ describe("HostTable", () => {
               .should(($el) => {
                 const text = $el.text().trim().toLowerCase();
                 const expected = firstRowData[index].trim().toLowerCase();
-                cy.expect(text).to.equal(expected);
+                expect(text).to.equal(expected);
               });
           }
         });

tsconfig.json

@@ -20,8 +20,14 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "allowSyntheticDefaultImports": true,
-    "types": ["@types/react", "@types/react-dom", "vite/client"]
+    "types": [
+      "cypress",
+      "@testing-library/cypress",
+      "@types/react",
+      "@types/react-dom",
+      "vite/client"
+    ]
   },
-  "include": ["src"],
+  "include": ["src", "cypress.d.ts"],
   "exclude": ["node_modules", "build"]
 }