사용자 행동 기반 테스트 작성 - React로 시작하는 TDD 3편

Writing User Behavior-Based Tests - TDD with React Part 3

• 구현 기반 테스트 (나쁜 예)
  "state.count가 1이 되었는지 확인한다." (변수명이 바뀌면 테스트가 깨짐)
• 행동 기반 테스트 (좋은 예)
  "증가 버튼을 눌렀을 때, 화면에 숫자 1이 보이는지 확인한다." (코드가 바뀌어도 기능이 같으면 통과)

행동 기반 테스트

• getByRole
  가장 권장되는 방법입니다.
  button, heading, textbox 등 HTML 태그가 가진 본래의 역할을 기준으로 찾습니다.
• getByLabelText
  폼 입력창(Input)을 찾을 때 좋습니다.
  라벨과 연결된 입력을 찾습니다.
• getByPlaceholderText
  플레이스홀더 텍스트로 찾습니다.
• getByText
  화면에 보이는 텍스트 내용으로 찾습니다.
• getByTestId
  최후의 수단입니다.
  도저히 찾을 방법이 없을 때 data-testid 속성을 달아서 찾습니다.

1. 화면에 "현재 숫자: 0"이라는 텍스트가 보여야 한다.
2. "+"라고 적힌 버튼이 있어야 한다.
3. "+" 버튼을 클릭하면 숫자가 1로 증가해야 한다.

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
// Counter 컴포넌트는 아직 없지만 import 합니다 (에러 발생 예정)
import Counter from './Counter'; 
 
describe('Counter 컴포넌트 동작 테스트', () => {
  
  test('초기값은 0이며, + 버튼을 누르면 숫자가 1 증가한다', async () => {
    // 1. User Event 설정 (사용자의 동작을 시뮬레이션하는 객체)
    const user = userEvent.setup();
 
    // 2. 렌더링 (아직 컴포넌트가 없어서 여기서 빨간 줄이 뜹니다)
    render(<Counter />);
 
    // 3. 요소 찾기 (쿼리)
    // "현재 숫자: 0"이라는 텍스트가 있는지 확인
    const initialText = screen.getByText('현재 숫자: 0');
    // "+" 라는 이름을 가진 버튼(role=button) 찾기
    const incrementBtn = screen.getByRole('button', { name: '+' });
 
    // 4. 초기 상태 검증
    expect(initialText).toBeInTheDocument();
    expect(incrementBtn).toBeInTheDocument();
 
    // 5. 사용자 행동 (클릭)
    await user.click(incrementBtn);
 
    // 6. 결과 검증
    // 클릭 후에는 "현재 숫자: 1"이 화면에 보여야 함
    expect(screen.getByText('현재 숫자: 1')).toBeInTheDocument();
  });
});

• userEvent.setup()
  단순한 fireEvent보다 더 실제 브라우저 동작에 가까운 userEvent를 사용합니다.
• screen.getByRole('button',{ name: '+' })
  div나 class가 아니라, "이름이 +인 버튼"이라는 역할을 명확히 찾습니다.
• await user.click()
  사용자가 마우스를 클릭하는 동작을 비동기로 수행합니다.

npm test

테스트 결과

git clone https://github.com/PROMLEE/my-tdd-app.git
cd my-tdd-app
git checkout part3

• 관점의 전환
  내부 변수(State)가 아니라 화면에 보이는 것(UI)과 행동(Behavior)을 테스트합니다.
• 접근성 쿼리
  getByRole을 최우선으로 사용하여, HTML 구조가 바뀌어도 깨지지 않는 튼튼한 테스트를 만듭니다.
• 실패하는 테스트
  구현하기 전에 테스트를 먼저 작성하여 요구사항을 명확히 했습니다.

다음 시간에는 이 빨간색 에러를 초록색으로 바꾸는

4편. 테스트를 통과시키는 기본 컴포넌트 구현

을 진행하겠습니다.

• Common mistakes with React Testing Library↗
  RTL 사용 시 자주 범하는 실수들을 정리한 글입니다. 쿼리 우선순위 등에 대한 팁이 많습니다.
• About Queries↗
  다양한 쿼리 함수(getBy, queryBy, findBy)의 차이점을 설명하는 공식 문서입니다.