你如何测试 Angular 组件和服务？

Question

Accepted Answer

Angular 附带完整的测试设置（默认为 Jasmine + Karma，尽管许多团队使用 Jest）。它提供 **`TestBed`** 来配置测试模块，并使用其依赖项实例化组件/服务——利用 DI 注入 mocks。

## 测试服务（最简单）

```ts
describe("UserService", () => {
  let service: UserService;
  let httpMock: HttpTestingController;

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule], // mock HttpClient
      providers: [UserService],
    });
    service = TestBed.inject(UserService);
    httpMock = TestBed.inject(HttpTestingController);
  });

it("fetches users", () => {
    service.getUsers().subscribe(users => expect(users.length).toBe(2));
    const req = httpMock.expectOne("/api/users"); // assert the request was made
    req.flush([{ id: 1 }, { id: 2 }]);             // provide a fake response
  });
});
```

`HttpClientTestingModule` + `HttpTestingController` 让你断言请求并提供虚假响应，而无需访问真实服务器。

## 测试组件

```ts
describe("CounterComponent", () => {
  let fixture: ComponentFixture<CounterComponent>;
  let component: CounterComponent;

beforeEach(() => {
    TestBed.configureTestingModule({ imports: [CounterComponent] }); // standalone
    fixture = TestBed.createComponent(CounterComponent);
    component = fixture.componentInstance;
    fixture.detectChanges(); // trigger initial change detection
  });

it("increments on click", () => {
    const button = fixture.nativeElement.querySelector("button");
    button.click();
    fixture.detectChanges();                     // update the view
    expect(component.count).toBe(1);
    expect(button.textContent).toContain("1");   // assert the rendered DOM
  });
});
```

`ComponentFixture` 提供对组件实例 **和** 其渲染 DOM 的访问；你必须在交互后调用 `fixture.detectChanges()` 来运行变更检测。

## 通过 DI mock 依赖项

```ts
TestBed.configureTestingModule({
  providers: [{ provide: AuthService, useValue: mockAuthService }], // inject a fake
});
```

Angular 的 DI 使 mocking 变得微不足道——为任何依赖项提供虚假实现。

## 异步测试

```ts
it("loads async", fakeAsync(() => {
  component.load();
  tick();                  // simulate passage of time / flush microtasks
  fixture.detectChanges();
  expect(component.data).toBeDefined();
}));
```

`fakeAsync`/`tick`（或 `waitForAsync`）确定性地控制异步时序。

## 测试级别

```text
Unit:        services, pipes, isolated component logic (fast, most numerous)
Integration: component + template + child components via TestBed
E2E:         full user flows (Cypress, Playwright) — separate from unit tests
```

## 为什么这很重要

测试是 Angular 中的一流关注点，其 DI 架构使其特别易于测试——你为任何依赖项注入 mocks。

了解 `TestBed`（configure + inject）、`ComponentFixture`（instance + DOM + `detectChanges`）、用于 HTTP 的 `HttpClientTestingModule` 和异步 helpers（`fakeAsync`/`tick`）可以编写可靠的单元和集成测试——这对于 Angular 构建的大型、长期企业应用程序至关重要。