[코드숨 리액트 강의] 3주차 회고

이번 강의를 통해 처음으로 TDD를 해봤다.

사용한 프레임워크는 Jest와 testing-library/react 였다.

 

TDD(Test-Driven Development)는 Red Green Refactoring 을 이용해서 개발한다.

먼저 테스트에 실패할 테스트 코드를 작성한다.

적당한 코드를 작성해(특이한 케이스) 테스트를 통과시킨다.

이후 코드를 보완해 보편적인 케이스들도 통과할 수 있도록 한다.

 

개인적으로 테스트 코드를 먼저 작성하고 코드를 나중에 개발하는 방법은 처음이었는데 굉장히 신기했다.

처음에 이런 방법을 고안한 사람은 천재가 아니었을까.

아래는 TDD를 이용한 코드이다.

import { render, screen, fireEvent } from '@testing-library/react';
import Input from './Input';

test('placeholder가 보여진다.', () => {
  render(
    <Input />,
  );
  expect(screen.getByPlaceholderText('할 일을 입력해 주세요'));
});

test('input의 type은 text이다.', () => {
  render(
    <Input />,
  );
  const inputElement = screen.getByLabelText('할 일');
  expect(inputElement).toBeInTheDocument();
  expect(inputElement).toHaveAttribute('type', 'text');
});

test('키보드 입력시 input 값이 바뀐다.', () => {
  render(
    <Input />,
  );
  const inputElement = screen.getByLabelText('할 일');
  const todo = '헬스장 가기';
  fireEvent.change(inputElement, { target: { value: todo } });
  expect(inputElement).toHaveValue(todo);
});

test('추가 버튼 클릭시 onClick이 실행된다.', () => {
  const handleClick = jest.fn();
  const { getByText } = render(
    <Input onClick={handleClick} />,
  );

  expect(handleClick).not.toBeCalled();
  fireEvent.click(getByText('추가'));
  expect(handleClick).toBeCalled();
});

test와 expect를 보면 대략적으로 어떤 내용인지 알 수 있을 것이다.

 

두번째 방법은 BDD(Behavior-Driven Development)이 있다. TDD와는 다른 방식으로 Behavior 즉 유저의 행동에 기반하여 테스트 코드를 작성한다.

 

import { render } from '@testing-library/react';
import { exampleTasks } from './example';
import List from './List';

describe('List', () => {
  const handleClickDelete = jest.fn();
  const renderList = (tasks) => render(<List tasks={tasks} onClickDelete={handleClickDelete} />);

  context('리스트 길이가 0이면', () => {
    it('할 일이 없어요! 가 출력된다.', () => {
      const { container } = renderList([]);
      expect(container).toHaveTextContent('할 일이 없어요!');
    });
  });

  context('tasks의 길이만큼', () => {
    it('Item 항목이 출력된다', () => {
      const { getAllByText } = renderList(exampleTasks);
      expect(getAllByText('완료')).toHaveLength(2);
    });
  });
});

코드를 보면 이전에 있던 test가 사라지고 describe와 context가 있음을 알 수 있다. context로 상황을 설명하기 때문에 좀 더 유저의 행동을 예측해 테스트 코드를 작성할 수 있다. 나에게는 이렇게 작성하는 코드가 좀 더 자연스럽게 느껴졌다.

 

어려웠던 점은 jest나 testing-library/react에 대한 자료가 적어서 코드 개발이 어려웠다. 예를 들어 input DOM을 테스트하고 싶은데 DOM을 어떻게 불러와야 할 지, 어떤 메소드를 써야하는지 찾기가 어려웠다.

 

그리고 두번째는 실제 개발에 얼마나 큰 도움을 주는지 아직은 체감하지 못했다. 실제 업무 중에 발생하는 버그들은 테스트 코드로 확인할 수 없는 경우가 더 많은 것 같고, 테스트 코드를 쓰는 만큼 개발 속도가 느려지기 때문이다.

 

물론 이 부분은 강의를 더 들어보고 공부해보면서 살펴봐야겠다.