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/plugins.ts

@@ -112,6 +112,12 @@ export async function createVitestConfigPlugin(
         delete config.plugins;
       }
 
+      // Add browser source map support
+      if (browser || testConfig?.browser?.enabled) {
+        projectPlugins.unshift(createSourcemapSupportPlugin());
+        setupFiles.unshift('virtual:source-map-support');
+      }
+
       const projectResolver = createRequire(projectSourceRoot + '/').resolve;
 
       const projectDefaults: UserWorkspaceConfig = {
@@ -310,6 +316,36 @@ export function createVitestPlugins(pluginOptions: PluginOptions): VitestPlugins
   ];
 }
 
+function createSourcemapSupportPlugin(): VitestPlugins[0] {
+  return {
+    name: 'angular:source-map-support',
+    enforce: 'pre',
+    resolveId(source) {
+      if (source.includes('virtual:source-map-support')) {
+        return '\0source-map-support';
+      }
+    },
+    async load(id) {
+      if (id !== '\0source-map-support') {
+        return;
+      }
+
+      const packageResolve = createRequire(__filename).resolve;
+      const supportPath = packageResolve('source-map-support/browser-source-map-support.js');
+
+      const content = await readFile(supportPath, 'utf-8');
+
+      // The `source-map-support` library currently relies on `this` being defined in the global scope.
+      // However, when running in an ESM environment, `this` is undefined.
+      // To workaround this, we patch the library to use `globalThis` instead of `this`.
+      return (
+        content.replaceAll(/this\.(define|sourceMapSupport|base64js)/g, 'globalThis.$1') +
+        '\n;globalThis.sourceMapSupport.install();'
+      );
+    },
+  };
+}
+
 async function generateCoverageOption(
   optionsCoverage: NormalizedUnitTestBuilderOptions['coverage'],
   configCoverage: VitestCoverageOption | undefined,

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

@@ -0,0 +1,40 @@
+import assert from 'node:assert/strict';
+import { applyVitestBuilder } from '../../utils/vitest';
+import { ng, noSilentNg } from '../../utils/process';
+import { installPackage } from '../../utils/packages';
+import { writeFile } from '../../utils/fs';
+import { stripVTControlCharacters } from 'node:util';
+
+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', () => {
+          expect(true).toBe(false);
+        });
+      });
+    `,
+  );
+
+  try {
+    await noSilentNg('test', '--no-watch', '--browsers', 'chromiumHeadless');
+    throw new Error('Expected "ng test" to fail.');
+  } catch (error: any) {
+    const stdout = stripVTControlCharacters(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,
+      /\bsrc[\/\\]app[\/\\]failing\.spec\.ts:4:\d+/,
+      'Expected stack trace to point to the source file.',
+    );
+  }
+}