테스트 코드로 스토리텔링을

 

퀘스트 과제를 구현하면서 재밌는 경험을 했다.

 

마카오 페이 프로그램을 구성하는 컴포넌트 중 하나인 N빵 정산을 구현하고 있었는데, 구현한 기능에 예외처리를 어떻게 구현할 것인지를 고민하고 있었다.

 

예를 들면 아래 그림처럼 입력창에 잘못된 금액을 입력하고 계산하기 버튼을 누르면 예외를 처리해주는 소스코드를 실행시키도록 해야 할 것이었다.

 

 

소스코드가 점점 길어지다 보니 소스코드만 봐서는 내가 이 컴포넌트의 어느 지점에 어떤 요소를 넣었는지, 어떤 state를 쓰고 있고 어떤 핸들러를 정의했는지 '이건 여기지!' 하고 손이 3초만에 가지지 않는 지경이 되었다. 또 예전처럼 소스코드 더미 안에서 '아 이거 어디에 선언해 뒀더라...' 하면서 왔다갔다했다가는 소중한 시간을 비효율적으로 날려먹을 것이 뻔했다.

 

 

강의에서 나왔던 테스트 코드를 작성하던 방식이 생각났다. Todo List 강의에서 입력창에 할 일을 입력하고 버튼을 클릭했을 때 어떤 일이 일어나는지 테스트하는 방식은 생각해보면 마치 이벤트가 진짜 발생한 것처럼 테스트를 작성할 수 있는 것이었다. 생각났을 때 바로 내용을 적용해 보았다.

 

describe('DutchPay', () => {
  // ...
  
  it('Error case: click CalculateDutchPaidAmount button with less than 0', () => {
    const friends = [
      { id: 1, name: '치코리타', selected: true },
    ];

    const payFromDutchPay = jest.fn();

    render(<DutchPay friends={friends} payFromDutchPay={payFromDutchPay} />);

    fireEvent.change(screen.getByLabelText('정산 금액'), {
      target: { value: -45600000000 },
    });

    fireEvent.click(screen.getByText('계산하기'));

    screen.getByText('잘못된 금액을 입력했습니다.');
  });
});

 

내용을 해석해 보면 이 정도가 될 수 있다.

 

1. 화면을 렌더링하고,
2. '정산 금액'이라는 문자열을 label로 갖는 요소와 연결된 대상(여기서는 input)에 잘못된 금액을 입력하고
3. '계산하기'라는 문자열이 쓰여 있는 버튼을 누르면
4. 화면에 '잘못된 금액을 입력했습니다.'라는 문자열이 쓰여 있는 요소가 있다.

 

이렇게 작성하고 나니, '잘못된 금액을 입력했을 때의 예외처리는 계산하기 버튼의 이벤트 핸들러에서 진행해야 하고, 컴포넌트에는 메세지를 출력하는 태그가 하나 있어야겠구나!' 하는 생각이 바로 들었다. 어제와 마찬가지로 계산하기 버튼이라는 구체적인 타겟이 정해지니 컴포넌트에서도 소스코드를 입력해야 하는 위치를 어렵지 않게 찾을 수 있었고, 지금은 타겟으로 정한 부분을 구현하는 데 집중하고 있다.

 

 

복잡하고, 어렵다고만 생각하면 끝도 없이 어려운 게 프로그래밍인 것 같다. 아니 사실 인생이 그렇지.

 

그 안에서 재미를 찾고, 이야기를 써 나가듯 문제를 싸워야 할 대상이 아닌 어떻게 하나씩 차근차근 이해해 볼까? 같은 생각으로 문제에 접근하는 것이 어떤 문제를 접하게 되더라도 내가 해결해나갈 수 있는 힘이 되어주지 않을까.