[React] TDD 사용법

Jin·2022년 7월 31일

React

목록 보기

16/18

TDD란

테스트 주도 개발로서 서비스의 안정적인 운영과 서비스의 품질을 확보하기 위해 테스트 코드를 작성하고 관리하기 위해서 사용됩니다.

TDD를 하기 위해서는 다음의 프로세스가 요구됩니다.
1. 자동화된 테스트 시스템 준비 (e.g. jest, react-testing-library)
2. 프로젝트의 기능에 대한 사양을 정리합니다.
3. 해당 사양에 대한 테스트 명세를 작성하고 실패하는 것을 확인합니다.
4. 실패한 테스트 명세를 통과시키기 위해 최대한 간단하고 빠르게 기능을 개발합니다.
5. 개발한 내용이 테스트 명세를 통과시키는 것을 확인하였다면 구현한 기능을 리팩토링합니다.
6. 위의 과정을 반복합니다.

이해를 돕기 위해 Header 컴포넌트를 TDD로 개발하는 과정을 예로 들어보려고 합니다.

react-create-app으로 만든 프로젝트로 jest와 react-testing-library가 설치되어 있다고 가정합니다.
테스트 코드에서 사용되는 메서드들에 대한 설명은 생략합니다.

1. Header 컴포넌트 사양을 정리한다.

페이지의 제목을 표시한다.
주어진 URL에 해당하는 페이지 제목을 표시한다.
- /: 할 일 목록 (홈 화면)
- /add: 할 일 추가
- /detail/:id: 할 일 상세
- 이외의 URL: Not Found

2. 가장 간단한 테스트 명세를 작성한다.

적절한 위치에 Header.test.tsx 파일을 생성하고 아래의 코드를 입력합니다.

import { render, screen } from '@testing-library/react';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import { Header } from '.';

describe('<Header />', () => {
  it('renders component correctly', () => {
    const history = createMemoryHistory();
    history.push('/');

    const { container } = render(
      <Router location={history.location} navigator={history}>
         <Header />
      </Router>,
    );

    const label = screen.getByText('할 일 목록');
    expect(label).toBeInTheDocument();
  });
});

이렇게 파일을 생성하고 저장 후 npm run test로 테스트 코드를 실행하면 테스트가 실패하는 것을 볼 수 있습니다.

당연한 결과입니다. 우리는 아직 Header 컴포넌트 자체도 생성하지 않았기 때문입니다.

하지만, TDD는 이렇게 실패가 발생하는 테스트 명세를 먼저 작성하는 것에서 시작합니다.

TDD에서는 실패가 발생하는 테스트 명세 작성 후 이를 해결하기 위한 가장 간단하고 빠른 코드를 작성합니다. 만약, 그 방법이 하드 코딩이라고 해도 괜찮습니다.

3. 테스트 명세를 통과하기 위해 최대한 간단하고 빠른 기능 코드를 작성한다.

적절한 위치에 Header.tsx 파일을 생성합니다.


const Header = () => {
  return (
    <div>
      <div>할 일 목록</div>
    </div>
  );
};

export default Header;

이렇게 파일을 수정 후 저장하면 새롭게 만든 Header 컴포넌트를 찾지 못해 여전히 테스트 명세가 실패라고 뜹니다.
그러면 테스트가 실행 중인 터미널을 열고 w키를 누른 후 a키를 눌러 모든 테스트 명세를 다시 실행시킵니다.

4. 리팩토링한다.

import React from "react";
import { render, screen } from "@testing-library/react";
import { Router } from "react-router-dom";
import { createMemoryHistory } from "history";
import Header from ".";

describe("<Header />", () => {
  it("renders component correctly", () => {
    const history = createMemoryHistory();
    history.push("/");

    const { container } = render(
      <Router location={history.location} navigator={history}>
        <Header />
      </Router>
    );

    const label = screen.getByText("할 일 목록");
    expect(label).toBeInTheDocument();

    expect(container).toMatchSnapshot();
  });

  it("renders component correctly with /add URL", () => {
    const history = createMemoryHistory();
    history.push("/add");

    const { container } = render(
      <Router location={history.location} navigator={history}>
        <Header />
      </Router>
    );

    const label = screen.getByText("할 일 추가");
    expect(label).toBeInTheDocument();

    expect(container).toMatchSnapshot();
  });

  it("renders component correctly with /detail/:id URL", () => {
    const history = createMemoryHistory();
    history.push("/detail/1");

    render(
      <Router location={history.location} navigator={history}>
        <Header />
      </Router>
    );

    const label = screen.getByText("할 일 상세");
    expect(label).toBeInTheDocument();
  });

  it("renders component correctly with NotFound", () => {
    const history = createMemoryHistory();
    history.push("/not_found");

    render(
      <Router location={history.location} navigator={history}>
        <Header />
      </Router>
    );

    const label = screen.getByText("에러");
    expect(label).toBeInTheDocument();
  });
});

Header 컴포넌트가 /, /add, /detail/:id, 그 이외의 url에서 제목을 제대로 표시하는지 확인하기 위한 테스트 코드를 추가합니다.

Header.test.tsx를 수정하고 다시 테스트하면 실패하게 됩니다.

이 예제에서는 스타일링을 전혀 고려하지 않고 있지만 스타일링을 적용할 경우 기존의 디자인에서 변경되었는지를 인지하지 위해서 스냅샷을 활용할 수 있습니다. expect(...).toMatchSnapshot() 메서드를 통해 확인 가능합니다.

5. 위의 과정을 반복한다.

앞의 과정을 다시 반복하여 테스트를 통과할 수 있도록 기능 코드를 수정합니다.

import React from "react";
import { useLocation } from "react-router-dom";

const Header = () => {
  const { pathname } = useLocation();
  let title = "에러";

  if (pathname === "/") {
    title = "할 일 목록";
  } else if (pathname === "/add") {
    title = "할 일 추가";
  } else if (pathname.startsWith("/detail")) {
    title = "할 일 상세";
  }

  return (
    <div>
      <div>{title}</div>
    </div>
  );
};

export default Header;