feat(angular): add vitest option to angular (#27311)

- This adds `vitest` option to `unitTestRunner` for Angular generators.
- This **does not** add vitest option to `create-nx-workspace` but I
think we should provide this as an option in the future. Please let me
know if you wantme to add this here or as a future feature.

---------

Co-authored-by: Colum Ferry <[email protected]>

docs/generated/packages/angular/generators/application.json

@@ -96,8 +96,9 @@
       },
       "unitTestRunner": {
         "type": "string",
-        "enum": ["jest", "none"],
+        "enum": ["jest", "vitest", "none"],
         "description": "Test runner to use for unit tests.",
+        "x-prompt": "Which unit test runner would you like to use?",
         "default": "jest"
       },
       "e2eTestRunner": {

docs/generated/packages/angular/generators/federate-module.json

@@ -51,8 +51,9 @@
       },
       "unitTestRunner": {
         "type": "string",
-        "enum": ["jest", "none"],
+        "enum": ["jest", "vitest", "none"],
         "description": "Test runner to use for unit tests of the remote if it needs to be created.",
+        "x-prompt": "Which unit test runner would you like to use?",
         "default": "jest"
       },
       "e2eTestRunner": {

docs/generated/packages/angular/generators/host.json

@@ -105,8 +105,9 @@
       },
       "unitTestRunner": {
         "type": "string",
-        "enum": ["jest", "none"],
+        "enum": ["jest", "vitest", "none"],
         "description": "Test runner to use for unit tests.",
+        "x-prompt": "Which unit test runner would you like to use?",
         "default": "jest"
       },
       "e2eTestRunner": {

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

@@ -88,8 +88,9 @@
       },
       "unitTestRunner": {
         "type": "string",
-        "enum": ["jest", "none"],
+        "enum": ["jest", "vitest", "none"],
         "description": "Test runner to use for unit tests.",
+        "x-prompt": "Which unit test runner would you like to use?",
         "default": "jest"
       },
       "importPath": {

docs/generated/packages/angular/generators/remote.json

@@ -99,8 +99,9 @@
       },
       "unitTestRunner": {
         "type": "string",
-        "enum": ["jest", "none"],
+        "enum": ["jest", "vitest", "none"],
         "description": "Test runner to use for unit tests.",
+        "x-prompt": "Which unit test runner would you like to use?",
         "default": "jest"
       },
       "e2eTestRunner": {

e2e/angular/src/projects.test.ts

@@ -568,4 +568,21 @@ describe('Angular Projects', () => {
       runCLI(`server ${webpackApp} --output-hashing none`)
     ).toThrow();
   }, 500_000);
+
+  it('should generate apps and libs with vitest', async () => {
+    const app = uniq('app');
+    const lib = uniq('lib');
+
+    runCLI(
+      `generate @nx/angular:app ${app} --unit-test-runner=vitest --no-interactive`
+    );
+    runCLI(
+      `generate @nx/angular:lib ${lib} --unit-test-runner=vitest --no-interactive`
+    );
+
+    // Make sure we are using vitest
+    checkFilesExist(`${app}/vite.config.mts`, `${lib}/vite.config.mts`);
+
+    runCLI(`run-many --target test --projects=${app},${lib} --parallel`);
+  });
 });

packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap

@@ -427,6 +427,146 @@ exports[`app --strict should enable strict type checking: e2e tsconfig.json 1`]
 }
 `;
 
+exports[`app --unit-test-runner vitest should add tsconfig.spec.json 1`] = `
+"{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vitest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "files": ["src/test-setup.ts"]
+}
+"
+`;
+
+exports[`app --unit-test-runner vitest should generate src/test-setup.ts 1`] = `
+"import '@analogjs/vitest-angular/setup-zone';
+
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+import { getTestBed } from '@angular/core/testing';
+
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+"
+`;
+
+exports[`app --unit-test-runner vitest should generate vite.config.mts 1`] = `
+"/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import angular from '@analogjs/vite-plugin-angular';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../node_modules/.vite/my-app',
+  plugins: [angular(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    setupFiles: ['src/test-setup.ts'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../coverage/my-app',
+      provider: 'v8',
+    },
+  },
+});
+"
+`;
+
+exports[`app --unit-test-runner vitest should generate vite.config.mts if package type is module 1`] = `
+"/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import angular from '@analogjs/vite-plugin-angular';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../node_modules/.vite/my-app',
+  plugins: [angular(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    setupFiles: ['src/test-setup.ts'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../coverage/my-app',
+      provider: 'v8',
+    },
+  },
+});
+"
+`;
+
+exports[`app --unit-test-runner vitest should generate vite.config.mts if workspace package type is module 1`] = `
+"/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import angular from '@analogjs/vite-plugin-angular';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../node_modules/.vite/my-app',
+  plugins: [angular(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    setupFiles: ['src/test-setup.ts'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../coverage/my-app',
+      provider: 'v8',
+    },
+  },
+});
+"
+`;
+
 exports[`app angular compat support should import "ApplicationConfig" from "@angular/platform-browser" 1`] = `
 "import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';

packages/angular/src/generators/application/application.spec.ts

@@ -1,5 +1,5 @@
 import { installedCypressVersion } from '@nx/cypress/src/utils/cypress-version';
-import type { Tree } from '@nx/devkit';
+import { Tree, writeJson } from '@nx/devkit';
 import * as devkit from '@nx/devkit';
 import {
   NxJsonConfiguration,
@@ -698,6 +698,110 @@ describe('app', () => {
       });
     });
 
+    describe('vitest', () => {
+      it('should generate vite.config.mts', async () => {
+        await generateApp(appTree, 'my-app', {
+          skipFormat: false,
+          unitTestRunner: UnitTestRunner.Vitest,
+        });
+
+        expect(
+          appTree.read('my-app/vite.config.mts', 'utf-8')
+        ).toMatchSnapshot();
+      });
+
+      it('should generate src/test-setup.ts', async () => {
+        await generateApp(appTree, 'my-app', {
+          unitTestRunner: UnitTestRunner.Vitest,
+        });
+
+        expect(
+          appTree.read('my-app/src/test-setup.ts', 'utf-8')
+        ).toMatchSnapshot();
+      });
+
+      it('should exclude src/test-setup.ts in tsconfig.app.json', async () => {
+        await generateApp(appTree, 'my-app', {
+          unitTestRunner: UnitTestRunner.Vitest,
+        });
+
+        const tsConfig = readJson(appTree, 'my-app/tsconfig.app.json');
+        expect(tsConfig.exclude).toContain('src/test-setup.ts');
+      });
+
+      it('should add tsconfig.spec.json', async () => {
+        await generateApp(appTree, 'my-app', {
+          unitTestRunner: UnitTestRunner.Vitest,
+        });
+
+        expect(
+          appTree.read('my-app/tsconfig.spec.json', 'utf-8')
+        ).toMatchSnapshot();
+      });
+
+      it('should add a reference to tsconfig.spec.json in tsconfig.json', async () => {
+        await generateApp(appTree, 'my-app', {
+          unitTestRunner: UnitTestRunner.Vitest,
+        });
+
+        const { references } = readJson(appTree, 'my-app/tsconfig.json');
+        expect(references).toContainEqual({
+          path: './tsconfig.spec.json',
+        });
+      });
+
+      it('should add @nx/vite dependency', async () => {
+        await generateApp(appTree, 'my-app', {
+          unitTestRunner: UnitTestRunner.Vitest,
+        });
+
+        const { devDependencies } = readJson(appTree, 'package.json');
+        expect(devDependencies['@nx/vite']).toBeDefined();
+      });
+
+      it('should add vitest-angular', async () => {
+        await generateApp(appTree, 'my-app', {
+          unitTestRunner: UnitTestRunner.Vitest,
+        });
+
+        const { devDependencies } = readJson(appTree, 'package.json');
+        expect(devDependencies['@analogjs/vite-plugin-angular']).toBeDefined();
+        expect(devDependencies['@analogjs/vitest-angular']).toBeDefined();
+      });
+
+      it('should generate vite.config.mts if package type is module', async () => {
+        writeJson(appTree, 'my-app/package.json', {
+          name: 'my-app',
+          type: 'module',
+        });
+
+        await generateApp(appTree, 'my-app', {
+          skipFormat: false,
+          unitTestRunner: UnitTestRunner.Vitest,
+        });
+
+        expect(
+          appTree.read('my-app/vite.config.mts', 'utf-8')
+        ).toMatchSnapshot();
+      });
+
+      it('should generate vite.config.mts if workspace package type is module', async () => {
+        updateJson(appTree, 'package.json', (json) => ({
+          ...json,
+          type: 'module',
+        }));
+
+        await generateApp(appTree, 'my-app', {
+          skipFormat: false,
+          unitTestRunner: UnitTestRunner.Vitest,
+        });
+
+        expect(
+          appTree.read('my-app/vite.config.mts', 'utf-8')
+        ).toMatchSnapshot();
+      });
+    });
+
     describe('none', () => {
       it('should not generate test configuration', async () => {
         await generateApp(appTree, 'my-app', {

packages/angular/src/generators/application/lib/add-unit-test-runner.ts

@@ -1,15 +1,26 @@
 import { Tree } from '@nx/devkit';
 import { UnitTestRunner } from '../../../utils/test-runners';
 import { addJest } from '../../utils/add-jest';
+import { addVitest } from '../../utils/add-vitest';
 import type { NormalizedSchema } from './normalized-schema';
 
 export async function addUnitTestRunner(host: Tree, options: NormalizedSchema) {
-  if (options.unitTestRunner === UnitTestRunner.Jest) {
-    await addJest(host, {
-      name: options.name,
-      projectRoot: options.appProjectRoot,
-      skipPackageJson: options.skipPackageJson,
-      strict: options.strict,
-    });
+  switch (options.unitTestRunner) {
+    case UnitTestRunner.Jest:
+      await addJest(host, {
+        name: options.name,
+        projectRoot: options.appProjectRoot,
+        skipPackageJson: options.skipPackageJson,
+        strict: options.strict,
+      });
+      break;
+    case UnitTestRunner.Vitest:
+      await addVitest(host, {
+        name: options.name,
+        projectRoot: options.appProjectRoot,
+        skipPackageJson: options.skipPackageJson,
+        strict: options.strict,
+      });
+      break;
   }
 }

packages/angular/src/generators/application/schema.json

@@ -99,8 +99,9 @@
     },
     "unitTestRunner": {
       "type": "string",
-      "enum": ["jest", "none"],
+      "enum": ["jest", "vitest", "none"],
       "description": "Test runner to use for unit tests.",
+      "x-prompt": "Which unit test runner would you like to use?",
       "default": "jest"
     },
     "e2eTestRunner": {

packages/angular/src/generators/federate-module/schema.json

@@ -51,8 +51,9 @@
     },
     "unitTestRunner": {
       "type": "string",
-      "enum": ["jest", "none"],
+      "enum": ["jest", "vitest", "none"],
       "description": "Test runner to use for unit tests of the remote if it needs to be created.",
+      "x-prompt": "Which unit test runner would you like to use?",
       "default": "jest"
     },
     "e2eTestRunner": {