feat(testing): cypress using vite

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 builder to use.",
+            "type": "string",
+            "enum": ["vite", "webpack", "none"],
+            "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,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/cypress/plugins/cypress-preset.ts

@@ -2,6 +2,9 @@ import { workspaceRoot } from '@nrwl/devkit';
 import { dirname, join, relative } from 'path';
 import { lstatSync } from 'fs';
 
+import path = require('path');
+import vitePreprocessor from '../src/plugins/preprocessor-vite';
+
 interface BaseCypressPreset {
   videosFolder: string;
   screenshotsFolder: string;
@@ -58,12 +61,35 @@ 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?: { vite: { viteConfigPath: string } }
+) {
+  const baseConfig = {
     ...nxBaseCypressPreset(pathToConfig),
     fileServerFolder: '.',
     supportFile: 'src/support/e2e.ts',
     specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
     fixturesFolder: 'src/fixtures',
   };
+
+  /**
+   * - Not necessary to have the path to vite config
+   * - vite.config if it exists it can be cypress-project specific
+   * - generate without path to vite-config, add in docs how user can provide it
+   * - add in the docs how to set up custom/more setupNodeEvents
+   */
+
+  if (options.vite?.viteConfigPath) {
+    return {
+      ...baseConfig,
+      setupNodeEvents(on) {
+        on(
+          'file:preprocessor',
+          vitePreprocessor(`${options.vite?.viteConfigPath}`)
+        );
+      },
+    };
+  }
+  return baseConfig;
 }

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

@@ -16,7 +16,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';
@@ -49,6 +48,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.replace(`-e2e`, ``),
+    options.projectRoot
+  );
+
   generateFiles(
     tree,
     join(__dirname, './files', cypressFiles),
@@ -63,6 +72,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,11 @@ import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
 
 export default defineConfig({
-  e2e: nxE2EPreset(__dirname)
-});
+  e2e: nxE2EPreset(__dirname<% if (bundler === 'vite'){ %>, 
+  {
+    vite: {
+      viteConfigPath: '<%= cypressProjectSpecificViteConfigPath %>'
+    }
+  }
+  <% } %>)
+});

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 builder to use.",
+      "type": "string",
+      "enum": ["vite", "webpack", "none"],
+      "x-prompt": "Which Cypress builder do you want to use?",
+      "default": "webpack"
     }
   },
   "required": ["name"],

packages/cypress/src/plugins/preprocessor-vite.ts

@@ -0,0 +1,89 @@
+// copied from https://github.com/mammadataei/cypress-vite
+
+import * as path from 'path';
+import { build, InlineConfig } from 'vite';
+import type { RollupOutput, RollupWatcher, WatcherOptions } from 'rollup';
+
+type CypressPreprocessor = (
+  file: Record<string, any>
+) => string | Promise<string>;
+
+/**
+ * Cypress preprocessor for running e2e tests using vite.
+ *
+ * @param {string} userConfigPath
+ * @example
+ * setupNodeEvents(on) {
+ *   on(
+ *     'file:preprocessor',
+ *     vitePreprocessor(path.resolve(__dirname, './vite.config.ts')),
+ *   )
+ * },
+ */
+function vitePreprocessor(userConfigPath?: string): CypressPreprocessor {
+  return async (file) => {
+    const { outputPath, filePath, shouldWatch } = file;
+
+    const fileName = path.basename(outputPath);
+    const filenameWithoutExtension = path.basename(
+      outputPath,
+      path.extname(outputPath)
+    );
+
+    const defaultConfig: InlineConfig = {
+      logLevel: 'silent',
+      define: {
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+      },
+      build: {
+        emptyOutDir: false,
+        minify: false,
+        outDir: path.dirname(outputPath),
+        sourcemap: true,
+        write: true,
+        watch: getWatcherConfig(shouldWatch),
+        lib: {
+          entry: filePath,
+          fileName: () => fileName,
+          formats: ['umd'],
+          name: filenameWithoutExtension,
+        },
+      },
+    };
+
+    const watcher = await build({
+      configFile: userConfigPath,
+      ...defaultConfig,
+    });
+
+    if (shouldWatch && isWatcher(watcher)) {
+      watcher.on('event', (event) => {
+        if (event.code === 'END') {
+          file.emit('rerun');
+        }
+
+        if (event.code === 'ERROR') {
+          console.error(event);
+        }
+      });
+
+      file.on('close', () => {
+        watcher.close();
+      });
+    }
+
+    return outputPath;
+  };
+}
+
+function getWatcherConfig(shouldWatch: boolean): WatcherOptions | null {
+  return shouldWatch ? {} : null;
+}
+
+type BuildResult = RollupWatcher | RollupOutput | RollupOutput[];
+
+function isWatcher(watcher: BuildResult): watcher is RollupWatcher {
+  return (watcher as RollupWatcher).on !== undefined;
+}
+
+export default vitePreprocessor;

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

@@ -67,7 +67,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/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
@@ -475,3 +477,25 @@ ${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,
+      tree
+    );
+  } else if (projectRoot) {
+    return normalizeConfigFilePath(undefined, workspaceRoot, projectRoot, tree);
+  }
+  return undefined;
+}

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

@@ -4,6 +4,7 @@ import {
   logger,
   parseTargetString,
   readTargetOptions,
+  Tree,
 } from '@nrwl/devkit';
 import { existsSync } from 'fs';
 import { join, relative } from 'path';
@@ -44,17 +45,28 @@ export async function getBuildAndSharedConfig(
   } as InlineConfig);
 }
 
+// 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
 export function normalizeConfigFilePath(
   configFile: string,
   workspaceRoot: string,
-  projectRoot: string
+  projectRoot: string,
+  tree?: Tree
 ): string {
+  const customViteFilePath = joinPathFragments(
+    `${workspaceRoot}/${configFile}`
+  );
+  const jsViteFilePath = joinPathFragments(`${projectRoot}/vite.config.js`);
+  const tsViteFilePath = joinPathFragments(`${projectRoot}/vite.config.ts`);
+
   return configFile
-    ? joinPathFragments(`${workspaceRoot}/${configFile}`)
-    : existsSync(joinPathFragments(`${projectRoot}/vite.config.ts`))
-    ? joinPathFragments(`${projectRoot}/vite.config.ts`)
-    : existsSync(joinPathFragments(`${projectRoot}/vite.config.js`))
-    ? joinPathFragments(`${projectRoot}/vite.config.js`)
+    ? customViteFilePath
+    : tree?.exists(tsViteFilePath) || existsSync(tsViteFilePath)
+    ? tsViteFilePath
+    : tree?.exists(jsViteFilePath) || existsSync(jsViteFilePath)
+    ? jsViteFilePath
     : undefined;
 }