Skip to content

vitest: error when a file contains several tests #30186

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
1 task
cexbrayat opened this issue Apr 27, 2025 · 2 comments · May be fixed by #30188
Open
1 task

vitest: error when a file contains several tests #30186

cexbrayat opened this issue Apr 27, 2025 · 2 comments · May be fixed by #30188
Labels
angular/build:unit-test area: @angular/build freq1: low Only reported by a handful of users who observe it rarely severity3: broken type: bug/fix

Comments

@cexbrayat
Copy link
Member

Command

test

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When running ng test on a spec file with several tests in the test suite, then the command fails.

Minimal Reproduction

npx @angular/[email protected] new vitest-repro --defaults --no-routing
cd vitest-repro
npm i --save-dev --save-exact vitest jsdom

Replace the test config in angular.json to use vitest:

        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
              "tsConfig": "tsconfig.spec.json",
              "buildTarget": "::development",
              "runner": "vitest"
          }
        }

Update the default app.spec.ts with the appropriate imports at the top:

+ import { beforeEach, describe, expect, it } from 'vitest';

Run the tests with ng test

Exception or Error

❯ spec-app-app.spec.js (3 tests | 2 failed) 79ms
   ✓ App > should create the app 27ms
   × App > should have the 'vitest-repro' title 51ms
     → Cannot configure the test module when the test module has already been instantiated. Make sure you are not using `inject` before `TestBed.configureTestingModule`.
   × App > should render title 0ms
     → Cannot configure the test module when the test module has already been instantiated. Make sure you are not using `inject` before `TestBed.configureTestingModule`.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 2 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  spec-app-app.spec.js > App > should have the 'vitest-repro' title
 FAIL  spec-app-app.spec.js > App > should render title
Error: Cannot configure the test module when the test module has already been instantiated. Make sure you are not using `inject` before `TestBed.configureTestingModule`.
 ❯ _TestBedImpl.assertNotInstantiated node_modules/@angular/core/fesm2022/testing.mjs:2100:19
 ❯ _TestBedImpl.configureTestingModule node_modules/@angular/core/fesm2022/testing.mjs:1978:14
 ❯ Function.configureTestingModule node_modules/@angular/core/fesm2022/testing.mjs:1812:37
 ❯ src/app/app.spec.ts:7:19
 ❯ chunk-GELMMDPB.js:152:61
    151|           }
    152|           const { _finalizers } = this;
    153|           if (_finalizers) {
       |                     ^
    154|             this._finalizers = null;
    155|             for (const finalizer of _finalizers) {
 ❯ new ZoneAwarePromise node_modules/zone.js/fesm2015/zone.js:2702:25
 ❯ __async chunk-GELMMDPB.js:136:10
 ❯ src/app/app.spec.ts:6:25

Your Environment

Angular CLI: 20.0.0-next.8
Node: 22.14.0
Package Manager: npm 10.9.0
OS: darwin arm64

Angular: 20.0.0-next.8
... build, cli, common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.2000.0-next.8
@angular-devkit/core         20.0.0-next.8
@angular-devkit/schematics   20.0.0-next.8
@schematics/angular          20.0.0-next.8
rxjs                         7.8.2
typescript                   5.8.3
zone.js                      0.15.0

Anything else relevant?

No response
@alan-agius4
Copy link
Collaborator

This issue occurs because afterEach and beforeEach are not being patched: https://github.com/angular/angular/blob/05a03d3f975771bb59c7eefd37c01fa127ee2229/packages/core/testing/src/test_hooks.ts#L21-L29

alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Apr 28, 2025
@alan-agius4
fix(@angular/build): perform testing module cleanup when using Vitest
40ce720 
Ensure proper cleanup of the Angular testing module when running tests with Vitest.

Closes: angular#30186
@alan-agius4 alan-agius4 linked a pull request Apr 28, 2025 that will close this issue
Open
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Apr 28, 2025
@alan-agius4
fix(@angular/build): perform testing module cleanup when using Vitest
7b6abea 
Ensure proper cleanup of the Angular testing module when running tests with Vitest.

Closes: angular#30186
@clydin
Copy link
Member

clydin commented Apr 28, 2025

You can also add a TestBed.resetTestingModule to pair with the existing TestBed.configureTestingModule:

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [App],
    }).compileComponents();
  });

  afterEach(() => TestBed.resetTestingModule());

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
angular/build:unit-test area: @angular/build freq1: low Only reported by a handful of users who observe it rarely severity3: broken type: bug/fix
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(@angular/build): perform testing module cleanup when using Vitest alan-agius4/angular-cli
3 participants
@cexbrayat @alan-agius4 @clydin