Screenshots generated by vitest browser mode generate errors

[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 a test errors with the vitest runner in browser mode, a screenshot is generated in a __screenshots__ directory. Running ng test with such a screenshot in that directory produces:

✘ [ERROR] No loader is configured for ".png" files: src/app/__screenshots__/app.spec.ts/App-should-render-title-1.png

Minimal Reproduction

npx @angular/cli@next new vitest-screenshots --defaults --no-routing
cd vitest-screenshots
npm i --save-dev --save-exact vitest @vitest/browser

Update angular.json to use:

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

Update the app.spec.ts file to fail the test.

ng test --no-watch
# test fails and a screenshot is generated
ng test --no-watch
# throws the mentioned error

Exception or Error

❯ ng test
NOTE: The "unit-test" builder is currently EXPERIMENTAL and not ready for production use.
Application bundle generation failed. [1.285 seconds] - 2025-09-23T18:44:28.548Z

✘ [ERROR] No loader is configured for ".png" files: src/app/__screenshots__/app.spec.ts/App-should-render-title-1.png

Your Environment

Angular CLI: 21.0.0-next.4
Node: 22.18.0
Package Manager: npm 10.9.0
OS: darwin arm64


Angular: 21.0.0-next.4
... build, cli, common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                      Version
------------------------------------
@angular-devkit/architect    0.2100.0-next.4
@angular-devkit/core         21.0.0-next.4
@angular-devkit/schematics   21.0.0-next.4
@schematics/angular          21.0.0-next.4
rxjs                         7.8.2
typescript                   5.9.2
zone.js                      0.15.1

Anything else relevant?

I'm willing to open a PR to fix that, but I'm wondering what the best approach should be.

[gioboa]

Vitest usually creates the __screenshots__/ in the root. Vitest docs
In this case the screenshot folder is inside src/app/ and this mess up the test process, maybe the root is wrong 🤔
I'm happy to open a PR for this, feedback and pointers are more than welcome.

[clydin]

From the docs, the screenshots are relative to the test file:

You can specify the save location for the screenshot using the path option, which is relative to the current test file. If the path option is not set, Vitest will default to using browser.screenshotDirectory (__screenshot__ by default), along with the names of the file and the test to determine the screenshot's filepath.

The issue appears more a bug in Vitest though. Why is it trying to import screenshots on test execution? There's also no guarantee that the Vite configuration for a given project will allow and/or support importing png files so this could potentially fail even outside Angular usage.

[cexbrayat]

Out of the box in a Vue project (generated with create-vue), you will have the screenshots generated, and running npm run test:unit won't pick up the pngs files. Maybe because the Vitest "defaultInclude" is only referencing js/ts files and the include in the CLI builder is larger?

https://github.com/vitest-dev/vitest/blob/88e62c7586940b260a1e53efb21d736dd30bdbd8/packages/vitest/src/defaults.ts#L12C14-L12C28