Check types when running Cypress (#1186)

cypress/plugins/index.ts

@@ -1,3 +1,9 @@
+// The Webpack preprocessor does not include any types so it will have to be ignored.
+// @ts-ignore
+import webpackPreprocessor from "@cypress/webpack-batteries-included-preprocessor";
+import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
+import path from "path";
+
 // ***********************************************************
 // This example plugins/index.js can be used to load plugins
 //
@@ -11,10 +17,25 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const configurePlugins: Cypress.PluginConfig = (on) => {
-const configurePlugins: Cypress.PluginConfig = (on, config) => {
+  const defaultOptions = webpackPreprocessor.defaultOptions.webpackOptions;
-  // `on` is used to hook into various events Cypress emits
+  const webpackOptions = {
-  // `config` is the resolved Cypress config
+    ...defaultOptions,
+    context: path.resolve(__dirname, ".."),
+    plugins: [
+      new ForkTsCheckerWebpackPlugin({
+        async: false,
+      }),
+    ],
+  };
+
+  on(
+    "file:preprocessor",
+    webpackPreprocessor({
+      typescript: require.resolve("typescript"),
+      webpackOptions,
+    })
+  );
 };
 
 export default configurePlugins;

cypress/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "../tsconfig.json",
   "include": ["**/*"],
   "compilerOptions": {
-    "types": ["cypress", "@testing-library/cypress"],
+    "types": ["node", "cypress", "@testing-library/cypress"],
     "module": "ES2015",
     "target": "ES2015",
   }

package.json

@@ -45,6 +45,8 @@
     "use-react-router-breadcrumbs": "^2.0.2"
   },
   "devDependencies": {
+    "@cypress/webpack-batteries-included-preprocessor": "^2.2.3",
+    "@cypress/webpack-preprocessor": "^5.9.1",
     "@jest/types": "^27.1.1",
     "@snowpack/app-scripts-react": "^2.0.1",
     "@snowpack/plugin-postcss": "^1.4.3",
@@ -56,6 +58,7 @@
     "@types/dagre": "^0.7.45",
     "@types/file-saver": "^2.0.3",
     "@types/lodash": "^4.14.173",
+    "@types/node": "^16.9.2",
     "@types/react": "^17.0.21",
     "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.1.9",
@@ -70,6 +73,7 @@
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.25.3",
+    "fork-ts-checker-webpack-plugin": "^6.3.3",
     "http2-proxy": "^5.0.53",
     "husky": "^7.0.2",
     "jest": "^27.2.0",