feat(testing): remove unused dependencies from @nrwl/cypress (#13771)

docs/generated/packages/cypress.json

@@ -158,6 +158,13 @@
             "description": "The name of the project to add cypress component testing to",
             "$default": { "$source": "projectName" },
             "x-prompt": "What project should we add Cypress component testing to?"
+          },
+          "bundler": {
+            "description": "The Cypress bundler to use.",
+            "type": "string",
+            "enum": ["vite", "webpack"],
+            "x-prompt": "Which Cypress bundler do you want to use for the dev-server?",
+            "default": "webpack"
           }
         },
         "required": ["project"],

e2e/react/src/react-misc.test.ts

@@ -21,7 +21,6 @@ describe('React Applications: additional packages', () => {
     checkFilesExist(
       `dist/apps/${appName}/index.html`,
       `dist/apps/${appName}/runtime.js`,
-      `dist/apps/${appName}/polyfills.js`,
       `dist/apps/${appName}/main.js`
     );
   }, 250_000);

e2e/react/src/react.test.ts

@@ -145,7 +145,6 @@ describe('React Applications', () => {
     const filesToCheck = [
       `dist/apps/${appName}/index.html`,
       `dist/apps/${appName}/runtime.js`,
-      `dist/apps/${appName}/polyfills.js`,
       `dist/apps/${appName}/main.js`,
     ];
 

e2e/web/src/web.test.ts

@@ -34,7 +34,6 @@ describe('Web Components Applications', () => {
     checkFilesExist(
       `dist/apps/${appName}/index.html`,
       `dist/apps/${appName}/runtime.js`,
-      `dist/apps/${appName}/polyfills.js`,
       `dist/apps/${appName}/main.js`,
       `dist/apps/${appName}/styles.css`
     );

packages/cypress/package.json

@@ -34,23 +34,13 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@babel/core": "^7.0.1",
-    "@babel/preset-env": "^7.0.0",
-    "@cypress/webpack-preprocessor": "^5.12.0",
     "@nrwl/devkit": "file:../devkit",
     "@nrwl/linter": "file:../linter",
     "@nrwl/workspace": "file:../workspace",
     "@phenomnomnominal/tsquery": "4.1.1",
-    "babel-loader": "^8.0.2",
     "chalk": "4.1.0",
     "dotenv": "~10.0.0",
-    "fork-ts-checker-webpack-plugin": "7.2.13",
-    "semver": "7.3.4",
-    "ts-loader": "^9.3.1",
-    "tsconfig-paths-webpack-plugin": "3.5.2",
-    "tslib": "^2.3.0",
-    "webpack": "^4 || ^5",
-    "webpack-node-externals": "^3.0.0"
+    "semver": "7.3.4"
   },
   "peerDependencies": {
     "cypress": ">= 3 < 12"

packages/cypress/src/generators/cypress-component-project/cypress-component-project.ts

@@ -6,19 +6,19 @@ import {
   offsetFromRoot,
   ProjectConfiguration,
   readProjectConfiguration,
+  readWorkspaceConfiguration,
   Tree,
   updateJson,
   updateProjectConfiguration,
-  NxJsonConfiguration,
-  readWorkspaceConfiguration,
   updateWorkspaceConfiguration,
 } from '@nrwl/devkit';
 import { installedCypressVersion } from '../../utils/cypress-version';
 
 import {
   cypressVersion,
+  cypressViteDevServerVersion,
   cypressWebpackVersion,
-  webpackHttpPluginVersion,
+  htmlWebpackPluginVersion,
 } from '../../utils/versions';
 import { CypressComponentProjectSchema } from './schema';
 
@@ -35,7 +35,7 @@ export async function cypressComponentProject(
 
   const projectConfig = readProjectConfiguration(tree, options.project);
 
-  const installDepsTask = updateDeps(tree);
+  const installDepsTask = updateDeps(tree, options);
 
   addProjectFiles(tree, projectConfig, options);
   addTargetToProject(tree, projectConfig, options);
@@ -50,13 +50,18 @@ export async function cypressComponentProject(
   };
 }
 
-function updateDeps(tree: Tree) {
+function updateDeps(tree: Tree, options: CypressComponentProjectSchema) {
   const devDeps = {
-    '@cypress/webpack-dev-server': cypressWebpackVersion,
-    'html-webpack-plugin': webpackHttpPluginVersion,
     cypress: cypressVersion,
   };
 
+  if (options.bundler === 'vite') {
+    devDeps['@cypress/vite-dev-server'] = cypressViteDevServerVersion;
+  } else {
+    devDeps['@cypress/webpack-dev-server'] = cypressWebpackVersion;
+    devDeps['html-webpack-plugin'] = htmlWebpackPluginVersion;
+  }
+
   return addDependenciesToPackageJson(tree, {}, devDeps);
 }
 

packages/cypress/src/generators/cypress-component-project/schema.d.ts

@@ -1,4 +1,5 @@
 export interface CypressComponentProjectSchema {
   project: string;
   skipFormat: boolean;
+  bundler?: 'webpack' | 'vite';
 }

packages/cypress/src/generators/cypress-component-project/schema.json

@@ -19,6 +19,13 @@
         "$source": "projectName"
       },
       "x-prompt": "What project should we add Cypress component testing to?"
+    },
+    "bundler": {
+      "description": "The Cypress bundler to use.",
+      "type": "string",
+      "enum": ["vite", "webpack"],
+      "x-prompt": "Which Cypress bundler do you want to use for the dev-server?",
+      "default": "webpack"
     }
   },
   "required": ["project"],

packages/cypress/src/plugins/preprocessor.ts

@@ -1,71 +1,18 @@
-import * as wp from '@cypress/webpack-preprocessor';
-import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
-import ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 import { stripIndents } from '@nrwl/devkit';
-import { installedCypressVersion } from '@nrwl/cypress/src/utils/cypress-version';
-import nodeExternals = require('webpack-node-externals');
 
-/**
- * @deprecated This function is no longer necessary and will be removed in Nx 14
+/*
+ * Keeping this file here, so users who still use the old preprocessor will
+ * continue to have instructions for how to update their workspace.
+ *
+ * We deprecated this back in Nx 12, so it's time to force users to stop using it.
+ *
+ * TODO: Remove this file in Nx 16
  */
 export function preprocessTypescript(
   config: any,
   customizeWebpackConfig?: (webpackConfig: any) => any
 ) {
-  if (installedCypressVersion() >= 7) {
-    console.log(stripIndents`
+  throw new Error(stripIndents`
     preprocessTypescript is now deprecated since Cypress has added typescript support.
     If you would still like preprocess files with webpack, use the "@cypress/webpack-preprocessor" package.`);
-  }
-
-  if (!config.env.tsConfig) {
-    throw new Error(
-      'Please provide an absolute path to a tsconfig.json as cypressConfig.env.tsConfig'
-    );
-  }
-
-  return async (file) => {
-    const webpackOptions = customizeWebpackConfig
-      ? customizeWebpackConfig(getWebpackConfig(config))
-      : getWebpackConfig(config);
-    return wp({ webpackOptions })(file);
-  };
-}
-
-export function getWebpackConfig(config: any) {
-  const extensions = ['.ts', '.tsx', '.mjs', '.js', '.jsx'];
-  return {
-    resolve: {
-      extensions,
-      plugins: [
-        new TsconfigPathsPlugin({
-          configFile: config.env.tsConfig,
-          extensions,
-        }),
-      ],
-    },
-    module: {
-      rules: [
-        {
-          test: /\.([jt])sx?$/,
-          loader: require.resolve('ts-loader'),
-          exclude: [/node_modules/],
-          options: {
-            configFile: config.env.tsConfig,
-            // https://github.com/TypeStrong/ts-loader/pull/685
-            experimentalWatchApi: true,
-            transpileOnly: true,
-          },
-        },
-      ],
-    },
-    plugins: [
-      new ForkTsCheckerWebpackPlugin({
-        typescript: {
-          configFile: config.env.tsConfig,
-        },
-      }),
-    ],
-    externals: [nodeExternals()],
-  };
 }

packages/cypress/src/utils/versions.ts

@@ -2,6 +2,8 @@ export const nxVersion = require('../../package.json').version;
 export const eslintPluginCypressVersion = '^2.10.3';
 export const typesNodeVersion = '16.11.7';
 export const cypressVersion = '^11.0.0';
+export const cypressViteDevServerVersion = '^2.2.1';
 export const cypressWebpackVersion = '^2.0.0';
 export const webpackHttpPluginVersion = '^5.5.0';
 export const viteVersion = '^4.0.1';
+export const htmlWebpackPluginVersion = '^5.5.0';