feat(testing): cypress vite

nrwl · Nov 29, 2022 · 8b76a29 · 8b76a29
1 parent 19a6da3
commit 8b76a29
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 0 deletions.
diff --git a/docs/generated/packages/cypress.json b/docs/generated/packages/cypress.json
@@ -117,6 +117,12 @@
             "type": "boolean",
             "default": false,
             "hidden": true
+          },
+          "bundler": {
+            "description": "The Cypress builder to use.",
+            "enum": ["vite", "webpack"],
+            "x-prompt": "Which Cypress builder do you want to use?",
+            "default": "webpack"
           }
         },
         "required": ["name"],

diff --git a/packages/cypress/src/generators/cypress-project/cypress-project.ts b/packages/cypress/src/generators/cypress-project/cypress-project.ts
@@ -15,6 +15,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';
@@ -35,6 +36,8 @@ import { cypressInitGenerator } from '../init/init';
 // app
 import { Schema } from './schema';
 
+import { findExistingTargets, normalizeConfigFilePath } from '@nrwl/vite';
+
 export interface CypressProjectSchema extends Schema {
   projectName: string;
   projectRoot: string;
@@ -47,6 +50,25 @@ function createFiles(tree: Tree, options: CypressProjectSchema) {
   const cypressFiles =
     cypressVersion && cypressVersion < 10 ? 'v9-and-under' : 'v10-and-after';
 
+  // I know this is sort of messy, I'll fix it
+  // It's mostly for POC now
+  const projectConfig = readProjectConfiguration(tree, options.project);
+  const serveTarget = findExistingTargets(projectConfig.targets).serveTarget;
+  const projectViteConfigFileName =
+    projectConfig.targets[serveTarget].options.configFile;
+  const projectViteConfigFile = normalizeConfigFilePath(
+    projectViteConfigFileName,
+    workspaceRoot,
+    projectConfig.root
+  );
+  let uiFramework = '';
+  if (tree.exists(projectViteConfigFile)) {
+    const fileContent = tree.read(projectViteConfigFile, 'utf-8');
+    if (fileContent.includes('react()')) {
+      uiFramework = 'react';
+    }
+  }
+
   generateFiles(
     tree,
     join(__dirname, './files', cypressFiles),
@@ -61,6 +83,9 @@ function createFiles(tree: Tree, options: CypressProjectSchema) {
         tree,
         options.projectRoot
       ),
+      bundler: options.bundler,
+      projectViteConfigFile: projectViteConfigFile,
+      uiFramework,
     }
   );
 

diff --git a/...ages/cypress/src/generators/cypress-project/files/v10-and-after/cypress.config.ts__tmpl__ b/...ages/cypress/src/generators/cypress-project/files/v10-and-after/cypress.config.ts__tmpl__
@@ -2,5 +2,25 @@ 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 %>'))
+      );
+    },
+  },
+  component: {
+    devServer: {
+      framework: '<%= uiFramework %>',
+      bundler: 'vite',
+      viteConfig: require(path.resolve(__dirname, '<%= offsetFromRoot %><%= projectViteConfigFile %>')),
+    },
+  },
+  <% } %>
 });
diff --git a/packages/cypress/src/generators/cypress-project/schema.d.ts b/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';
 }
diff --git a/packages/cypress/src/generators/cypress-project/schema.json b/packages/cypress/src/generators/cypress-project/schema.json
@@ -65,6 +65,12 @@
       "type": "boolean",
       "default": false,
       "hidden": true
+    },
+    "bundler": {
+      "description": "The Cypress builder to use.",
+      "enum": ["vite", "webpack"],
+      "x-prompt": "Which Cypress builder do you want to use?",
+      "default": "webpack"
     }
   },
   "required": ["name"],

diff --git a/packages/vite/index.ts b/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';