用途:该技能面向 Angular v21+ 应用,提供编写单元测试与集成测试的实践指引,聚焦 signal-based 组件与现代测试模式,可选择 Vitest(推荐)或 Jasmine。
主要能力:
- 测试框架支持:介绍 Angular v20+ 通过 @angular/build 包原生支持 Vitest,以及 Jasmine 的 spy 用法。
- 组件测试:使用 TestBed.configureTestingModule 与 compileComponents 配置测试模块,覆盖 standalone 组件创建、模板渲染断言、OnPush 组件通过 fixture.componentRef.setInput 更新 signal 输入。
- Signal 测试:直接测试 signal 与 computed 的变化,以及组件内 signal、computed 计算逻辑与模板渲染。
- 服务测试:通过 TestBed.inject 注入服务,测试基于 signal 的状态服务及带 HttpClient 依赖的服务。
- HTTP 测试:使用 provideHttpClient、provideHttpClientTesting 与 HttpTestingController,断言请求方法,并用 req.flush 返回模拟数据,afterEach 中调用 httpMock.verify()。
- 模拟依赖:Vitest 使用 vi.fn()(含 mockReturnValue、clearAllMocks),Jasmine 使用 jasmine.createSpyObj,并展示模拟 signal-based 服务的方式。
- 输入输出:对 input.required 与 output 使用 setInput 赋值、订阅 output 并触发点击验证事件。
- 异步测试:使用 fakeAsync、tick、flush 测试防抖,使用 waitForAsync 与 whenStable 等待异步完成。
- httpResource 测试:对加载中状态与返回数据后的渲染进行断言。
- 框架对比与迁移:给出 Vitest 与 Jasmine/Karma 在速度、watch 模式、模拟、断言、UI、配置上的对比,以及 spy 迁移示例。
使用方式:
- 安装依赖:npm install -D vitest jsdom。
- 在 angular.json 的 test architect 中配置 builder 为 @angular/build:unit-test,并指定 tsConfig 与 buildTarget。
- 在 tsconfig.spec.json 中设置 types 为 vitest/globals,include 匹配 src/**/*.spec.ts。
- 运行测试:ng test;watch 模式 ng test --watch;覆盖率 ng test --code-coverage。
- 按资料中的示例编写 TestBed 测试、signal 测试、HTTP 测试与异步测试。
适用场景:为 Angular v21+ 应用编写组件、服务与 HTTP 相关单元及集成测试;迁移现有 Jasmine 测试到 Vitest;测试 signal、computed、OnPush 与 httpResource 等现代 Angular 特性。
限制:资料未提供 Vitest 与 Jasmine 在特定项目中的完整迁移步骤;未说明除 @angular/build 外其它构建工具的兼容性;未提供性能基准、版本要求细节及测试覆盖率的配置详解;更高级的测试模式仅指向 references/testing-patterns.md,正文未展开。产品定价、平台支持等信息暂未提供。