fix(@angular/build): use dynamic TestComponentRenderer for Vitest

This commit implements a custom TestComponentRenderer in the virtual init-testbed.js file generated for Vitest. In Vitests non-isolated mode (isolate: false) with JSDOM, Vitest creates a fresh document for each spec file but reuses the module cache. The default Angular DOMTestComponentRenderer caches the document during initialization, leading to stale references and errors like setAttribute is not a function in subsequent tests. The new DynamicDOMTestComponentRenderer looks up the document dynamically on every operation, resolving the issue without requiring a breaking change to defaults or affecting browser-based testing.

Author: clydin

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

@@ -54,11 +54,15 @@ function createTestBedInitVirtualFile(
     }`;
   }
 
+  // The DynamicDOMTestComponentRenderer is used to avoid stale document references
+  // when running Vitest in non-isolated mode with JSDOM. It looks up the
+  // document dynamically on every operation instead of caching it.
   return `
     // Initialize the Angular testing environment
     import { NgModule, provideZoneChangeDetection } from '@angular/core';
-    import { getTestBed, ɵgetCleanupHook as getCleanupHook } from '@angular/core/testing';
+    import { getTestBed, ɵgetCleanupHook as getCleanupHook, TestComponentRenderer } from '@angular/core/testing';
     import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
+    import { ɵgetDOM } from '@angular/common';
     import { afterEach, beforeEach } from 'vitest';
     ${providersImport}
 
@@ -70,6 +74,27 @@ function createTestBedInitVirtualFile(
     beforeEach(getCleanupHook(false));
     afterEach(getCleanupHook(true));
 
+    class DynamicDOMTestComponentRenderer extends TestComponentRenderer {
+      insertRootElement(rootElId, tagName = 'div') {
+        this.removeAllRootElements();
+
+        const doc = ɵgetDOM().getDefaultDocument();
+        const rootElement = doc.createElement(tagName);
+        rootElement.setAttribute('id', rootElId);
+        doc.body.appendChild(rootElement);
+      }
+
+      removeAllRootElements() {
+        const doc = ɵgetDOM().getDefaultDocument();
+        if (typeof doc.querySelectorAll === 'function') {
+          const oldRoots = doc.querySelectorAll('[id^=root]');
+          for (let i = 0; i < oldRoots.length; i++) {
+            ɵgetDOM().remove(oldRoots[i]);
+          }
+        }
+      }
+    }
+
     const ANGULAR_TESTBED_SETUP = Symbol.for('@angular/cli/testbed-setup');
     if (!globalThis[ANGULAR_TESTBED_SETUP]) {
       globalThis[ANGULAR_TESTBED_SETUP] = true;
@@ -82,6 +107,7 @@ function createTestBedInitVirtualFile(
         providers: [
           ...(typeof Zone !== 'undefined' ? [provideZoneChangeDetection()] : []),
           ...providers,
+          { provide: TestComponentRenderer, useClass: DynamicDOMTestComponentRenderer },
         ],
       })
       class TestModule {}

tests/e2e/tests/vitest/larger-project.ts

@@ -2,12 +2,11 @@ import { ng } from '../../utils/process';
 import { applyVitestBuilder } from '../../utils/vitest';
 import assert from 'node:assert';
 import { installPackage } from '../../utils/packages';
-import { exec } from '../../utils/process';
 
 export default async function () {
   await applyVitestBuilder();
 
-  const artifactCount = 100;
+  const artifactCount = 500;
   // A new project starts with 1 test file (app.spec.ts)
   // Each generated artifact will add one more test file.
   const initialTestCount = 1;