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

Merged
merged 1 commit into from
Apr 23, 2025

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

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
@clydin clydin force-pushed the unit-test/vitest-initial branch 2 times, most recently from f9cea6f to af08a63 Compare April 21, 2025 20:04
@clydin clydin removed the state: WIP label Apr 21, 2025
@clydin clydin marked this pull request as ready for review April 21, 2025 20:28
@clydin clydin added the target: major This PR is targeted for the next major release label Apr 21, 2025
@clydin clydin requested a review from alan-agius4 April 22, 2025 14:12
Copy link
Collaborator

@alan-agius4 alan-agius4 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall looks good, just some minor things.

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

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"
    }
}
```
@clydin clydin force-pushed the unit-test/vitest-initial branch from af08a63 to 0e3a21c Compare April 23, 2025 11:49
@alan-agius4 alan-agius4 added the action: merge The PR is ready for merge by the caretaker label Apr 23, 2025
@alan-agius4 alan-agius4 merged commit 12def3a into angular:main Apr 23, 2025
30 of 31 checks passed
@clydin clydin deleted the unit-test/vitest-initial branch April 23, 2025 13:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
action: merge The PR is ready for merge by the caretaker area: @angular/build detected: feature PR contains a feature commit target: major This PR is targeted for the next major release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants