feat(testing): cypress using vite

docs/generated/packages/cypress.json

@@ -117,6 +117,13 @@
             "type": "boolean",
             "default": false,
             "hidden": true
+          },
+          "bundler": {
+            "description": "The Cypress builder to use.",
+            "type": "string",
+            "enum": ["vite", "webpack"],
+            "x-prompt": "Which Cypress builder do you want to use?",
+            "default": "webpack"
           }
         },
         "required": ["name"],

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,6 +197,7 @@
           },
           "bundler": {
             "description": "The Storybook builder to use.",
+            "type": "string",
             "enum": ["vite", "webpack"],
             "x-prompt": "Which Storybook builder do you want to use?",
             "default": "webpack"

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

@@ -16,6 +16,7 @@ import {
   toJS,
   Tree,
   updateJson,
+  workspaceRoot,
 } from '@nrwl/devkit';
 import { Linter, lintProjectGenerator } from '@nrwl/linter';
 import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';
@@ -36,6 +37,8 @@ import { cypressInitGenerator } from '../init/init';
 // app
 import { Schema } from './schema';
 
+import { getViteConfigFileFullPath, normalizeConfigFilePath } from '@nrwl/vite';
+
 export interface CypressProjectSchema extends Schema {
   projectName: string;
   projectRoot: string;
@@ -48,6 +51,16 @@ function createFiles(tree: Tree, options: CypressProjectSchema) {
   const cypressFiles =
     cypressVersion && cypressVersion < 10 ? 'v9-and-under' : 'v10-and-after';
 
+  // I understand that this may seem like an overkill,
+  // but since we're giving the user the option to set their own vite config
+  // file, we need to make sure that we're referencing the correct file.
+  // We cannot assume the file name
+  const projectViteConfigFile = getViteConfigFileFullPath(
+    tree,
+    options.projectName,
+    options.projectRoot
+  );
+
   generateFiles(
     tree,
     join(__dirname, './files', cypressFiles),
@@ -62,6 +75,8 @@ function createFiles(tree: Tree, options: CypressProjectSchema) {
         tree,
         options.projectRoot
       ),
+      bundler: options.bundler,
+      projectViteConfigFile: projectViteConfigFile,
     }
   );
 

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

@@ -2,5 +2,18 @@ import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
 
 export default defineConfig({
+  <% if (bundler !== 'vite'){ %>
   e2e: nxE2EPreset(__dirname)
-});
+  <% } %>
+  <% if (bundler === 'vite'){ %>
+  e2e: {
+    ...nxE2EPreset(__dirname),
+    setupNodeEvents(on) {
+      on(
+        'file:preprocessor',
+        vitePreprocessor(path.resolve(__dirname, '<%= offsetFromRoot %><%= projectViteConfigFile %>'))
+      );
+    },
+  }
+  <% } %>
+});

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';
 }

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

@@ -65,6 +65,13 @@
       "type": "boolean",
       "default": false,
       "hidden": true
+    },
+    "bundler": {
+      "description": "The Cypress builder to use.",
+      "type": "string",
+      "enum": ["vite", "webpack"],
+      "x-prompt": "Which Cypress builder do you want to use?",
+      "default": "webpack"
     }
   },
   "required": ["name"],

packages/storybook/src/generators/configuration/schema.json

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

packages/storybook/src/generators/init/schema.json

@@ -22,6 +22,7 @@
     },
     "bundler": {
       "description": "The bundler to use.",
+      "type": "string",
       "enum": ["vite", "webpack"],
       "x-prompt": "Which bundler do you want to use?",
       "default": "webpack"

packages/vite/index.ts

@@ -1,3 +1,5 @@
 export * from './src/utils/versions';
+export * from './src/utils/generator-utils';
+export * from './src/utils/options-utils';
 export { viteConfigurationGenerator } from './src/generators/configuration/configuration';
 export { vitestGenerator } from './src/generators/vitest/vitest-generator';

packages/vite/src/utils/generator-utils.ts

@@ -7,12 +7,14 @@ import {
   TargetConfiguration,
   Tree,
   updateProjectConfiguration,
+  workspaceRoot,
   writeJson,
 } from '@nrwl/devkit';
 import { ViteBuildExecutorOptions } from '../executors/build/schema';
 import { ViteDevServerExecutorOptions } from '../executors/dev-server/schema';
 import { VitestExecutorOptions } from '../executors/test/schema';
 import { Schema } from '../generators/configuration/schema';
+import { normalizeConfigFilePath } from './options-utils';
 
 /**
  * This function is used to find the build and serve targets for
@@ -459,3 +461,24 @@ ${options.includeVitest ? '/// <reference types="vitest" />' : ''}
 
   tree.write(viteConfigPath, viteConfigContent);
 }
+
+export function getViteConfigFileFullPath(
+  tree: Tree,
+  projectName?: string,
+  projectRoot?: string
+): string | undefined {
+  if (projectName) {
+    const projectConfig = readProjectConfiguration(tree, projectName);
+    const serveTarget = findExistingTargets(projectConfig.targets).serveTarget;
+    const projectViteConfigFileName =
+      projectConfig.targets[serveTarget].options.configFile;
+    return normalizeConfigFilePath(
+      projectViteConfigFileName,
+      workspaceRoot,
+      projectConfig.root
+    );
+  } else if (projectRoot) {
+    return normalizeConfigFilePath(undefined, workspaceRoot, projectRoot);
+  }
+  return undefined;
+}