fix(@angular/build): bundle setup files in unit-test builder for Vitest

This change updates the Vitest runner in the unit-test builder to bundle 'setupFiles' through the application build pipeline, similar to test files. This ensures that setup files are processed with the same transformations and environment as the application code.

Note: Only setup files specified in the 'setupFiles' builder option are bundled. Setup files referenced solely within a custom Vitest configuration file (via 'runnerConfig') will not be bundled by the Angular CLI and will be processed directly by Vitest.

Author: clydin

packages/angular/build/src/builders/unit-test/runners/vitest/build-options.ts

@@ -98,6 +98,20 @@ export async function getVitestBuildOptions(
     workspaceRoot,
     removeTestExtension: true,
   });
+
+  if (options.setupFiles?.length) {
+    const setupEntryPoints = getTestEntrypoints(options.setupFiles, {
+      projectSourceRoot,
+      workspaceRoot,
+      removeTestExtension: false,
+      prefix: 'setup',
+    });
+
+    for (const [entryPoint, setupFile] of setupEntryPoints) {
+      entryPoints.set(entryPoint, setupFile);
+    }
+  }
+
   entryPoints.set('init-testbed', 'angular:test-bed-init');
 
   // The 'vitest' package is always external for testing purposes

packages/angular/build/src/builders/unit-test/runners/vitest/executor.ts

@@ -240,6 +240,15 @@ export class VitestExecutor implements TestExecutor {
       project = `${projectName} (${browserOptions.browser.instances[0].browser})`;
     }
 
+    // Filter internal entries and setup files from the include list
+    const internalEntries = ['angular:'];
+    const setupFileSet = new Set(testSetupFiles);
+    const include = [...this.testFileToEntryPoint.keys()].filter((entry) => {
+      return (
+        !internalEntries.some((internal) => entry.startsWith(internal)) && !setupFileSet.has(entry)
+      );
+    });
+
     return startVitest(
       'test',
       undefined,
@@ -272,10 +281,7 @@ export class VitestExecutor implements TestExecutor {
             reporters,
             setupFiles: testSetupFiles,
             projectPlugins,
-            include: [...this.testFileToEntryPoint.keys()].filter(
-              // Filter internal entries
-              (entry) => !entry.startsWith('angular:'),
-            ),
+            include,
           }),
         ],
       },

packages/angular/build/src/builders/unit-test/test-discovery.ts

@@ -81,6 +81,7 @@ interface TestEntrypointsOptions {
   projectSourceRoot: string;
   workspaceRoot: string;
   removeTestExtension?: boolean;
+  prefix?: string;
 }
 
 /**
@@ -93,15 +94,20 @@ interface TestEntrypointsOptions {
  */
 export function getTestEntrypoints(
   testFiles: string[],
-  { projectSourceRoot, workspaceRoot, removeTestExtension }: TestEntrypointsOptions,
+  {
+    projectSourceRoot,
+    workspaceRoot,
+    removeTestExtension,
+    prefix = 'spec',
+  }: TestEntrypointsOptions,
 ): Map<string, string> {
   const seen = new Set<string>();
   const roots = [projectSourceRoot, workspaceRoot];
 
   return new Map(
     Array.from(testFiles, (testFile) => {
       const fileName = generateNameFromPath(testFile, roots, !!removeTestExtension);
-      const baseName = `spec-${fileName}`;
+      const baseName = `${prefix}-${fileName}`;
       let uniqueName = baseName;
       let suffix = 2;
       while (seen.has(uniqueName)) {

packages/angular/build/src/builders/unit-test/tests/options/setup-files_spec.ts

@@ -16,7 +16,7 @@ import {
 } from '../setup';
 
 describeBuilder(execute, UNIT_TEST_BUILDER_INFO, (harness) => {
-  xdescribe('Option: "setupFiles"', () => {
+  describe('Option: "setupFiles"', () => {
     beforeEach(async () => {
       setupApplicationTarget(harness);
     });
@@ -27,19 +27,21 @@ describeBuilder(execute, UNIT_TEST_BUILDER_INFO, (harness) => {
         setupFiles: ['src/setup.ts'],
       });
 
-      const { result, error } = await harness.executeOnce({ outputLogsOnFailure: false });
-      expect(result).toBeUndefined();
-      expect(error?.message).toMatch(`The specified setup file "src/setup.ts" does not exist.`);
+      const { result, logs } = await harness.executeOnce({ outputLogsOnFailure: false });
+      expect(result?.success).toBeFalse();
+      // Verify that the build failed due to resolution error (esbuild error)
+      expectLog(logs, /Could not resolve/);
+      expectLog(logs, /src\/setup\.ts/);
     });
 
     it('should include the setup files', async () => {
       await harness.writeFiles({
-        'src/setup.ts': `console.log('Hello from setup.ts');`,
+        'src/setup.ts': `globalThis['TEST_SETUP_RAN'] = true;`,
         'src/app/app.component.spec.ts': `
         import { describe, expect, test } from 'vitest'
         describe('AppComponent', () => {
-          test('should create the app', () => {
-            expect(true).toBe(true);
+          test('should have run setup file', () => {
+            expect(globalThis['TEST_SETUP_RAN']).toBe(true);
           });
         });`,
       });
@@ -49,9 +51,8 @@ describeBuilder(execute, UNIT_TEST_BUILDER_INFO, (harness) => {
         setupFiles: ['src/setup.ts'],
       });
 
-      const { result, logs } = await harness.executeOnce();
+      const { result } = await harness.executeOnce();
       expect(result?.success).toBeTrue();
-      expectLog(logs, 'Hello from setup.ts');
     });
   });
 });

tests/e2e/tests/vitest/browser-playwright.ts

@@ -3,6 +3,7 @@ import { applyVitestBuilder } from '../../utils/vitest';
 import { ng } from '../../utils/process';
 import { installPackage } from '../../utils/packages';
 import { writeFile } from '../../utils/fs';
+import { updateJsonFile } from '../../utils/project';
 
 export default async function (): Promise<void> {
   await applyVitestBuilder();
@@ -19,6 +20,10 @@ export default async function (): Promise<void> {
     `,
   );
 
+  await updateJsonFile('tsconfig.spec.json', (json) => {
+    json.include = [...(json.include || []), 'src/setup1.ts'];
+  });
+
   const { stdout } = await ng(
     'test',
     '--no-watch',

tests/e2e/tests/vitest/browser-webdriverio.ts

@@ -3,6 +3,7 @@ import { applyVitestBuilder } from '../../utils/vitest';
 import { ng } from '../../utils/process';
 import { installPackage } from '../../utils/packages';
 import { writeFile } from '../../utils/fs';
+import { updateJsonFile } from '../../utils/project';
 
 export default async function (): Promise<void> {
   await applyVitestBuilder();
@@ -20,6 +21,10 @@ export default async function (): Promise<void> {
   `,
   );
 
+  await updateJsonFile('tsconfig.spec.json', (json) => {
+    json.include = [...(json.include || []), 'src/setup1.ts'];
+  });
+
   const { stdout } = await ng(
     'test',
     '--no-watch',