Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
alan-agius4 merged 1 commit intoangular:mainfromclydin:unit-test/vitest-initial
Apr 23, 2025

Conversation

clydin
Copy link
Member

@clydinclydin commentedApr 18, 2025
edited
Loading

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 thedev-server and requires abuildTarget 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 thetest target for a project is as follows:

"test": {    "builder": "@angular/build:unit-test",    "options": {        "tsConfig": "tsconfig.spec.json",        "buildTarget": "::development",        "runner": "vitest"    }}
Example of modified new app spec file
import { TestBed } from '@angular/core/testing';import { App } from './app';import { describe, test, beforeEach, afterEach, expect } from 'vitest';describe('App', () => {  beforeEach(async () => {    await TestBed.configureTestingModule({      imports: [App],    }).compileComponents();  });  afterEach(() => TestBed.resetTestingModule());  test('should create the app', () => {    const fixture = TestBed.createComponent(App);    const app = fixture.componentInstance;    expect(app).toBeTruthy();  });  test(`should have the 'vitest-example' title`, () => {    const fixture = TestBed.createComponent(App);    const app = fixture.componentInstance;    expect(app.title).toEqual('vitest-example');  });  test('should render title', () => {    const fixture = TestBed.createComponent(App);    fixture.detectChanges();    const compiled = fixture.nativeElement as HTMLElement;    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, vitest-example');  });});

jkrems, IgorSedov, muuvmuuv, ncamera, Rodrigo54, szendihorvathjozsef, mauriziocescon, ThomOrlo, Yberion, GregOnNet, and 19 more reacted with hooray emojiHyperLife1119, jkrems, artaommahe, niklas-wortmann, ncamera, Rodrigo54, sees985, GregOnNet, itea-dev, ccrutchley-mcm, and 9 more reacted with heart emojimuuvmuuv, ncamera, JosefBredereck, DebuggerDad, ThomOrlo, itea-dev, ccrutchley-mcm, LanderBeeuwsaert, bence-tamas-nemeth, nifiro, and 5 more reacted with rocket emojirubiesonthesky, ccrutchley-mcm, LanderBeeuwsaert, bence-tamas-nemeth, HymanZHAN, and mgechev reacted with eyes emoji
@angular-robotangular-robotbot added detected: featurePR contains a feature commit area: @angular/build labelsApr 18, 2025
@clydinclydinforce-pushed theunit-test/vitest-initial branch 2 times, most recently fromf9cea6f toaf08a63CompareApril 21, 2025 20:04
@clydinclydin marked this pull request as ready for reviewApril 21, 2025 20:28
@clydinclydin added the target: majorThis PR is targeted for the next major release labelApr 21, 2025
Copy link
Collaborator

@alan-agius4alan-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-testbuilder is available that initially uses vitest. This experimental systemis intended to provide support for investigation of future unit testingefforts within the Angular CLI. As this is experimental, no SemVer guaranteesare provided, the API and behavior may change, and there may be unexpectedbehavior. 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 alreadydefined for development. If differing option values are required for testing,an additional build target configuration specifically for testing can beused.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 supportedAn example configuration that would replace the `test` target for a projectis as follows:```"test": {    "builder": "@angular/build:unit-test",    "options": {        "tsConfig": "tsconfig.spec.json",        "buildTarget": "::development",        "runner": "vitest"    }}```
@clydinclydinforce-pushed theunit-test/vitest-initial branch fromaf08a63 to0e3a21cCompareApril 23, 2025 11:49
@alan-agius4alan-agius4 added the action: mergeThe PR is ready for merge by the caretaker labelApr 23, 2025
@alan-agius4alan-agius4 merged commit12def3a intoangular:mainApr 23, 2025
30 of 31 checks passed
@clydinclydin deleted the unit-test/vitest-initial branchApril 23, 2025 13:34
@angular-automatic-lock-bot

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about ourautomatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-botangular-automatic-lock-botbot locked and limited conversation to collaboratorsMay 24, 2025
Sign up for freeto subscribe to this conversation on GitHub. Already have an account?Sign in.
Reviewers

@alan-agius4alan-agius4alan-agius4 approved these changes

Assignees
No one assigned
Labels
action: mergeThe PR is ready for merge by the caretakerarea: @angular/builddetected: featurePR contains a feature committarget: majorThis PR is targeted for the next major release
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

2 participants
@clydin@alan-agius4

[8]ページ先頭

©2009-2025 Movatter.jp