리액트 프로젝트에서 TDD(Test Driven Development)를 하는 방법에 대해 알아보았다.

먼저,

테스트란? 🙋‍♂️

테스트란, 우리가 작성한 코드가 잘 작동하는지 확인하는 작업을 의미한다. 직접 버튼도 눌러보고 드래그도 해보는 과정으로 진행된다. 하지만 이를 수동으로 하기에는 정말 번거롭다. 그래서 테스트 자동화라는 작업을 하는데 이작업은 테스트를 하는 코드를 작성해서 테스트 시스템이 자동으로 확인해 주는 작업을 말한다.

테스트 자동화, 왜 할까? 🤷‍♂️

예를 들어서, A라는 사람이 짜놓은 코드를 B가 맡게 되었다. 근데 B가 나름 코드를 봤다 해도 사람이라 실수를 하기 마련이다. 그래서 B는 기능들이 잘 작동 했다 생각하지만 알고보니 사소한 오류들이 있었고, 이걸 모른채 서비스를 배포해버리면 치명적인 버그가 사용자에게 제공되게 된다🤦‍♂️. 프로젝트의 규모가 커서 고려해야 할 사항이 많거나, 어떤 사람이 짠 코드를 다른 사람이 제대로 파악하지 않고 있을 때 이런 일이 잘 발생한다. 하지만 테스트 자동화를 한다면, 이런 오류들을 검사를 통해 방지 할 수 있다.

유닛테스트, 통합테스트

테스트 코드는 크게 두 종류로 나뉘어진다.

유닛 테스트는 아주 조그마한 단위로 작성 된다. (밑에는 예시)

  1. 컴포넌트가 잘 렌더링 된다.
  2. 컴포넌트의 특정 함수를 실행하면 상태가 우리가 원하는 형태로 바뀐다.

기능들이 전체적으로 잘 작동하는지 확인하기 위해서 사용하는 것이 바로 통합테스트이다. (밑에는 예시)

  1. 여러 컴포넌트들을 렌더링 하고 서로 상호 작용을 잘 하고 있다.
  2. DOM 이벤트를 발생 시켰을 때 우리의 UI에 원하는 변화가 잘 발생한다.