feat(testing): add support for additional environment options when generating vite config (#17560)

docs/generated/packages/js/generators/library.json

@@ -56,8 +56,8 @@
       "testEnvironment": {
         "type": "string",
         "enum": ["jsdom", "node"],
-        "description": "The test environment to use if unitTestRunner is set to jest.",
+        "description": "The test environment to use if unitTestRunner is set to jest or vitest.",
-        "default": "jsdom"
+        "default": "node"
       },
       "pascalCaseFiles": {
         "type": "boolean",

docs/generated/packages/vite/generators/init.json

@@ -25,6 +25,12 @@
         "type": "boolean",
         "description": "Add dependencies needed to build libraries.",
         "default": false
+      },
+      "testEnvironment": {
+        "description": "The vitest environment to use. See https://vitest.dev/config/#environment.",
+        "type": "string",
+        "enum": ["node", "jsdom", "happy-dom", "edge-runtime"],
+        "default": "jsdom"
       }
     },
     "examplesFile": "---\ntitle: Examples for the Vite init generator\ndescription: This page contains examples for the Vite @nx/vite:init generator, which helps you initialize vite in your Nx workspace, by installing the necessary dependencies.\n---\n\nThis is a generator will initialize Vite.js in your workspace. It will install all the necessary dependencies. You can read more about how this generator works, in the [Vite package overview page](/packages/vite).\n\n{% callout type=\"note\" title=\"string\" %}\nYou don't need to use this generator on its own.\n{% /callout %}\n\nThis generator will be called automatically when you are either converting an existing React or Web app to use Vite, using the [`@nx/vite:configuration` generator](/packages/vite/generators/configuration), or when you are creating a new React or Web app using the [`@nx/react:app`](/packages/react/generators/application) or [`@nx/web:app`](/packages/web/generators/application) generators, if you choose `vite` as the `bundler`.\n\nIf you need to for some reason, you can use it on its own like this:\n\n```bash\nnx g @nx/vite:init\n```\n\n## Examples\n\n### Install all the necessary dependencies for Vite and the React plugin\n\n```bash\nnx g @nx/vite:init --uiFramework=react\n```\n\n### Install all the necessary dependencies for Vite\n\n```bash\nnx g @nx/vite:init --uiFramework=none\n```\n",

docs/generated/packages/vite/generators/vitest.json

@@ -46,6 +46,11 @@
         "type": "boolean",
         "default": false,
         "x-priority": "internal"
+      },
+      "testEnvironment": {
+        "description": "The vitest environment to use. See https://vitest.dev/config/#environment.",
+        "type": "string",
+        "enum": ["node", "jsdom", "happy-dom", "edge-runtime"]
       }
     },
     "required": ["project"],

e2e/jest/src/jest.test.ts

@@ -24,8 +24,12 @@ describe('Jest', () => {
     const testGlobal = `'My Test Global'`;
     const mylib = uniq('mylib');
     const utilLib = uniq('util-lib');
-    runCLI(`generate @nx/js:lib ${mylib} --unit-test-runner jest`);
+    runCLI(
-    runCLI(`generate @nx/js:lib ${utilLib} --importPath=@global-fun/globals`);
+      `generate @nx/js:lib ${mylib} --unitTestRunner=jest --no-interactive`
+    );
+    runCLI(
+      `generate @nx/js:lib ${utilLib} --importPath=@global-fun/globals --unitTestRunner=jest --no-interactive`
+    );
     updateFile(
       `libs/${utilLib}/src/index.ts`,
       stripIndents`
@@ -74,6 +78,7 @@ describe('Jest', () => {
       `libs/${mylib}/jest.config.ts`,
       stripIndents`
         export default {
+          testEnvironment: 'node',
           displayName: "${mylib}",
           preset: "../../jest.preset.js",
           transform: {
@@ -87,7 +92,9 @@ describe('Jest', () => {
         };`
     );
 
-    const appResult = await runCLIAsync(`test ${mylib} --no-watch`);
+    const appResult = await runCLIAsync(`test ${mylib} --no-watch`, {
+      silenceError: true,
+    });
     expect(appResult.combinedOutput).toContain(
       'Test Suites: 1 passed, 1 total'
     );

packages/js/src/generators/library/library.ts

@@ -88,6 +88,7 @@ export async function projectGenerator(
       includeVitest: options.unitTestRunner === 'vitest',
       includeLib: true,
       skipFormat: true,
+      testEnvironment: options.testEnvironment,
     });
     tasks.push(viteTask);
   }
@@ -112,6 +113,7 @@ export async function projectGenerator(
       uiFramework: 'none',
       coverageProvider: 'c8',
       skipFormat: true,
+      testEnvironment: options.testEnvironment,
     });
     tasks.push(vitestTask);
   }

packages/js/src/generators/library/schema.json

@@ -56,8 +56,8 @@
     "testEnvironment": {
       "type": "string",
       "enum": ["jsdom", "node"],
-      "description": "The test environment to use if unitTestRunner is set to jest.",
+      "description": "The test environment to use if unitTestRunner is set to jest or vitest.",
-      "default": "jsdom"
+      "default": "node"
     },
     "pascalCaseFiles": {
       "type": "boolean",

packages/react/src/generators/library/library.ts

@@ -74,6 +74,7 @@ export async function libraryGenerator(host: Tree, schema: Schema) {
       includeVitest: options.unitTestRunner === 'vitest',
       compiler: options.compiler,
       skipFormat: true,
+      testEnvironment: 'jsdom',
     });
     tasks.push(viteTask);
   } else if (options.buildable && options.bundler === 'rollup') {
@@ -122,6 +123,7 @@ export async function libraryGenerator(host: Tree, schema: Schema) {
       coverageProvider: 'c8',
       inSourceTests: options.inSourceTests,
       skipFormat: true,
+      testEnvironment: 'jsdom',
     });
     tasks.push(vitestTask);
   }

packages/vite/src/generators/configuration/configuration.spec.ts

@@ -37,6 +37,7 @@ describe('@nx/vite:configuration', () => {
         project: 'my-test-react-app',
       });
     });
+
     it('should add vite packages and react-related dependencies for vite', async () => {
       const packageJson = readJson(tree, '/package.json');
       expect(packageJson.devDependencies).toMatchObject({

packages/vite/src/generators/configuration/configuration.ts

@@ -42,6 +42,10 @@ export async function viteConfigurationGenerator(
 
   schema.includeLib ??= projectType === 'library';
 
+  // Setting default to jsdom since it is the most common use case (React, Web).
+  // The @nx/js:lib generator specifically sets this to node to be more generic.
+  schema.testEnvironment ??= 'jsdom';
+
   /**
    * This is for when we are converting an existing project
    * to use the vite executors.
@@ -153,6 +157,7 @@ export async function viteConfigurationGenerator(
     uiFramework: schema.uiFramework,
     includeLib: schema.includeLib,
     compiler: schema.compiler,
+    testEnvironment: schema.testEnvironment,
   });
   tasks.push(initTask);
 

packages/vite/src/generators/configuration/schema.d.ts

@@ -10,4 +10,5 @@ export interface ViteConfigurationGeneratorSchema {
   serveTarget?: string;
   testTarget?: string;
   skipFormat?: boolean;
+  testEnvironment?: 'node' | 'jsdom' | 'happy-dom' | 'edge-runtime' | string;
 }

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

@@ -50,7 +50,7 @@
     },
     "serveTarget": {
       "type": "string",
-      "description": "The serve target of the project to be transformed to use the @nx/vite:dev-server and @nrwl/vite:preview-server executors."
+      "description": "The serve target of the project to be transformed to use the @nx/vite:dev-server and @nx/vite:preview-server executors."
     },
     "testTarget": {
       "type": "string",
@@ -61,6 +61,12 @@
       "type": "boolean",
       "default": false,
       "x-priority": "internal"
+    },
+    "testEnvironment": {
+      "description": "The vitest environment to use. See https://vitest.dev/config/#environment.",
+      "type": "string",
+      "enum": ["node", "jsdom", "happy-dom", "edge-runtime"],
+      "default": "jsdom"
     }
   },
   "examplesFile": "../../../docs/configuration-examples.md"

packages/vite/src/generators/init/__snapshots__/init.spec.ts.snap

@@ -11,6 +11,62 @@ exports[`@nx/vite:init dependencies for package.json should add vite packages an
     "@vitejs/plugin-react": "^4.0.0",
     "@vitest/ui": "^0.32.0",
     "existing": "1.0.0",
+    "prettier": "^2.6.2",
+    "typescript": "~5.0.2",
+    "vite": "^4.3.4",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-tsconfig-paths": "^4.2.0",
+    "vitest": "^0.32.0",
+  },
+  "name": "test-name",
+}
+`;
+
+exports[`@nx/vite:init dependencies for package.json should support --testEnvironment=edge-runtime 1`] = `
+{
+  "dependencies": {},
+  "devDependencies": {
+    "@edge-runtime/vm": "~3.0.2",
+    "@nx/js": "0.0.1",
+    "@nx/vite": "0.0.1",
+    "@vitest/ui": "^0.32.0",
+    "prettier": "^2.6.2",
+    "typescript": "~5.0.2",
+    "vite": "^4.3.4",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-tsconfig-paths": "^4.2.0",
+    "vitest": "^0.32.0",
+  },
+  "name": "test-name",
+}
+`;
+
+exports[`@nx/vite:init dependencies for package.json should support --testEnvironment=happy-dom 1`] = `
+{
+  "dependencies": {},
+  "devDependencies": {
+    "@nx/js": "0.0.1",
+    "@nx/vite": "0.0.1",
+    "@vitest/ui": "^0.32.0",
+    "happy-dom": "~9.20.3",
+    "prettier": "^2.6.2",
+    "typescript": "~5.0.2",
+    "vite": "^4.3.4",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-tsconfig-paths": "^4.2.0",
+    "vitest": "^0.32.0",
+  },
+  "name": "test-name",
+}
+`;
+
+exports[`@nx/vite:init dependencies for package.json should support --testEnvironment=jsdom 1`] = `
+{
+  "dependencies": {},
+  "devDependencies": {
+    "@nx/js": "0.0.1",
+    "@nx/vite": "0.0.1",
+    "@vitest/ui": "^0.32.0",
     "jsdom": "~22.1.0",
     "prettier": "^2.6.2",
     "typescript": "~5.0.2",

packages/vite/src/generators/init/init.spec.ts

@@ -33,6 +33,39 @@ describe('@nx/vite:init', () => {
 
       expect(packageJson).toMatchSnapshot();
     });
+
+    it('should support --testEnvironment=jsdom', async () => {
+      await initGenerator(tree, {
+        testEnvironment: 'jsdom',
+        uiFramework: 'none',
+      });
+
+      const packageJson = readJson(tree, 'package.json');
+
+      expect(packageJson).toMatchSnapshot();
+    });
+
+    it('should support --testEnvironment=happy-dom', async () => {
+      await initGenerator(tree, {
+        testEnvironment: 'happy-dom',
+        uiFramework: 'none',
+      });
+
+      const packageJson = readJson(tree, 'package.json');
+
+      expect(packageJson).toMatchSnapshot();
+    });
+
+    it('should support --testEnvironment=edge-runtime', async () => {
+      await initGenerator(tree, {
+        testEnvironment: 'edge-runtime',
+        uiFramework: 'none',
+      });
+
+      const packageJson = readJson(tree, 'package.json');
+
+      expect(packageJson).toMatchSnapshot();
+    });
   });
 
   describe('vitest targets', () => {

packages/vite/src/generators/init/init.ts

@@ -1,6 +1,7 @@
 import {
   addDependenciesToPackageJson,
   convertNxGenerator,
+  logger,
   readJson,
   readNxJson,
   runTasksInSerial,
@@ -22,6 +23,8 @@ import {
   vitestVersion,
   viteTsConfigPathsVersion,
   viteVersion,
+  happyDomVersion,
+  edgeRuntimeVmVersion,
 } from '../../utils/versions';
 import { InitGeneratorSchema } from './schema';
 
@@ -39,7 +42,18 @@ function checkDependenciesInstalled(host: Tree, schema: InitGeneratorSchema) {
   devDependencies['vite-tsconfig-paths'] = viteTsConfigPathsVersion;
   devDependencies['vitest'] = vitestVersion;
   devDependencies['@vitest/ui'] = vitestUiVersion;
-  devDependencies['jsdom'] = jsdomVersion;
+
+  if (schema.testEnvironment === 'jsdom') {
+    devDependencies['jsdom'] = jsdomVersion;
+  } else if (schema.testEnvironment === 'happy-dom') {
+    devDependencies['happy-dom'] = happyDomVersion;
+  } else if (schema.testEnvironment === 'edge-runtime') {
+    devDependencies['@edge-runtime/vm'] = edgeRuntimeVmVersion;
+  } else if (schema.testEnvironment !== 'node') {
+    logger.info(
+      `A custom environment was provided: ${schema.testEnvironment}. You need to install it manually.`
+    );
+  }
 
   if (schema.uiFramework === 'react') {
     if (schema.compiler === 'swc') {

packages/vite/src/generators/init/schema.d.ts

@@ -2,4 +2,5 @@ export interface InitGeneratorSchema {
   uiFramework: 'react' | 'none';
   compiler?: 'babel' | 'swc';
   includeLib?: boolean;
+  testEnvironment?: 'node' | 'jsdom' | 'happy-dom' | 'edge-runtime' | string;
 }

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

@@ -22,6 +22,12 @@
       "type": "boolean",
       "description": "Add dependencies needed to build libraries.",
       "default": false
+    },
+    "testEnvironment": {
+      "description": "The vitest environment to use. See https://vitest.dev/config/#environment.",
+      "type": "string",
+      "enum": ["node", "jsdom", "happy-dom", "edge-runtime"],
+      "default": "jsdom"
     }
   },
   "examplesFile": "../../../docs/init-examples.md"

packages/vite/src/generators/vitest/__snapshots__/vitest.spec.ts.snap

@@ -33,7 +33,7 @@ export default defineConfig({
     cache: {
       dir: '../../node_modules/.vitest',
     },
-    environment: 'jsdom',
+    environment: 'node',
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     includeSource: ['src/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
   },
@@ -71,7 +71,7 @@ export default defineConfig({
     cache: {
       dir: '../../node_modules/.vitest',
     },
-    environment: 'jsdom',
+    environment: 'node',
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
   },
 });
@@ -108,7 +108,7 @@ export default defineConfig({
     cache: {
       dir: '../../node_modules/.vitest',
     },
-    environment: 'jsdom',
+    environment: 'node',
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
   },
 });

packages/vite/src/generators/vitest/schema.d.ts

@@ -6,4 +6,5 @@ export interface VitestGeneratorSchema {
   skipViteConfig?: boolean;
   testTarget?: string;
   skipFormat?: boolean;
+  testEnvironment?: 'node' | 'jsdom' | 'happy-dom' | 'edge-runtime' | string;
 }

packages/vite/src/generators/vitest/schema.json

@@ -43,6 +43,11 @@
       "type": "boolean",
       "default": false,
       "x-priority": "internal"
+    },
+    "testEnvironment": {
+      "description": "The vitest environment to use. See https://vitest.dev/config/#environment.",
+      "type": "string",
+      "enum": ["node", "jsdom", "happy-dom", "edge-runtime"]
     }
   },
   "required": ["project"]

packages/vite/src/generators/vitest/vitest-generator.ts

@@ -45,6 +45,7 @@ export async function vitestGenerator(
 
   const initTask = await initGenerator(tree, {
     uiFramework: schema.uiFramework,
+    testEnvironment: schema.testEnvironment,
   });
   tasks.push(initTask);
 

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

@@ -538,7 +538,7 @@ export function createOrEditViteConfig(
     cache: {
       dir: '${offsetFromRoot(projectConfig.root)}node_modules/.vitest'
     },
-    environment: 'jsdom',
+    environment: '${options.testEnvironment ?? 'node'}',
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     ${
       options.inSourceTests

packages/vite/src/utils/versions.ts

@@ -10,6 +10,8 @@ export const vitePluginVueJsxVersion = '^2.1.1';
 export const viteTsConfigPathsVersion = '^4.2.0';
 export const jsdomVersion = '~22.1.0';
 export const vitePluginDtsVersion = '~2.3.0';
+export const happyDomVersion = '~9.20.3';
+export const edgeRuntimeVmVersion = '~3.0.2';
 
 // Coverage providers
 export const vitestCoverageC8Version = '^0.31.0';