Skip to content

unit-test builder should show the proper origin source file in errors (vitest browser mode) #32097

@cexbrayat

Description

@cexbrayat

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 tests, using the unit-test builder (default configuration with vitest), the errors look like:

Expected: "Hello!"
Received: "Hello, vitest-errors"

 ❯ spec-app-app.js:21:54

The source mentions a file that does not exist in the project, making it impossible to quickly navigate to it (the line line and columns are accurate though).

Minimal Reproduction

npx @angular/cli@21 new vitest-errors --defaults
cd vitest-errors

Switch to browser mode in angular.json:

"test": {
  "builder": "@angular/build:unit-test",
  "options": {
    "browsers": ["ChromiumHeadless"]
  }
}

Add dependency:

npm i --save-dev --save-exact @vitest/browser-playwright

Change an assertion in app.spec.ts to make the tests fail, and run ng test

The error mentions spec-app-app.js:21:54, which is not the source file, and makes it impossible to quickly navigate to it.

Exception or Error

FAIL   vitest-errors (chromium)  src/app/app.spec.ts > App > should render title
AssertionError: expected 'Hello, vitest-errors' to contain 'Hello!'

Failure screenshot:
  - src/app/__screenshots__/app.spec.ts/App-should-render-title-1.png

Expected: "Hello!"
Received: "Hello, vitest-errors"

 ❯ spec-app-app.js:21:54

Your Environment

Angular CLI       : 21.0.3
Angular           : 21.0.4
Node.js           : 22.18.0
Package Manager   : npm 10.9.0
Operating System  : darwin arm64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build            │ 21.0.3            │ ^21.0.3           │
│ @angular/cli              │ 21.0.3            │ ^21.0.3           │
│ @angular/common           │ 21.0.4            │ ^21.0.0           │
│ @angular/compiler         │ 21.0.4            │ ^21.0.0           │
│ @angular/compiler-cli     │ 21.0.4            │ ^21.0.0           │
│ @angular/core             │ 21.0.4            │ ^21.0.0           │
│ @angular/forms            │ 21.0.4            │ ^21.0.0           │
│ @angular/platform-browser │ 21.0.4            │ ^21.0.0           │
│ @angular/router           │ 21.0.4            │ ^21.0.0           │
│ rxjs                      │ 7.8.2             │ ~7.8.0            │
│ typescript                │ 5.9.3             │ ~5.9.2            │
│ vitest                    │ 4.0.15            │ ^4.0.8            │
└───────────────────────────┴───────────────────┴───────────────────┘

Anything else relevant?

Note that this does not happen with jsdom:

 ❯ src/app/app.spec.ts:21:55
     19|     await fixture.whenStable();
     20|     const compiled = fixture.nativeElement as HTMLElement;
     21|     expect(compiled.querySelector('h1')?.textContent).toContain('Hello!');
       |                                                       ^
     22|   });
     23| });

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions