어설션 API

Vitest는 @testing-library/jest-dom 라이브러리를 번들로 포함하여 다양한 DOM 어설션을 기본적으로 제공합니다. 자세한 내용은 jest-dom의 README를 참고하십시오.

TypeScript를 사용하거나 expect에서 올바른 타입 힌트를 얻으려면 사용하는 제공자에 따라 tsconfig에 @vitest/browser/providers/playwright 또는 @vitest/browser/providers/webdriverio를 지정해야 합니다. 기본 preview 제공자를 사용하는 경우 대신 @vitest/browser/matchers를 지정할 수 있습니다.

previewplaywrightwebdriverio

json

{
  "compilerOptions": {
    "types": ["@vitest/browser/matchers"]
  }
}

json

{
  "compilerOptions": {
    "types": ["@vitest/browser/providers/playwright"]
  }
}

json

{
  "compilerOptions": {
    "types": ["@vitest/browser/providers/webdriverio"]
  }
}

브라우저에서의 테스트는 비동기적 특성 때문에 일관적이지 않게 실패할 수 있습니다. 이 때문에 조건이 지연되더라도 (예: 타임아웃, 네트워크 요청 또는 애니메이션) 어설션이 성공하도록 보장하는 방법이 중요합니다. 이를 위해 Vitest는 expect.poll 및 expect.element API를 통해 기본적으로 재시도 가능한 어설션을 제공합니다.

import { expect, test } from 'vitest';
import { page } from '@vitest/browser/context';

test('error banner is rendered', async () => {
  triggerError();

  // @testing-library는 재시도 기능이 내장된 쿼리를 제공합니다.
  // 배너가 렌더링될 때까지 계속 찾습니다.
  const banner = page.getByRole('alert', {
    name: /error/i,
  });

  // Vitest는 재시도 기능이 내장된 `expect.element`를 제공합니다.
  // `element.textContent`가 "Error!"가 될 때까지 계속 확인합니다.
  await expect.element(banner).toHaveTextContent('Error!');
});

TIP

expect.element는 expect.poll(() => element)의 약어이며 정확히 동일하게 작동합니다.

toHaveTextContent 및 기타 모든 @testing-library/jest-dom 어설션은 내장된 재시도 기능 없이도 일반 expect에서 사용 가능합니다.

// .textContent가 'Error!'가 아니면 즉시 실패합니다.
expect(banner).toHaveTextContent('Error!');

어설션 API ​

어설션 API