[@angular/build:unit-test][vitest] Configurable vitest

[joergbaier]

trafficstars

Command

test

Description

First of all, I support the initiative to add vitest to Angular. Especially since vite is already used for ~build &~ serve.

Early feedback for vitest in Angular v20. Based on a quick browse of packages/angular/build/src/builders/unit-test/builder.ts there doesn't seem to be a way to pass configuration settings.

For this to be even slightly usable, you would need to set vitest options such as:

• timeouts
• setupFiles
• coverage (specify lcov reporter)

Describe the solution you'd like

One option is letting people pass vitest options in angular.json and doing a deep object merge. This is probably the easiest to implement but most likely to lead to configuration confusion and conflicts.

Describe alternatives you've considered

Personally I would rather see less obfuscation... let people have a vitest.config.ts. Projects that don't have advanced testing needs would never need to add this file.

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {}
});

With the vitest.config.ts, Angular could add a plugin similar to @analogjs/vite-plugin-angular.

OR

Export an Angular version of defineConfig which is used instead of vitest/config. Then you can strongly type the options and include/exclude ones that make sense for angular.

import { defineConfig } from "@angular/vitest";

export default defineConfig({ ... });

---

Please press the 👍 since this needs at least 20 to be considered!

[angular-robot[bot]]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[brandonroberts]

Thanks for the mention @joergbaier. One point of clarification is that vite is not used by the Angular CLI for building the application. esbuild is used for building both during development and production. Vite is used only as the development server to serve the assets produced by esbuild.

I do like the idea of the @angular/vitest package though exporting a subset of supported features. Similar to how the karma.conf.js was supported. It will cause confusion though as people will try to override with the config file and things will break unexpectedly.

The Angular team has traditionally not allowed any official means of supporting configuration outside of the angular.json though.

[umarkashmiri]

Is there any way to change the coverage provider to @vitest/coverage-istanbul

by default it is set to @vitest/coverage-v8 and i dont have a way to change it to make it compatible with sonarqube :/

[joergbaier]

@umarkashmiri I solved this in a non-angular project by setting coverage.reporter to ["lcovonly"] even with v8. But still, we would need the ability to do the same here.

This update could be enough for you as well https://github.com/angular/angular-cli/pull/30464

[drdreo]

I am experimenting with the new unit-test builder and vitest, and switched to a browser based environment. But could not figure out how to configure headless mode. Exposing some of the vitest settings would be really great, like they support a headless option via vitest --browser.headless

[fgirardey]

Letting people opt-in to a vitest.config.ts file workflow would also enable the usage of the Vitest VS Code extension and boost the developer experience.

[snebjorn]

I was looking to play around with vitest and msw but that requires me to add some setupFiles to the vitest configuration. https://mswjs.io/docs/quick-start

// vitest.setup.ts
import { beforeAll, afterEach, afterAll } from 'vitest'
import { server } from './mocks/node.js'
 
beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

Hopefully support for this will come soon

[brandonroberts]

setupFiles is already supported in the schema

https://github.com/angular/angular-cli/blob/main/packages%2Fangular%2Fbuild%2Fsrc%2Fbuilders%2Funit-test%2Fschema.json#L103

[snebjorn]

Ah nice, I'll give it a swing :)

BTW your docs say otherwise, perhaps it needs an update :)

The Angular CLI takes care of the Vitest configuration for you. It constructs the full configuration in memory, based on options specified in the angular.json file. Directly customizing the underlying test runner configuration is currently not supported.

https://angular.dev/guide/testing/unit-tests#configuration

EDIT: can confirm setupFiles works with vitest 🎉

[dcbroad3]

Attempting to use the new vitest builder today, I encountered two limitations.

• I want the run to fail if coverage is insufficient, but I am unable to specify coverage threshold limits: https://vitest.dev/config/#coverage-thresholds
• I want Junit test results output to a file; while I am able to specify multiple reporters, I am unable to specify an outputFile for some reporters: https://vitest.dev/guide/reporters.html#combining-reporters, and the Junit results are just printed to the console.

I imagine that either including these as options in the builder config or a full vitest config file would address this.

[brandonroberts]

An option for coverage thresholds could be added to the schema/builder.

There's a PR for supporting the outputFile https://github.com/angular/angular-cli/pull/30682

I think the most common configurable items will be added to the unit-test builder over time.

If you need a fully configurable vitest.config.ts, using the AnalogJS Vite plugin for Angular along with the @analogjs/vitest-angular package is the more likely option.

[yogeshgadge]

The Angular team has traditionally not allowed any official means of supporting configuration outside of the angular.json though.

@brandonroberts wondering what advise does vcsode/IDE plugin developers (like vitest, jest, playwright) should take from this approach where the configs for test frameworks must be only read from angular.json.

[brandonroberts]

The Angular team has traditionally not allowed any official means of supporting configuration outside of the angular.json though.

@brandonroberts wondering what advise does vcsode/IDE plugin developers (like vitest, jest, playwright) should take from this approach where the configs for test frameworks must be only read from angular.json.

I'm not sure. Angular doesn't produce the configuration files necessary for the VSCode/IDE plugins are looking for to make this work. Special hooks would have to be made to support Angular conventions. Tools like Vite/Vitest are implementation details in this case.

It's a chicken/egg problem. Even if Angular produced the configuration files, the plugins run the tools directly, which is counter to what Angular does which is run the tools internally through the builders. There would need to be some sort of communication layer for Angular to communicate with these tools. I don't know if that's a goal on either side though.

[attilaolah]

I came here looking for a way to pass code coverage options to vitest, but apparently there is already a codeCoverageReporters option. Just putting it here, since I didn't find any documentation on it, not on https://angular.dev/guide/testing/code-coverage, but the schema is documented in @angular/build/src/builders/unit-test/schema.d.ts.

[italosll]

what is the proper way to use the vitest browser mode in an angular application? (whith the built-in experimental support)

i've tried this setup:

but, the Browser UI section of vitest doesnt display the rendered HTML nodes.

Expected:

Received:

Have tried with analogJS as well and the result is the same.

[brandonroberts]

@attilaolah that is expected as the page gets cleaned up after each test. If you write a failing test, you will see its output still there.

Vitest browser mode involves a separate API that has to be implemented to use the page and render utilities. https://vitest.dev/guide/browser/#examples