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/runners/vitest/executor.ts

@@ -8,7 +8,8 @@
 
 import type { BuilderOutput } from '@angular-devkit/architect';
 import assert from 'node:assert';
-import path, { join } from 'node:path';
+import { createRequire } from 'node:module';
+import path from 'node:path';
 import type { Vitest } from 'vitest/node';
 import {
   DevServerExternalResultMetadata,
@@ -126,7 +127,7 @@ export class VitestExecutor implements TestExecutor {
     await this.vitest?.close();
   }
 
-  private prepareSetupFiles(): string[] {
+  private prepareSetupFiles(sourcemapSupport: boolean): string[] {
     const { setupFiles } = this.options;
     // Add setup file entries for TestBed initialization and project polyfills
     const testSetupFiles = ['init-testbed.js', ...setupFiles];
@@ -136,6 +137,12 @@ export class VitestExecutor implements TestExecutor {
       testSetupFiles.unshift('polyfills.js');
     }
 
+    // Resolve and add sourcemap support (mainly for browsers)
+    if (sourcemapSupport) {
+      const packageResolve = createRequire(__filename).resolve;
+      testSetupFiles.unshift(packageResolve('source-map-support/browser-source-map-support.js'));
+    }
+
     return testSetupFiles;
   }
 
@@ -187,7 +194,7 @@ export class VitestExecutor implements TestExecutor {
       'buildResult must be available before initializing vitest',
     );
 
-    const testSetupFiles = this.prepareSetupFiles();
+    const testSetupFiles = this.prepareSetupFiles(!!browserOptions.browser?.enabled);
     const projectPlugins = createVitestPlugins({
       workspaceRoot,
       projectSourceRoot,

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

@@ -0,0 +1,40 @@
+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.');
+  }
+}