fix(@angular/build): inject source-map-support for Vitest browser tests

This change ensures that `source-map-support` is injected into the setup files when running Vitest tests in a browser environment. This allows stack traces from failing tests to correctly map back to the original source files, significantly improving debugging capabilities.

A regression test has been added to `tests/vitest/browser-sourcemaps.ts` to verify that a failing test correctly identifies the source file in its stack trace.

Author: clydin

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

@@ -135,6 +135,13 @@ export async function normalizeOptions(
   };
 }
 
-export function injectTestingPolyfills(polyfills: string[] = []): string[] {
-  return polyfills.includes('zone.js') ? [...polyfills, 'zone.js/testing'] : polyfills;
+export function injectTestingPolyfills(configuredPolyfills: string[] = []): string[] {
+  const updatedPolyfills = [...configuredPolyfills];
+
+  // Add zone.js testing if zone.js is present
+  if (configuredPolyfills.includes('zone.js')) {
+    updatedPolyfills.push('zone.js/testing');
+  }
+
+  return updatedPolyfills;
 }

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

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import { createRequire } from 'node:module';
 import path from 'node:path';
 import { toPosixPath } from '../../../../utils/path';
 import type { ApplicationBuilderInternalOptions } from '../../../application/options';
@@ -18,6 +19,7 @@ function createTestBedInitVirtualFile(
   providersFile: string | undefined,
   projectSourceRoot: string,
   polyfills: string[] = [],
+  sourcemapSupport: boolean = false,
 ): string {
   const usesZoneJS = polyfills.includes('zone.js');
   let providersImport = 'const providers = [];';
@@ -28,13 +30,26 @@ function createTestBedInitVirtualFile(
     providersImport = `import providers from './${importPath}';`;
   }
 
+  // Resolve and add sourcemap support (mainly for browsers)
+  let sourceMapSetup;
+  if (sourcemapSupport) {
+    const packageResolve = createRequire(__filename).resolve;
+    const sourceMapPath = packageResolve('source-map-support');
+
+    sourceMapSetup = `
+      import sourceMapSupport from '${sourceMapPath}';
+      sourceMapSupport.install();
+    `;
+  }
+
   return `
     // Initialize the Angular testing environment
     import { NgModule${usesZoneJS ? ', provideZoneChangeDetection' : ''} } from '@angular/core';
     import { getTestBed, ɵgetCleanupHook as getCleanupHook } from '@angular/core/testing';
     import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
     import { afterEach, beforeEach } from 'vitest';
     ${providersImport}
+    ${sourceMapSetup}
 
     // The beforeEach and afterEach hooks are registered outside the globalThis guard.
     // This ensures that the hooks are always applied, even in non-isolated browser environments.
@@ -134,6 +149,7 @@ export async function getVitestBuildOptions(
     providersFile,
     projectSourceRoot,
     buildOptions.polyfills,
+    !!options.browsers?.length,
   );
 
   return {

tests/legacy-cli/e2e/tests/vitest/browser-sourcemaps.ts

@@ -0,0 +1,39 @@
+import assert from 'node:assert/strict';
+import { applyVitestBuilder } from '../../utils/vitest';
+import { ng } from '../../utils/process';
+import { installPackage } from '../../utils/packages';
+import { writeFile } from '../../utils/fs';
+
+export default async function (): Promise<void> {
+  await applyVitestBuilder();
+  await installPackage('playwright@1');
+  await installPackage('@vitest/browser-playwright@4');
+  await ng('generate', 'component', 'my-comp');
+
+  // Add a failing test to verify source map support
+  await writeFile(
+    'src/app/failing.spec.ts',
+    `
+      describe('Failing Test', () => {
+        it('should fail', () => {
+          throw new Error('This is a failing test');
+        });
+      });
+    `,
+  );
+
+  try {
+    await ng('test', '--no-watch', '--browsers', 'chromiumHeadless');
+    throw new Error('Expected "ng test" to fail.');
+  } catch (error: any) {
+    const stdout = error.stdout || error.message;
+    // We expect the failure from failing.spec.ts
+    assert.match(stdout, /1 failed/, 'Expected 1 test to fail.');
+    // Check that the stack trace points to the correct file
+    assert.match(
+      stdout,
+      /src\/app\/failing\.spec\.ts:\d+:\d+/,
+      'Expected stack trace to point to the source file.',
+    );
+  }
+}