React 19 update

.github/dependabot.yml

@@ -50,3 +50,21 @@ updates:
       testing-library:
         patterns:
           - "@testing-library/*"
+      eslint:
+        patterns:
+          - "eslint"
+          - "eslint-config-prettier"
+          - "eslint-loader"
+          - "eslint-plugin-cypress"
+          - "eslint-plugin-import"
+          - "eslint-plugin-jsx-a11y"
+          - "eslint-plugin-no-only-tests"
+          - "eslint-plugin-prettier"
+          - "eslint-plugin-react"
+          - "eslint-plugin-react-hooks"
+          - "eslint-webpack-plugin"
+          - "@eslint/*"
+      cypress:
+        patterns:
+          - "cypress"
+          - "@cypress/*"

.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/tsconfig.json

@@ -1,15 +1,9 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "es5",
-      "dom"
-    ],
-    "types": [
-      "cypress"
-    ]
+    "lib": ["es5", "dom"],
+    "types": ["cypress"],
+    "allowJs": true
   },
-  "include": [
-    "**/*.ts"
-  ]
+  "include": ["**/*.ts"]
 }