feat(vite): cypress vite generators

docs/generated/packages/cypress.json

@@ -111,6 +111,19 @@
             "type": "boolean",
             "default": false,
             "description": "Do not add dependencies to `package.json`."
+          },
+          "rootProject": {
+            "description": "Create a application at the root of the workspace",
+            "type": "boolean",
+            "default": false,
+            "hidden": true
+          },
+          "bundler": {
+            "description": "The Cypress bundler to use.",
+            "type": "string",
+            "enum": ["vite", "webpack", "none"],
+            "x-prompt": "Which Cypress bundler do you want to use?",
+            "default": "webpack"
           }
         },
         "required": ["name"],

docs/generated/packages/react.json

@@ -1331,6 +1331,12 @@
             "type": "boolean",
             "description": "Skip formatting files",
             "default": false
+          },
+          "bundler": {
+            "description": "The bundler to use for Cypress Component Testing.",
+            "type": "string",
+            "enum": ["vite", "webpack"],
+            "hidden": true
           }
         },
         "required": ["project"],

docs/generated/packages/storybook.json

@@ -114,6 +114,7 @@
           },
           "bundler": {
             "description": "The bundler to use.",
+            "type": "string",
             "enum": ["vite", "webpack"],
             "x-prompt": "Which bundler do you want to use?",
             "default": "webpack"
@@ -196,7 +197,10 @@
           },
           "bundler": {
             "description": "The Storybook builder to use.",
-            "enum": ["vite", "webpack"]
+            "type": "string",
+            "enum": ["vite", "webpack"],
+            "x-prompt": "Which Storybook builder do you want to use?",
+            "default": "webpack"
           }
         },
         "required": ["name"],

packages/angular/src/generators/ng-add/migrators/projects/__snapshots__/e2e.migrator.spec.ts.snap

@@ -13,6 +13,15 @@ export default defineConfig({
 });"
 `;
 
+exports[`e2e migrator cypress with project root at "" cypress version >=10 should create a cypress.config.ts file when it does not exist 1`] = `
+"import { defineConfig } from 'cypress';
+import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
+
+export default defineConfig({
+  e2e: nxE2EPreset(__dirname)
+});"
+`;
+
 exports[`e2e migrator cypress with project root at "" cypress version >=10 should keep paths in the e2e config when they differ from the nx preset defaults 1`] = `
 "import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
@@ -41,11 +50,11 @@ exports[`e2e migrator cypress with project root at "" cypress version >=10 shoul
 "import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
 
-export default defineConfig({
-  e2e: {...nxE2EPreset(__dirname),
-    baseUrl: 'http://localhost:4200'
-  },
-});"
+            export default defineConfig({
+              e2e: {...nxE2EPreset(__dirname),
+                baseUrl: 'http://localhost:4200'
+              },
+            });"
 `;
 
 exports[`e2e migrator cypress with project root at "" cypress version >=10 should update paths in the config 1`] = `
@@ -79,6 +88,15 @@ export default defineConfig({
 });"
 `;
 
+exports[`e2e migrator cypress with project root at "projects/app1" cypress version >=10 should create a cypress.config.ts file when it does not exist 1`] = `
+"import { defineConfig } from 'cypress';
+import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
+
+export default defineConfig({
+  e2e: nxE2EPreset(__dirname)
+});"
+`;
+
 exports[`e2e migrator cypress with project root at "projects/app1" cypress version >=10 should keep paths in the e2e config when they differ from the nx preset defaults 1`] = `
 "import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
@@ -107,11 +125,11 @@ exports[`e2e migrator cypress with project root at "projects/app1" cypress versi
 "import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
 
-export default defineConfig({
-  e2e: {...nxE2EPreset(__dirname),
-    baseUrl: 'http://localhost:4200'
-  },
-});"
+            export default defineConfig({
+              e2e: {...nxE2EPreset(__dirname),
+                baseUrl: 'http://localhost:4200'
+              },
+            });"
 `;
 
 exports[`e2e migrator cypress with project root at "projects/app1" cypress version >=10 should update paths in the config 1`] = `

packages/angular/src/generators/ng-add/migrators/projects/e2e.migrator.spec.ts

@@ -840,13 +840,8 @@ describe('e2e migrator', () => {
             'apps/app1-e2e/cypress.config.ts',
             'utf-8'
           );
-          expect(cypressConfig).toBe(`import { defineConfig } from 'cypress';
-import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
 
-export default defineConfig({
-  e2e: nxE2EPreset(__dirname)
-});
-`);
+          expect(cypressConfig).toMatchSnapshot();
         });
 
         it('should update e2e config with the nx preset', async () => {
@@ -856,11 +851,11 @@ export default defineConfig({
             joinPathFragments(root, 'cypress.config.ts'),
             `import { defineConfig } from 'cypress';
 
-export default defineConfig({
-  e2e: {
-    baseUrl: 'http://localhost:4200'
-  },
-});`
+            export default defineConfig({
+              e2e: {
+                baseUrl: 'http://localhost:4200'
+              },
+            });`
           );
           const project = addProject('app1', {
             root,

packages/cypress/package.json

@@ -49,6 +49,7 @@
     "ts-loader": "^9.3.1",
     "tsconfig-paths-webpack-plugin": "3.5.2",
     "tslib": "^2.3.0",
+    "vite": "^3.2.3",
     "webpack": "^4 || ^5",
     "webpack-node-externals": "^3.0.0"
   },

packages/cypress/plugins/cypress-preset.ts

@@ -2,6 +2,8 @@ import { workspaceRoot } from '@nrwl/devkit';
 import { dirname, join, relative } from 'path';
 import { lstatSync } from 'fs';
 
+import vitePreprocessor from '../src/plugins/preprocessor-vite';
+
 interface BaseCypressPreset {
   videosFolder: string;
   screenshotsFolder: string;
@@ -15,8 +17,10 @@ export interface NxComponentTestingOptions {
    * this is only when customized away from the default value of `component-test`
    * @example 'component-test'
    */
-  ctTargetName: string;
+  ctTargetName?: string;
+  bundler?: 'vite' | 'webpack';
 }
+
 export function nxBaseCypressPreset(pathToConfig: string): BaseCypressPreset {
   // prevent from placing path outside the root of the workspace
   // if they pass in a file or directory
@@ -58,12 +62,25 @@ export function nxBaseCypressPreset(pathToConfig: string): BaseCypressPreset {
  *
  * @param pathToConfig will be used to construct the output paths for videos and screenshots
  */
-export function nxE2EPreset(pathToConfig: string) {
-  return {
+export function nxE2EPreset(
+  pathToConfig: string,
+  options?: { bundler?: string }
+) {
+  const baseConfig = {
     ...nxBaseCypressPreset(pathToConfig),
     fileServerFolder: '.',
     supportFile: 'src/support/e2e.ts',
     specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
     fixturesFolder: 'src/fixtures',
   };
+
+  if (options?.bundler === 'vite') {
+    return {
+      ...baseConfig,
+      setupNodeEvents(on) {
+        on('file:preprocessor', vitePreprocessor());
+      },
+    };
+  }
+  return baseConfig;
 }

packages/cypress/src/generators/cypress-project/__snapshots__/cypress-project.spec.ts.snap

@@ -193,14 +193,26 @@ Object {
 }
 `;
 
+exports[`Cypress Project > v10 for bundler:vite should pass the bundler info to nxE2EPreset in \`cypress.config.ts\` 1`] = `
+"import { defineConfig } from 'cypress';
+import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
+
+export default defineConfig({
+  e2e: nxE2EPreset(__dirname, 
+  {
+    bundler: 'vite'
+  }
+  )
+});"
+`;
+
 exports[`Cypress Project > v10 nested should set right path names in \`cypress.config.ts\` 1`] = `
 "import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
 
 export default defineConfig({
   e2e: nxE2EPreset(__dirname)
-});
-"
+});"
 `;
 
 exports[`Cypress Project > v10 nested should set right path names in \`tsconfig.e2e.json\` 1`] = `
@@ -243,8 +255,7 @@ import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
 
 export default defineConfig({
   e2e: nxE2EPreset(__dirname)
-});
-"
+});"
 `;
 
 exports[`Cypress Project > v10 should set right path names in \`tsconfig.e2e.json\` 1`] = `

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

@@ -189,6 +189,22 @@ describe('Cypress Project', () => {
       expect(tsConfig.extends).toBe('../../tsconfig.json');
     });
 
+    describe('for bundler:vite', () => {
+      it('should pass the bundler info to nxE2EPreset in `cypress.config.ts`', async () => {
+        await cypressProjectGenerator(tree, {
+          ...defaultOptions,
+          name: 'my-app-e2e',
+          project: 'my-app',
+          bundler: 'vite',
+        });
+        const cypressConfig = tree.read(
+          'apps/my-app-e2e/cypress.config.ts',
+          'utf-8'
+        );
+        expect(cypressConfig).toMatchSnapshot();
+      });
+    });
+
     describe('nested', () => {
       it('should set right path names in `cypress.config.ts`', async () => {
         await cypressProjectGenerator(tree, {

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

@@ -5,6 +5,7 @@ import {
   extractLayoutDirectory,
   formatFiles,
   generateFiles,
+  getProjects,
   getWorkspaceLayout,
   joinPathFragments,
   logger,
@@ -16,7 +17,6 @@ import {
   toJS,
   Tree,
   updateJson,
-  getProjects,
 } from '@nrwl/devkit';
 import { Linter, lintProjectGenerator } from '@nrwl/linter';
 import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';
@@ -32,6 +32,7 @@ import { filePathPrefix } from '../../utils/project-name';
 import {
   cypressVersion,
   eslintPluginCypressVersion,
+  viteVersion,
 } from '../../utils/versions';
 import { cypressInitGenerator } from '../init/init';
 // app
@@ -63,6 +64,7 @@ function createFiles(tree: Tree, options: CypressProjectSchema) {
         tree,
         options.projectRoot
       ),
+      bundler: options.bundler,
     }
   );
 
@@ -271,6 +273,19 @@ export async function cypressProjectGenerator(host: Tree, schema: Schema) {
   if (!cypressVersion) {
     tasks.push(cypressInitGenerator(host, options));
   }
+
+  if (schema.bundler === 'vite') {
+    tasks.push(
+      addDependenciesToPackageJson(
+        host,
+        {},
+        {
+          vite: viteVersion,
+        }
+      )
+    );
+  }
+
   createFiles(host, options);
   addProject(host, options);
   const installTask = await addLinter(host, options);

packages/cypress/src/generators/cypress-project/files/v10-and-after/cypress.config.ts__tmpl__

@@ -2,5 +2,9 @@ import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
 
 export default defineConfig({
-  e2e: nxE2EPreset(__dirname)
-});
+  e2e: nxE2EPreset(__dirname<% if (bundler === 'vite'){ %>, 
+  {
+    bundler: 'vite'
+  }
+  <% } %>)
+});

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

@@ -12,4 +12,5 @@ export interface Schema {
   standaloneConfig?: boolean;
   skipPackageJson?: boolean;
   rootProject?: boolean;
+  bundler?: 'webpack' | 'vite' | 'none';
 }

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

@@ -59,6 +59,19 @@
       "type": "boolean",
       "default": false,
       "description": "Do not add dependencies to `package.json`."
+    },
+    "rootProject": {
+      "description": "Create a application at the root of the workspace",
+      "type": "boolean",
+      "default": false,
+      "hidden": true
+    },
+    "bundler": {
+      "description": "The Cypress bundler to use.",
+      "type": "string",
+      "enum": ["vite", "webpack", "none"],
+      "x-prompt": "Which Cypress bundler do you want to use?",
+      "default": "webpack"
     }
   },
   "required": ["name"],