Skip to content

feat(@angular/build): add experimental vitest unit-testing support #30130

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.

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

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

clydin
Copy link
Member

@clydin clydin commented Apr 18, 2025

When using the application build system via the @angular/build package (default for new projects starting in v20), a new experimental unit-test builder is available that initially uses vitest. This experimental system is intended to provide support for investigation of future unit testing efforts within the Angular CLI. As this is experimental, no SemVer guarantees are provided, the API and behavior may change, and there may be unexpected behavior. Available test runners may be added or removed as well.

The setup is somewhat different than the previous unit-testing builders. It uses a similar mechanism to that of the dev-server and requires a buildTarget option. This allows the code building aspects of the unit-testing process to leverage pre-existing option values that are already defined for development. If differing option values are required for testing, an additional build target configuration specifically for testing can be used.

The current vitest support has multiple caveats including but not limited to:

  • No watch support
  • jsdom based testing only (jsdom must be installed in the project)
  • Custom vitest configuration is not supported
  • Code coverage is not yet available
  • Reporter customization is not yet available

An example configuration that would replace the test target for a project is as follows:

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

When using the application build system via the `@angular/build` package
(default for new projects starting in v20), a new experimental unit-test
builder is available that initially uses vitest. This experimental system
is intended to provide support for investigation of future unit testing
efforts within the Angular CLI. As this is experimental, no SemVer guarantees
are provided, the API and behavior may change, and there may be unexpected
behavior. Available test runners may be added or removed as well.

The setup is somewhat different than the previous unit-testing builders.
It uses a similar mechanism to that of the `dev-server` and requires a
`buildTarget` option. This allows the code building aspects of the unit-
testing process to leverage pre-existing option values that are already
defined for development. If differing option values are required for testing,
an additional build target configuration specifically for testing can be
used.

The current vitest support has multiple caveats including but not limited to:

* No watch support
* `jsdom` based testing only (`jsdom` must be installed in the project)
* Custom vitest configuration is not supported
* Code coverage is not yet available
* Reporter customization is not yet available

An example configuration that would replace the `test` target for a project
is as follows:
```
"test": {
    "builder": "@angular/build:unit-test",
    "options": {
        "tsConfig": "tsconfig.spec.json",
        "buildTarget": "::development",
        "runner": "vitest"
    }
}
```
@angular-robot angular-robot bot added detected: feature PR contains a feature commit area: @angular/build labels Apr 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant