feat(vite): add angular option to vitest generator

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

@@ -16,8 +16,7 @@
       },
       "uiFramework": {
         "type": "string",
-        "enum": ["react", "none"],
-        "default": "none",
+        "enum": ["angular", "react", "none"],
         "description": "UI framework to use with vitest."
       },
       "inSourceTests": {

packages/angular/src/generators/utils/add-vitest.ts

@@ -1,10 +1,5 @@
-import {
-  addDependenciesToPackageJson,
-  ensurePackage,
-  joinPathFragments,
-  type Tree,
-} from '@nx/devkit';
-import { analogVitestAngular, nxVersion } from '../../utils/versions';
+import { ensurePackage, type Tree } from '@nx/devkit';
+import { nxVersion } from '../../utils/versions';
 
 export type AddVitestOptions = {
   name: string;
@@ -17,69 +12,16 @@ export async function addVitest(
   tree: Tree,
   options: AddVitestOptions
 ): Promise<void> {
-  if (!options.skipPackageJson) {
-    addDependenciesToPackageJson(
-      tree,
-      {},
-      {
-        '@analogjs/vitest-angular': analogVitestAngular,
-        '@analogjs/vite-plugin-angular': analogVitestAngular,
-      },
-      undefined,
-      true
-    );
-  }
-
-  const { createOrEditViteConfig, vitestGenerator } = ensurePackage<
-    typeof import('@nx/vite')
-  >('@nx/vite', nxVersion);
-
-  const relativeTestSetupPath = joinPathFragments('src', 'test-setup.ts');
-
-  const setupFile = joinPathFragments(
-    options.projectRoot,
-    relativeTestSetupPath
+  const { vitestGenerator } = ensurePackage<typeof import('@nx/vite')>(
+    '@nx/vite',
+    nxVersion
   );
-  if (!tree.exists(setupFile)) {
-    tree.write(
-      setupFile,
-      `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()
-);
-`
-    );
-
-    await vitestGenerator(tree, {
-      project: options.name,
-      uiFramework: 'none',
-      skipViteConfig: true,
-      testEnvironment: 'jsdom',
-      coverageProvider: 'v8',
-      addPlugin: false,
-    });
 
-    createOrEditViteConfig(
-      tree,
-      {
-        project: options.name,
-        includeLib: false,
-        includeVitest: true,
-        inSourceTests: false,
-        imports: [`import angular from '@analogjs/vite-plugin-angular'`],
-        plugins: ['angular()'],
-        setupFile: relativeTestSetupPath,
-        useEsmExtension: true,
-      },
-      true
-    );
-  }
+  await vitestGenerator(tree, {
+    project: options.name,
+    uiFramework: 'angular',
+    testEnvironment: 'jsdom',
+    coverageProvider: 'v8',
+    addPlugin: false,
+  });
 }

packages/angular/src/utils/backward-compatible-versions.ts

@@ -14,10 +14,7 @@ export type PackageVersionNames =
 
 export type VersionMap = {
   angularV17: Record<
-    Exclude<
-      CompatPackageVersionNames,
-      'analogVitestAngular' | 'typescriptEslintVersion'
-    >,
+    Exclude<CompatPackageVersionNames, 'typescriptEslintVersion'>,
     string
   >;
   angularV18: Record<CompatPackageVersionNames, string>;
@@ -80,7 +77,6 @@ export const backwardCompatibleVersions: VersionMap = {
     jestPresetAngularVersion: '~14.1.0',
     typesNodeVersion: '18.16.9',
     jasmineMarblesVersion: '^0.9.2',
-    analogVitestAngular: '~1.9.1',
     jsoncEslintParserVersion: '^2.1.0',
   },
 };

packages/angular/src/utils/versions.ts

@@ -28,6 +28,5 @@ export const tsNodeVersion = '10.9.1';
 export const jestPresetAngularVersion = '~14.4.0';
 export const typesNodeVersion = '18.16.9';
 export const jasmineMarblesVersion = '^0.9.2';
-export const analogVitestAngular = '~1.10.0';
 
 export const jsoncEslintParserVersion = '^2.1.0';

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

@@ -1,5 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`vitest generator angular 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[`vitest generator angular 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/apps/my-test-angular-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/apps/my-test-angular-app',
+      provider: 'v8',
+    },
+  },
+});
+"
+`;
+
 exports[`vitest generator insourceTests should add the insourceSource option in the vite config 1`] = `
 "/// <reference types='vitest' />
 import { defineConfig } from 'vite';
@@ -39,7 +86,7 @@ exports[`vitest generator tsconfig should add vitest.workspace.ts at the root 1`
 "
 `;
 
-exports[`vitest generator vite.config should create correct vite.config.ts file for apps 1`] = `
+exports[`vitest generator vite.config for libs should create correct vite.config.ts file for non buildable libs 1`] = `
 "/// <reference types='vitest' />
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
@@ -48,7 +95,7 @@ import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
 
 export default defineConfig({
   root: __dirname,
-  cacheDir: '../../node_modules/.vite/apps/my-test-react-app',
+  cacheDir: '../../node_modules/.vite/libs/react-lib-nonb-jest',
   plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
   // Uncomment this if you are using workers.
   // worker: {
@@ -61,15 +108,15 @@ export default defineConfig({
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     reporters: ['default'],
     coverage: {
-      reportsDirectory: '../../coverage/apps/my-test-react-app',
+      reportsDirectory: '../../coverage/libs/react-lib-nonb-jest',
       provider: 'v8',
     },
   },
 });
 "
 `;
 
-exports[`vitest generator vite.config should create correct vite.config.ts file for non buildable libs 1`] = `
+exports[`vitest generator vite.config should create correct vite.config.ts file for apps 1`] = `
 "/// <reference types='vitest' />
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
@@ -78,7 +125,7 @@ import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
 
 export default defineConfig({
   root: __dirname,
-  cacheDir: '../../node_modules/.vite/libs/react-lib-nonb-jest',
+  cacheDir: '../../node_modules/.vite/apps/my-test-react-app',
   plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
   // Uncomment this if you are using workers.
   // worker: {
@@ -91,7 +138,7 @@ export default defineConfig({
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     reporters: ['default'],
     coverage: {
-      reportsDirectory: '../../coverage/libs/react-lib-nonb-jest',
+      reportsDirectory: '../../coverage/apps/my-test-react-app',
       provider: 'v8',
     },
   },

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

@@ -1,6 +1,6 @@
 export interface VitestGeneratorSchema {
   project: string;
-  uiFramework: 'react' | 'none';
+  uiFramework?: 'angular' | 'react' | 'none';
   coverageProvider: 'v8' | 'istanbul' | 'custom';
   inSourceTests?: boolean;
   skipViteConfig?: boolean;

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

@@ -15,8 +15,7 @@
     },
     "uiFramework": {
       "type": "string",
-      "enum": ["react", "none"],
-      "default": "none",
+      "enum": ["angular", "react", "none"],
       "description": "UI framework to use with vitest."
     },
     "inSourceTests": {

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

@@ -27,7 +27,11 @@ import {
 } from '../../utils/versions';
 import initGenerator from '../init/init';
 import { VitestGeneratorSchema } from './schema';
+import { detectUiFramework } from '../../utils/detect-ui-framework';
 
+/**
+ * @param hasPlugin some frameworks (e.g. Nuxt) provide their own plugin. Their generators handle the plugin detection.
+ */
 export function vitestGenerator(
   tree: Tree,
   schema: VitestGeneratorSchema,
@@ -56,6 +60,8 @@ export async function vitestGeneratorInternal(
     schema.project
   );
   const projectType = schema.projectType ?? _projectType;
+  const uiFramework =
+    schema.uiFramework ?? (await detectUiFramework(schema.project));
   const isRootProject = root === '.';
 
   tasks.push(await jsInitGenerator(tree, { ...schema, skipFormat: true }));
@@ -64,22 +70,49 @@ export async function vitestGeneratorInternal(
     addPlugin: schema.addPlugin,
   });
   tasks.push(initTask);
-  tasks.push(ensureDependencies(tree, schema));
+  tasks.push(ensureDependencies(tree, { ...schema, uiFramework }));
 
-  const nxJson = readNxJson(tree);
-  const hasPluginCheck = nxJson.plugins?.some(
-    (p) =>
-      (typeof p === 'string'
-        ? p === '@nx/vite/plugin'
-        : p.plugin === '@nx/vite/plugin') || hasPlugin
-  );
-  if (!hasPluginCheck) {
-    const testTarget = schema.testTarget ?? 'test';
-    addOrChangeTestTarget(tree, schema, testTarget);
-  }
+  addOrChangeTestTarget(tree, schema, hasPlugin);
 
   if (!schema.skipViteConfig) {
-    if (schema.uiFramework === 'react') {
+    if (uiFramework === 'angular') {
+      const relativeTestSetupPath = joinPathFragments('src', 'test-setup.ts');
+
+      const setupFile = joinPathFragments(root, relativeTestSetupPath);
+      if (!tree.exists(setupFile)) {
+        tree.write(
+          setupFile,
+          `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()
+);
+`
+        );
+      }
+
+      createOrEditViteConfig(
+        tree,
+        {
+          project: schema.project,
+          includeLib: false,
+          includeVitest: true,
+          inSourceTests: false,
+          imports: [`import angular from '@analogjs/vite-plugin-angular'`],
+          plugins: ['angular()'],
+          setupFile: relativeTestSetupPath,
+          useEsmExtension: true,
+        },
+        true
+      );
+    } else if (uiFramework === 'react') {
       createOrEditViteConfig(
         tree,
         {