React 19 update

.github/workflows/pull_request.yml

@@ -71,7 +71,7 @@ jobs:
         with:
           github_token: ${{ secrets.github_token }}
           reporter: github-pr-check
-          eslint_flags: '--ext .js --ext .jsx ./src/'
+          eslint_flags: './src/'
       - name: Lint Javascript
         run: yarn lint:js
 

cypress.config.js

@@ -1,8 +1,8 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-const { defineConfig } = require("cypress");
-const plugins = require("./cypress/plugins");
+import { defineConfig } from "cypress";
+import plugins from "./cypress/plugins";
 
-module.exports = defineConfig({
+export default defineConfig({
   projectId: "4trcdv",
   defaultCommandTimeout: 10000,
   pageLoadTimeout: 10000,

cypress/plugins/index.js

@@ -1,28 +1,45 @@
-// Cypress no longer natively supports plugins file, but we keep it for better code abstraction
-// https://docs.cypress.io/app/references/migration-guide#Plugins-File-Removed
+import task from "@cypress/code-coverage/task";
+import webpackPreprocessor from "@cypress/webpack-preprocessor";
 
-const task = require("@cypress/code-coverage/task");
-const browserify = require("@cypress/browserify-preprocessor");
-
-// In order to use both babelrc and typescript in browserify
-// we copy the functionality from @cypress/code-coverage/use-babelrc
-// and merge it with the typescript setting.
-// The plugin @cypress/code-coverage/use-babelrc basically
-// sets babelrc: true in the browserify options.
-const { browserifyOptions } = browserify.defaultOptions;
-browserifyOptions.transform[1][1].babelrc = true;
-
-module.exports = (on, config) => {
+export default (on, config) => {
   task(on, config);
-  on(
-    "file:preprocessor",
-    browserify({
-      typescript: require.resolve("typescript"),
-      browserifyOptions: {
-        extensions: [".js", ".ts"],
-        ...browserifyOptions
+
+  const options = {
+    webpackOptions: {
+      resolve: {
+        extensions: [".ts", ".tsx", ".js", ".jsx"],
+        modules: ["node_modules", "src"]
+      },
+      module: {
+        rules: [
+          {
+            test: /\.tsx?$/,
+            use: [
+              {
+                loader: "ts-loader",
+                options: {
+                  transpileOnly: true,
+                  compilerOptions: {
+                    module: "esnext",
+                    target: "es5",
+                    lib: ["es5", "dom"],
+                    jsx: "react",
+                    allowJs: true,
+                    esModuleInterop: true,
+                    allowSyntheticDefaultImports: true,
+                    noEmit: false
+                  }
+                }
+              }
+            ],
+            exclude: /node_modules/
+          }
+        ]
       }
-    })
-  );
+    }
+  };
+
+  on("file:preprocessor", webpackPreprocessor(options));
+
   return config;
 };

cypress/utils/graphql-test-utils.ts

@@ -1,3 +1,4 @@
+// import type { CyHttpMessages } from "../../node_modules/cypress/types/net-stubbing.js";
 import { CyHttpMessages } from "../support/types/net-stubbing";
 
 // Utility to match GraphQL mutation based on the operation name