Vite 네이티브 테스트 환경이 제공하는 개발 속도의 상승

프런트엔드 테스트라고 하면 오랜 세월 Jest가 주류였지만, 설정의 복잡성이나 오버헤드가 과제였습니다. Vite 설정을 공유하는 ‘Vitest’와 ‘React Testing Library’를 결합하면 폭속 테스트 환경을 얻을 수 있습니다.

보수성이 높고 깨지기 어려운 테스트 스위트를 구축하기 위한 실전 원칙을 정리했습니다.

원칙: ‘구현 세부사항’ 대신 ‘사용자 동작’ 테스트

컴포넌트의 내부 상태를 직접 테스트하면 리팩토링 할 때마다 부서지는 취약한 테스트가됩니다. 사용자에게 보이는 화면의 동작을 검증하는 것이 기본입니다.

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { LoginForm } from './LoginForm';

test('入力からログイン完了までのフローを検証', async () => {
  const user = userEvent.setup();
  render(<LoginForm />);

  await user.type(screen.getByLabelText('メールアドレス'), 'test@example.com');
  await user.click(screen.getByRole('button', { name: 'ログイン' }));

  expect(await screen.findByText('ようこそ')).toBeInTheDocument();
});

비동기 업데이트의 함정 : 쿼리 함수 사용

• getBy*: 요소가 “지금 존재한다"는 것을 동기 검증. 존재하지 않는 경우 즉시 오류.
• findBy*: API 취득 등 「비동기로 늦게 표시되는」요소를 대기(Promise를 돌려준다).
• queryBy*: 요소가 “화면에 존재하지 않는 것"을 어서트 할 때에 사용 (null 를 돌려준다).

CI 실행 시간을 줄이는 병렬화 포인트

Vitest는 기본적으로 스레드 병렬 실행을 수행합니다. DOM 조작을 포함한 테스트에서는 테스트 케이스마다 독립성을 유지하도록 afterEach 로 적절하게 모의를 리셋트 해, 테스트 병렬수를 극대화해 CI 코스트를 억제합시다.