Angular Academy · 강의

Signals와 비동기 코드 테스트

반응형 동작과 비동기 동작을 테스트합니다.

Signals와 비동기 코드 테스트은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

비동기 처리가 테스트에서 가장 어렵습니다

실제 컴포넌트는 타이머, 프로미스, HTTP, 디바운스된 입력과 같은 비동기 작업을 수행합니다. 비동기 작업이 완료된 후 검증이 실행되도록 테스트에서 시간을 제어해야 합니다. Angular는 결정적인 시간 제어를 위해 fakeAsync, tick, flush를 제공합니다.

신호 테스트하기

signal은 함수처럼 읽습니다. 테스트 방법은 간단합니다. 신호를 호출하고 값을 확인한 다음, 값을 업데이트하고 다시 확인합니다.

it('increments the count signal', () => {
  const fixture = TestBed.createComponent(CounterComponent);
  const c = fixture.componentInstance;
  expect(c.count()).toBe(0);
  c.increment();
  expect(c.count()).toBe(1);
});

계산된 신호는 자동으로 업데이트됩니다

computed는 의존성이 변경되면 다시 계산됩니다. 테스트에서는 원본 신호를 변경한 다음 계산된 신호를 읽으면 됩니다. 수동으로 다시 계산할 필요가 없습니다.

expect(c.doubled()).toBe(0);
c.count.set(5);
expect(c.doubled()).toBe(10); // computed(() => c.count() * 2)

신호와 DOM

템플릿에 반영된 신호의 변경을 확인하려면 신호를 업데이트한 후 다른 상태와 마찬가지로 detectChanges()를 호출합니다.

c.count.set(3);
fixture.detectChanges();
expect(fixture.nativeElement.textContent).toContain('3');

fakeAsync 소개

테스트를 fakeAsync로 감싸 가상 시간 영역에 진입합니다. 타이머와 마이크로태스크는 바로 실행되지 않고 대기열에 들어가며, 이를 수동으로 진행합니다. 따라서 비동기 테스트를 동기적이고 안정적으로 만들 수 있습니다.

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

it('loads after delay', fakeAsync(() => {
  // timers are now under your control
}));

tick으로 시간 진행하기

tick(ms)은 가상 시계를 앞으로 진행하며, 해당 시간 범위 안에 예약된 타이머를 실행합니다.

it('fires after 1s', fakeAsync(() => {
  let done = false;
  setTimeout(() => (done = true), 1000);
  expect(done).toBe(false);
  tick(1000);
  expect(done).toBe(true);
}));

대기 중인 모든 타이머에 flush 사용하기

정확한 지연 시간을 모를 때는 flush()가 대기열이 빌 때까지 대기 중인 모든 매크로태스크를 처리합니다.

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

it('completes debounced search', fakeAsync(() => {
  component.search('ang');
  flush(); // run all timers (e.g. debounceTime)
  expect(component.results().length).toBeGreaterThan(0);
}));

fakeAsync로 프로미스 테스트하기

프로미스는 마이크로태스크로 처리됩니다. fakeAsync 안에서 검증하기 전에 flushMicrotasks()(또는 tick())를 호출해 프로미스를 완료합니다.

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

it('resolves promise', fakeAsync(() => {
  let v: number | undefined;
  Promise.resolve(42).then((n) => (v = n));
  flushMicrotasks();
  expect(v).toBe(42);
}));

async / waitForAsync 도우미

시간을 제어하지 않고 실제 비동기 작업을 기다려야 하는 테스트에서는 본문을 waitForAsync로 감싸고 fixture.whenStable()을 사용합니다.

import { waitForAsync } from '@angular/core/testing';

it('settles', waitForAsync(() => {
  fixture.detectChanges();
  fixture.whenStable().then(() => {
    expect(fixture.componentInstance.ready()).toBe(true);
  });
}));

effect() 테스트하기

effect는 자신이 읽는 신호가 변경된 후 비동기적으로 실행됩니다. 결과를 확인하려면 변경 감지를 실행하거나 flush하여 effect를 실행한 다음 부작용을 검증합니다.

c.theme.set('dark');
fixture.detectChanges(); // effect runs
expect(document.body.classList.contains('dark')).toBe(true);

흔한 문제: 남아 있는 타이머

fakeAsync 테스트가 타이머가 대기 중인 상태로 끝나면 Angular에서 오류를 발생시킵니다. 테스트가 끝날 때 가상 시계가 비어 있도록 항상 tick/flush를 실행하거나 ngOnDestroy에서 반복 타이머를 정리해야 합니다.

빠른 확인

지연 시간을 알고 있을 때 알맞은 도구를 선택하세요.

복습

신호는 간단한 함수처럼 테스트합니다(읽으려면 호출하고, 업데이트하려면 set을 사용하며, DOM에는 detectChanges를 사용합니다). 비동기 작업에서는 fakeAsync가 가상 시계를 제공하고, tick으로 시간을 진행하며, flush로 대기열을 비우고, flushMicrotasks로 프로미스를 완료합니다. 타이머를 대기 상태로 남겨 두지 마세요.

자주 묻는 질문

“Signals와 비동기 코드 테스트” 강의는 무료인가요?

네 — “Signals와 비동기 코드 테스트” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Signals와 비동기 코드 테스트”에서 뭘 배우나요?

반응형 동작과 비동기 동작을 테스트합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Angular Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“Signals와 비동기 코드 테스트” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Angular Academy(으)로 돌아가기