Fix cypress

cypress.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents: (on, config) => {
+      const isDev = config.watchForFileChanges;
+      const port = process.env.PORT ?? (isDev ? "3000" : "8811");
+      const configOverrides: Partial<Cypress.PluginConfigOptions> = {
+        baseUrl: `http://localhost:${port}`,
+        video: !process.env.CI,
+        screenshotOnRunFailure: !process.env.CI,
+      };
+
+      // To use this:
+      // cy.task('log', whateverYouWantInTheTerminal)
+      on("task", {
+        log: (message) => {
+          console.log(message);
+
+          return null;
+        },
+      });
+
+      return { ...config, ...configOverrides };
+    },
+  },
+});

cypress/e2e/smoke.ts → cypress/e2e/smoke.cy.ts

@@ -12,7 +12,7 @@ describe("smoke tests", () => {
     };
     cy.then(() => ({ email: loginForm.email })).as("user");
 
-    cy.visit("/");
+    cy.visitAndCheck("/");
     cy.findByRole("link", { name: /sign up/i }).click();
 
     cy.findByRole("textbox", { name: /email/i }).type(loginForm.email);
@@ -35,7 +35,7 @@ describe("smoke tests", () => {
       tags: "foo+bar,baz wibble+wobble,wubble",
     };
     cy.login();
-    cy.visit("/");
+    cy.visitAndCheck("/");
 
     cy.findByRole("link", { name: /Your links/i }).click();
     cy.findByText("You haven't added any links yet.");

cypress/plugins/index.ts

@@ -6,9 +6,11 @@ module.exports = (
   const port = process.env.PORT ?? (isDev ? "3000" : "8811");
   const configOverrides: Partial<Cypress.PluginConfigOptions> = {
     baseUrl: `http://localhost:${port}`,
-    integrationFolder: "cypress/e2e",
     video: !process.env.CI,
     screenshotOnRunFailure: !process.env.CI,
+    e2e: {
+      specPattern: "cypress/e2e",
+    },
   };
   Object.assign(config, configOverrides);
 

cypress/support/commands.ts

@@ -1,4 +1,4 @@
-import faker from "@faker-js/faker";
+import { faker } from "@faker-js/faker";
 
 declare global {
   namespace Cypress {
@@ -26,6 +26,18 @@ declare global {
        *    cy.cleanupUser({ email: '[email protected]' })
        */
       cleanupUser: typeof cleanupUser;
+
+      /**
+       * Extends the standard visit command to wait for the page to load
+       *
+       * @returns {typeof visitAndCheck}
+       * @memberof Chainable
+       * @example
+       *    cy.visitAndCheck('/')
+       *  @example
+       *    cy.visitAndCheck('/', 500)
+       */
+      visitAndCheck: typeof visitAndCheck;
     }
   }
 }
@@ -68,10 +80,16 @@ function deleteUserByEmail(email: string) {
   cy.clearCookie("__session");
 }
 
+// We're waiting a second because of this issue happen randomly
+// https://github.com/cypress-io/cypress/issues/7306
+// Also added custom types to avoid getting detached
+// https://github.com/cypress-io/cypress/issues/7306#issuecomment-1152752612
+// ===========================================================
+function visitAndCheck(url: string, waitTime: number = 1000) {
+  cy.visit(url);
+  cy.location("pathname").should("contain", url).wait(waitTime);
+}
+
 Cypress.Commands.add("login", login);
 Cypress.Commands.add("cleanupUser", cleanupUser);
-
-/*
-eslint
-  @typescript-eslint/no-namespace: "off",
-*/
+Cypress.Commands.add("visitAndCheck", visitAndCheck);

cypress/support/create-user.ts

@@ -4,10 +4,11 @@
 // and it will log out the cookie value you can use to interact with the server
 // as that new user.
 
+import { installGlobals } from "@remix-run/node";
 import { parse } from "cookie";
-import { installGlobals } from "@remix-run/node/globals";
-import { createUserSession } from "~/session.server";
+
 import { createUser } from "~/models/user.server";
+import { createUserSession } from "~/session.server";
 
 installGlobals();
 
@@ -22,7 +23,7 @@ async function createAndLogin(email: string) {
   const user = await createUser(email, "myreallystrongpassword");
 
   const response = await createUserSession({
-    request: new Request(""),
+    request: new Request("test://test"),
     userId: user.id,
     remember: false,
     redirectTo: "/",

cypress/support/delete-user.ts

@@ -3,7 +3,9 @@
 // npx ts-node --require tsconfig-paths/register ./cypress/support/delete-user.ts [email protected]
 // and that user will get deleted
 
-import { installGlobals } from "@remix-run/node/globals";
+import { PrismaClientKnownRequestError } from "@prisma/client/runtime";
+import { installGlobals } from "@remix-run/node";
+
 import { prisma } from "~/db.server";
 
 installGlobals();
@@ -16,7 +18,20 @@ async function deleteUser(email: string) {
     throw new Error("All test emails must end in @example.com");
   }
 
-  await prisma.user.delete({ where: { email } });
+  try {
+    await prisma.user.delete({ where: { email } });
+  } catch (error) {
+    if (
+      error instanceof PrismaClientKnownRequestError &&
+      error.code === "P2025"
+    ) {
+      console.log("User not found, so no need to delete");
+    } else {
+      throw error;
+    }
+  } finally {
+    await prisma.$disconnect();
+  }
 }
 
 deleteUser(process.argv[2]);

cypress/support/e2e.ts

@@ -0,0 +1,15 @@
+import "@testing-library/cypress/add-commands";
+import "./commands";
+
+Cypress.on("uncaught:exception", (err) => {
+  // Cypress and React Hydrating the document don't get along
+  // for some unknown reason. Hopefully we figure out why eventually
+  // so we can remove this.
+  if (
+    /hydrat/i.test(err.message) ||
+    /Minified React error #418/.test(err.message) ||
+    /Minified React error #423/.test(err.message)
+  ) {
+    return false;
+  }
+});