angular-testing

Angular 测试

版本： Angular 21（2025） 标签： 测试、Jasmine、Karma、Vitest、Cypress、Jest

参考资料： 测试指南 • 测试 API • Angular 博客

API 变更

本节介绍近期特定版本的 API 变更。

• 新增：默认使用 Vitest — Angular 21+ 使用 Vitest 取代 Jasmine/Karma 来源

• 新增：模板覆盖率 — 覆盖率报告现在包含 HTML 模板 来源

• 新增：组件输入测试 — 使用 Component输入 直接测试组件输入

• 新增：用于测试的函数式拦截器 — 更轻松地测试 HTTP 拦截器

• 已弃用：Karma 测试运行器 — 迁移到 Vitest，以适配现代 Angular

最佳实践

• 使用 TestBed 进行组件测试

import { TestBed } from '@angular/core/testing';
import { MyComponent } from './my.component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [MyComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

• 使用 AAA 模式（准备-执行-断言）

it('should calculate total correctly', () => {
  // Arrange
  const service = new CalculatorService();
  
  // Act
  const result = service.add(2, 3);
  
  // Assert
  expect(result).toBe(5);
});

• 使用 fakeAsync 和 tick 处理异步操作

import { fakeAsync, tick } from '@angular/core/testing';

it('should fetch data after delay', fakeAsync(() => {
  service.getData();
  tick(1000);
  expect(component.data).toBeTruthy();
}));

• 使用间谍进行模拟

it('should call service', () => {
  spyOn(service, 'getData').and.returnValue(of({ name: 'Test' }));
  
  component.loadData();
  
  expect(service.getData).toHaveBeenCalled();
});

• 使用 by.css 查询 DOM 元素

import { By } from '@angular/platform-browser';

it('should display title', () => {
  fixture.detectChanges();
  const el = fixture.debugElement.query(By.css('.title'));
  expect(el.nativeElement.textContent).toBe('Hello');
});

• 测试行为，而非实现

// ❌ Bad - tests implementation details
expect(component['privateMethod']).toHaveBeenCalled();

// ✅ Good - tests behavior
expect(fixture.nativeElement.querySelector('.result')).toContain('expected');

• 使用 provideHttpClient 进行 HTTP 测试

TestBed.configureTestingModule({
  providers: [
    provideHttpClient(withInterceptors([authInterceptor]))
  ]
});

• 使用模拟服务处理依赖项

const mockAuthService = {
  isAuthenticated: jasmine.createSpy().and.returnValue(true),
  getToken: jasmine.createSpy().and.returnValue('fake-token')
};

TestBed.configureTestingModule({
  providers: [{ provide: AuthService, useValue: mockAuthService }]
});

• 测试表单验证

it('should show error for invalid email', () => {
  component.form.controls.email.setValue('invalid');
  component.form.controls.email.markAsTouched();
  
  fixture.detectChanges();
  
  expect(fixture.nativeElement.querySelector('.error')).toBeTruthy();
});

• 适当地使用 detectChanges

// After changing component properties
component.value = 'new value';
fixture.detectChanges();

// For async operations
fixture.detectChanges();
await fixture.whenStable();
fixture.detectChanges();