React 환경에서의 TDD 개요 - React로 시작하는 TDD 1편

Overview of TDD in React Environment - TDD with React Part 1

컴포넌트를 튼튼하게 만드는 방법

• 사용자 행동 검증
  "로그인 버튼을 눌렀을 때, 로딩 화면이 뜨고 메인 페이지로 이동하는가?"와 같은 시나리오를 검증합니다.
• 비즈니스 로직 확인
  "장바구니에 담은 상품 가격의 합계가 10% 할인이 적용되어 계산되는가?" 같은 계산 로직을 확인합니다.
• 회귀 테스트 (Regression Test)
  새로운 기능을 추가했을 때, 기존에 잘 되던 기능(예: 회원가입)이 망가지지 않았는지 자동으로 확인해 줍니다.

// 이 테스트만 봐도 Button 컴포넌트의 주 사용법을 알 수 있습니다.
test('클릭하면 onClick 함수가 실행된다', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>저장</Button>);
  
  fireEvent.click(screen.getByText('저장'));
  
  expect(handleClick).toHaveBeenCalledTimes(1);
});

• 테스트해야 할 것 (O)
  • 사용자가 버튼을 클릭했을 때 일어나는 일.
  • 폼(Form)에 텍스트를 입력했을 때의 값 변화.
  • 에러가 발생했을 때 에러 메시지가 화면에 뜨는지 여부.
• 테스트하지 말아야 할 것 (X)
  • 컴포넌트의 내부 state 이름이 isVisible인지 show인지.
  • React
    프레임워크 자체가 잘 동작하는지 (useState가 잘 되는지는
    React
    팀이 테스트합니다).
  • 단순히 스타일(CSS)이 적용되었는지 (이것은 시각적 테스트 도구의 영역입니다).

이미지 제안: [빙산의 일각 그림. 물 위(사용자가 보는 화면/행동)는 테스트 대상, 물 아래(내부 변수/구현)는 테스트 제외]

• Jest
  테스트를 실행하고 결과를 알려주는
  테스트 러너
  입니다. (백엔드의 JUnit과 비슷합니다.)
• React Testing Library (RTL)
  React
  컴포넌트를 가상으로 렌더링하고, 사용자의 행동(클릭, 입력)을 흉내 내는 도구입니다.
• MSW (Mock Service Worker)
  네트워크 요청을 가로채서 가짜 데이터(Mock)를 응답해 주는 도구입니다.

다음 시간에는 실제로 프로젝트를 생성하고,

Jest

와

React Testing Library

를 설정하여 첫 번째 테스트 환경을 구축해 보겠습니다.

• Testing Library Docs↗
  우리가 앞으로 계속 사용할 React Testing Library의 공식 문서입니다.
• Why TDD?↗
  RTL의 창시자 Kent C. Dodds가 설명하는 테스트를 해야 하는 이유에 대한 글입니다.