Cleanup runs before test completion - unable to inspect rendered DOM in headed browser mode

[rkrisztian]

(Note: I used AI to compose the issue, but I have reviewed it thoroughly so that the information presented is still accurate.)

Expected Behavior

When running component tests in headed browser mode, the rendered component should remain visible in the viewport after the test completes, allowing developers to visually inspect the final state. This is how vitest-browser-react works — cleanup happens before a test is executed, not before the test completes.

Actual Behavior

In vitest-browser-angular, the DOM is cleared immediately when the test completes, making it impossible to inspect rendered output in headed mode. The viewport shows a blank/cleared state instead of the rendered component.

Impact

This significantly hinders debugging in headed browser mode because you cannot visually verify:

• Component rendering at test completion
• Visual layout issues
• State that should persist through the test lifecycle

Reproduction Steps

1. Enable browser mode with a headed provider (e.g., browser.name: 'chromium')
2. Write a simple component test using vitest-browser-angular
3. Run the test in headed mode
4. Observe that the viewport is cleared immediately after the test assertions pass

Comparison with vitest-browser-react

The vitest-browser-react adapter maintains the rendered component until after the test finishes, then performs cleanup. This allows developers to pause and inspect the UI state during debugging.

This approach differs from @testing-library/react, which performs cleanup after tests. The before-test cleanup strategy allows developers to inspect the rendered components in the browser UI after a test completes, which is valuable for debugging.

(Source: https://deepwiki.com/vitest-community/vitest-browser-react/3.4-cleanup)

However, vitest-browser-angular works differently:

Cleanup Registration: Registers a cleanup hook to ensure the component is destroyed after the test
[...]
Teardown: After each test, fixture.destroy() is called [...]

(Source: https://deepwiki.com/vitest-community/vitest-browser-angular/2.1-render()-function-and-renderresult)

Although beforeEach is used to register the cleanup, the actual cleanup happens after the test ends. Maybe that is intentional, because Angular works with fixtures?

Additionally, I wanted to experiment with a workaround for myself, but I found no way to turn off automatic cleanup. Unlike the vitest-browser-react/pure import path, you can't import vitest-browser-angular/pure, there's no such exported path.

Request

Align vitest-browser-angular cleanup timing with vitest-browser-react:

• Keep the rendered component visible in the viewport until the test completes.
• Perform cleanup after the test finishes, not during the transition to the next test.
• Allow manual cleanup.

Environment

• vitest-browser-angular: 0.4.0
• Angular: 21.2.17
• Vitest: 4.1.9
• Browser provider: playwright

[MRinaldi9]

i don't know if i clearly intend the problem, but are you using Angular CLI or Analog Plugin?

In the case of the Angular CLI, the behavior is managed by the TestBed, and to modify it, you must provide your own implementation of TestComponentRenderer (see angular/angular-cli#31226 (comment)). For the Analog plugin, however, the situation is unusual; testing in this repository shows that in browser mode, the components render correctly.

[rkrisztian]

I'm using the Angular CLI plugin. Thanks for the info, I'll check it.

[MRinaldi9]

i suggest to you to switch to the analog plugin, because it is better integrated with the "vitest" ecosystem

[rkrisztian]

I tried @analogjs/vite-plugin-angular, but for support of environment files, I needed to install @analogjs/platform, which is a package with lots of dependencies (for me it installed 238 additional packages). (More details in rkrisztian/contenttree#105 (comment).) Therefore, I'd rather not use it, even though I understand its benefits. So if you say my problem won't or can't be fixed with @angular/build:unit-test, then I'll have to either accept that or consider finding a workaround for loading of environment files. (For now I decided to keep my current setup.)

[MRinaldi9]

if you need to replace environment during test you can use another plugin: https://npmx.dev/package/vite-plugin-replace-files or write your vite plugin without installing the analog plugin for replacing.
Eventually you can even think to mock the module of environment (https://vitest.dev/guide/learn/mock-functions.html#mocking-modules) with Vitest in your test-setup or another file of initialization, without installing nothing.

[rkrisztian]

Thanks for the help, and I really appreciate it. However, I gave it another go, but in the meantime I upgraded Angular to v22, and now it looks like I need @analogjs/vitest-angular v3 (which is currently in alpha) to match peer dependencies. I'm sorry, but, even if it was my mistake not knowing about vite-plugin-replace-files and other solutions (or I could have given some hint from the analogjs team), the problem is I'm experiencing too much friction just to replace the Angular CLI builder. Angular 22 has been out for nearly 2 months as of me writing this comment, and maybe I'm not giving them enough time (according to an LLM, most testing libraries usually take 2-8 weeks after an Angular major release to fully support the latest version), but most NPM packages I use have already prepared for the Angular 22 release. Sorry, I really wanted to make this work, but for now I'm rather thinking of sacrificing this developer user friendliness for less other challenges needed to face.

=> Feel free to close this issue if the solution with the Angular CLI builder is too difficult to do.

[MRinaldi9]

i don't understand why do you need of V3 of Analog library; because the last stable version of @analogjs/vite-plugin-angular and @analogjs/vitest-angular they support v22 of angular.
Anyway if you intend to return to the Angular CLI, have you tried to use the debug option of the unit-test builder? because that option it will permit to enable the destruction or not of the component on the TestBed, it is documented on the README in the section "Component Preview"

[rkrisztian]

the last stable version of @analogjs/vite-plugin-angular and @analogjs/vitest-angular they support v22 of angular.

That's what I thought too, because of this commit: analogjs/analog@9282770.

But then I tried the installation:

$ npm i --save-dev  @analogjs/vitest-angular
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: my-angular-project@undefined
npm error Found: @angular/compiler-cli@22.0.8
npm error node_modules/@angular/compiler-cli
npm error   peer @angular/compiler-cli@"^22.0.0" from @angular/build@22.0.9
npm error   node_modules/@angular/build
npm error     dev @angular/build@"^22.0.9" from the root project
npm error   dev @angular/compiler-cli@"^22.0.8" from the root project
npm error
npm error Could not resolve dependency:
npm error dev @analogjs/vitest-angular@"*" from the root project
npm error
npm error Conflicting peer dependency: @angular/compiler-cli@22.1.0
npm error node_modules/@angular/compiler-cli
npm error   peer @angular/compiler-cli@"^21.0.0" from @angular-devkit/build-angular@21.2.19
npm error   node_modules/@angular-devkit/build-angular
npm error     peerOptional @angular-devkit/build-angular@"^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0" from @analogjs/vite-plugin-angular@2.6.4
npm error     node_modules/@analogjs/vite-plugin-angular
npm error       peer @analogjs/vite-plugin-angular@"*" from @analogjs/vitest-angular@2.6.4
npm error       node_modules/@analogjs/vitest-angular
npm error         dev @analogjs/vitest-angular@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry this command with --force or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution.
npm error

In my understanding this means:

• My project uses @angular/compiler-cli@22.0.8 (Angular 22).
• @analogjs/vitest-angular@2.6.4 has a peer dependency on @angular/compiler-cli@^21.0.0 (Angular 21.x).

However, I may have concluded incorrectly that v3 would solve my problem.

Thanks for the hint on the debug option, I need some time to be able to try out.