테스트 유틸리티 API

이 문서에서는 유용한 Angular 테스트 기능을 알아봅니다.

Angular 테스트 유틸리티에는 TestBed, ComponentFixture, 테스트 환경을 제어하는 몇 가지 함수가 있습니다. TestBed와 ComponentFixture 클래스는 각각 별도로 설명합니다.

독립적으로 사용하는 함수를 활용도가 높은 순서로 정리하면 다음과 같습니다.

복잡한 비동기 시나리오를 처리하거나 기존 Zone.js 기반 애플리케이션을 테스트하려면 Zone.js 테스트 유틸리티 문서를 참고하세요.

TestBed 클래스 요약

TestBed는 Angular의 주요 테스트 유틸리티 중 하나입니다. API가 다양해서 조금씩 살펴보기 전에는 어렵게 느껴질 수 있습니다. 전체 API를 익히기 전에 이 가이드 앞부분에서 기초부터 알아보세요.

configureTestingModule에 전달하는 모듈 정의는 @NgModule 메타데이터 프로퍼티의 일부로 구성됩니다.

type TestModuleMetadata = {
  providers?: any[];
  declarations?: any[];
  imports?: any[];
  schemas?: Array<SchemaMetadata | any[]>;
};

각 재정의 메서드는 MetadataOverride<T>를 받습니다. 여기서 T는 해당 메서드에 맞는 메타데이터 타입으로, @NgModule, @Component, @Directive, @Pipe의 인자 타입입니다.

type MetadataOverride<T> = {
  add?: Partial<T>;
  remove?: Partial<T>;
  set?: Partial<T>;
};

TestBed API는 전역 TestBed 인스턴스를 수정하거나 참조하는 정적 클래스 메서드로 구성됩니다.

내부적으로 모든 정적 메서드는 현재 실행 중인 TestBed 인스턴스의 메서드를 호출합니다. 이 인스턴스는 getTestBed() 함수로도 가져올 수 있습니다.

각 테스트가 새로운 상태에서 시작하도록 beforeEach() 안에서 TestBed 메서드를 실행하세요.

중요한 정적 메서드를 활용도가 높은 순서로 정리하면 다음과 같습니다.

일부 TestBed 인스턴스 메서드는 TestBed 클래스 의 정적 메서드로 제공하지 않습니다. 이런 메서드는 거의 사용할 일이 없습니다.

ComponentFixture

TestBed.createComponent<T>는 T 컴포넌트의 인스턴스를 생성하고 해당 컴포넌트에 맞는 타입이 지정된 ComponentFixture를 반환합니다.

ComponentFixture의 프로퍼티와 메서드로 컴포넌트, 컴포넌트를 나타내는 DOM, 관련 Angular 환경에 접근할 수 있습니다.

ComponentFixture 프로퍼티

테스트에 중요한 프로퍼티를 활용도가 높은 순서로 정리하면 다음과 같습니다.

ComponentFixture 메서드

픽스처 메서드는 Angular가 컴포넌트 트리에 특정 작업을 실행하게 합니다. 사용자 동작을 재현한 뒤 이에 반응하는 Angular 동작을 실행하려면 이 메서드들을 사용하세요.

테스트에 유용한 메서드는 다음과 같습니다.

DebugElement

DebugElement로 컴포넌트를 나타내는 DOM의 주요 정보를 확인할 수 있습니다.

fixture.debugElement가 반환하는 테스트 최상위 컴포넌트의 DebugElement에서 픽스처의 전체 엘리먼트 및 컴포넌트 하위 트리를 순회하거나 조회할 수 있습니다.

테스트에 유용한 DebugElement 멤버를 활용도가 높은 순서로 정리하면 다음과 같습니다.

DebugElement.query(predicate)와 DebugElement.queryAll(predicate) 메서드는 시작 엘리먼트의 하위 트리에서 일치하는 DebugElement를 필터링하는 조건식을 받습니다.

조건식은 DebugElement를 받고 참으로 평가되는 값을 반환하는 메서드이면 됩니다. 다음 예제는 "content"라는 템플릿 지역 변수 참조가 있는 모든 DebugElement를 찾습니다.

// #content 참조가 있는 DebugElement를 필터링합니다
const contentRefs = el.queryAll((de) => de.references['content']);

Angular By 클래스는 자주 사용하는 조건식을 위한 정적 메서드 세 개를 제공합니다.

// CSS 셀렉터나 디렉티브로 DebugElement를 찾을 수 있습니다
const h2 = fixture.debugElement.query(By.css('h2'));
const directive = fixture.debugElement.query(By.directive(Highlight));