Jest Preview용 Angular CLI 예제 - Jest용 시각적 디버거

최근에 작성자인 .

농담 미리보기 농담 미리보기

Jest Preview는 Jest 컴포넌트 테스트를 위한 시각적 디버거입니다. 프리뷰 서버를 실행하고 옵션이 설정되었을 때 실패한 테스트의 렌더링된 DOM을 표시하거나 autoPreview 함수를 사용하여 디버깅을 위해 명시적으로 표시한 테스트를 표시합니다. 예를 들면 다음과 같습니다.

// counter.component.spec.ts
import { render, screen } from '@testing-library/angular';
import userEvent from '@testing-library/user-event';
import preview from 'jest-preview';
import { CounterComponent } from './counter.component';
import './counter.component.css'; 

describe(CounterComponent.name, () => {
  it('initially has a zero count', async () => {
    const user = userEvent.setup();
    await render(CounterComponent);

    // Open http://localhost:3336 to see preview
    // Require to run `jest-preview` server before
    preview.debug(); // 👈

    expect(await screen.findByTestId('count')).toContainHTML('0');
  });
});

debug

Angular CLI 통합

은 일반적인 The Angular CLI guide for Jest Preview 및 installation 명령어를 참조하며 Angular 관련 구성 및 사용 명령어를 설명합니다.

개선의 여지가 있지만 가이드에 해결 방법을 문서화했습니다. Jest 미리 보기는 현재 구성 요소 테스트에서 자동으로 변환styleUrls하거나 인라인 구성 요소 스타일을 지원하거나 애플리케이션 전체 스타일시트를 자동으로 가져올 수 없습니다. 이 때문에 테스트 중인 구성 요소에서 사용하는 외부 스타일시트와 일치하도록 테스트에 스타일시트 가져오기 문을 추가해야 합니다.

예를 들어 다음 카운터 구성 요소가 있다고 가정합니다.

// counter.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  styleUrls: ['./counter.component.css'], // 👈
  template: `
    <button type="button" (click)="onCount()">
      The count is:
      <div data-testid="count">{{ count }}</div>
    </button>
  `,
})
export class CounterComponent {
  count = 0;

  onCount(): void {
    this.count += 1;
  }
}

구성 요소 테스트에서 ./counter.component.css에 대한 import 문을 추가해야 합니다.

// counter.component.spec.ts
import { render, screen } from '@testing-library/angular';
import userEvent from '@testing-library/user-event';
import preview from 'jest-preview';
import { CounterComponent } from './counter.component';
import './counter.component.css'; // 👈

describe(CounterComponent.name, () => {
  it('displays multiple counts', async () => {
    const user = userEvent.setup();
    await render(CounterComponent);

    await user.click(await screen.findByRole('button'));
    await user.click(await screen.findByRole('button'));

    // Open http://localhost:3336 to see preview
    // Require to run `jest-preview` server before
    preview.debug();

    expect(await screen.findByTestId('count')).toContainHTML('2');
  });
});

usage