[angular] 테스트 구성

26 Dec 2023

angular

Angular는 테스트하는 데 큰 도움을 주는 여러 가지 도구와 기능을 제공합니다. 이 글에서는 Angular 애플리케이션을 테스트하기 위한 구성 방법에 대해 알아보겠습니다.

테스트 환경 구성

Angular 프로젝트에서 Jasmine와 Karma를 이용하여 테스트할 수 있습니다.

먼저, 아래와 같이 Jasmine과 Karma를 프로젝트에 설치합니다.

npm install jasmine karma karma-jasmine jasmine-core karma-chrome-launcher --save-dev

그리고 test.ts 파일을 생성하여 Jasmine 환경을 설정합니다. 이 파일은 테스트 모듈을 초기화하고 실행하는 역할을 합니다.

import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);

컴포넌트 테스트

컴포넌트를 테스트하려면 TestBed를 사용하여 컴포넌트를 초기화하고 테스트할 수 있습니다. 아래 예시는 AppComponent를 테스트하는 방법을 보여줍니다.

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';

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

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent]
    });

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

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

서비스 테스트

서비스를 테스트하는 방법은 간단합니다. 서비스를 TestBed에 등록하고 해당 서비스를 주입받아 테스트하면 됩니다.

import { TestBed } from '@angular/core/testing';
import { DataService } from './data.service';

describe('DataService', () => {
  let service: DataService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [DataService]
    });
    service = TestBed.inject(DataService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });
});

Angular 애플리케이션을 테스트하기 위한 기본적인 구성 방법에 대해 알아보았습니다. 추가적으로, Protractor를 이용하여 End-to-End 테스트도 수행할 수 있습니다.

더 많은 정보는 Angular Testing Guide에서 확인할 수 있습니다.