Angular 컴포넌트와 서비스를 어떻게 테스트하나요?

Question

Accepted Answer

Angular는 완전한 테스트 설정을 제공합니다(기본은 Jasmine + Karma지만, 많은 팀이 Jest를 사용합니다). 테스트 모듈을 구성하고 의존성과 함께 컴포넌트/서비스를 인스턴스화하는 **`TestBed`**를 제공하며, DI를 활용하여 mock을 주입합니다.

## 서비스 테스트 (가장 간단함)

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

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule], // HttpClient를 mock
      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"); // 요청이 발생했는지 단언
    req.flush([{ id: 1 }, { id: 2 }]);             // 가짜 응답 제공
  });
});
```

`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(); // 초기 change detection 트리거
  });

it("increments on click", () => {
    const button = fixture.nativeElement.querySelector("button");
    button.click();
    fixture.detectChanges();                     // 뷰 업데이트
    expect(component.count).toBe(1);
    expect(button.textContent).toContain("1");   // 렌더링된 DOM 단언
  });
});
```

`ComponentFixture`는 컴포넌트 인스턴스 **그리고** 렌더링된 DOM에 접근하게 해줍니다. 상호작용 후 change detection을 실행하려면 `fixture.detectChanges()`를 호출해야 합니다.

## DI를 통한 의존성 mock

```ts
TestBed.configureTestingModule({
  providers: [{ provide: AuthService, useValue: mockAuthService }], // 가짜 주입
});
```

Angular의 DI는 mocking을 간단하게 만듭니다. 어떤 의존성이든 가짜 구현을 제공합니다.

## 비동기 테스트

```ts
it("loads async", fakeAsync(() => {
  component.load();
  tick();                  // 시간 경과 / 마이크로태스크 플러시를 시뮬레이션
  fixture.detectChanges();
  expect(component.data).toBeDefined();
}));
```

`fakeAsync`/`tick`(또는 `waitForAsync`)은 비동기 타이밍을 결정적으로 제어합니다.

## 테스트 수준

```text
단위:        서비스, pipe, 격리된 컴포넌트 로직 (빠름, 가장 많음)
통합:        TestBed를 통한 컴포넌트 + 템플릿 + 자식 컴포넌트
E2E:         전체 사용자 흐름 (Cypress, Playwright) — 단위 테스트와 분리
```

## 왜 중요한가

테스트는 Angular에서 일급 관심사이며, 그 DI 아키텍처는 특히 테스트하기 좋게 만듭니다. 어떤 의존성이든 mock을 주입합니다.

`TestBed`(구성 + 주입), `ComponentFixture`(인스턴스 + DOM + `detectChanges`), HTTP를 위한 `HttpClientTestingModule`, 그리고 비동기 헬퍼(`fakeAsync`/`tick`)를 아는 것은 신뢰할 수 있는 단위 및 통합 테스트 작성을 다룹니다. Angular가 만들어진 대규모이며 오래 유지되는 엔터프라이즈 앱에 필수적입니다.