리액트 테스팅.

목차

  1. 벨로 퍼트 강의를 보고 따라 하면서 감 익히기
  2. 투두리스트에 적용하기

테스트 코드란?

테스트 코드를 쓰는 이유가 뭘까요?

  1. A 개발자와 B 개발자가 협업중에 각각 A 코드 B 코드를 작성할경우에 예상하지 못한 상황에 B의 기능이 고장이 날 수도 있는데 개발하게 될 떄 실제 발생 할 수 있게 되는 상황에 대하여 미리 정리해놓고 그에 맞춰 코드를 작성하게 되면 우리가 실수로 빠뜨릴 수 있는 사항들을 까먹지 않고 잘 챙길 수 있게 된다.

  2. 큰 규모의 프로젝트에서 리팩토링을 할때 실수로 빠뜨리는 경우가 생기기 때문에 리팩토링 이후에 버그가 있는지 없는지 세밀하게 또 확인을 해야한다.
    하지만 테스트코드가 존재하면 리팩토링 이후에 코드가 이전과 똑같이 작동하는지 검증하는게 매우 쉬워지기 때문에 코드의 질을 향상시키는데에 매우 큰 도움이 된다.

  • 테스트 코드를 작성한다고 해서 모든 버그를 막을 수 있는건 아니지만 그 버그를 고치고 나서 버그가 발생하는 사항에 대해 테스트 코드를 작성해 둔다면 같은 실수를 하는 것을 방지 할 수 있음.

테스트 코드의 종류

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

유닛 (Unit) 테스트

  • 유닛 테스는 말 그대로 아주 조그만 단위로 작성이 된다.
  • 유닛테스트의 예시
  1. 컴포넌트가 잘 렌더링된다.
  2. 컴포넌트의 특정 함수를 실행하면 상태가 우리가 원하는 형태로 바뀐다
  3. 리덕스의 액션 생성 함수가 액션 객체를 잘 만들어낸다
  4. 리덕스의 리듀서에 상태와 액션객체를 넣어서 호출하면 새로운 상태를 잘 만들어준다.

통합(Integrated) 테스트

  • 통합테스트란 기능들이 전체적으로 잘 작동하는지 확인하기 위해서 사용 하는 것.
  • 통합 테스트의 예시
  1. 여러 컴포넌트들을 렌더링하고 서로 상호 작용을 잘 하고 있다
  2. DOM 이벤트를 발생 시켰을 때 우리의 UI 에 원하는 변화가 잘 발생한다
  3. 리덕스와 연동된 컨테이너 컴포넌트의 DOM 에 특정 이벤트를 발생시켰을 때 우리가 원하는 액션이 잘 디스패치 된다

리액트 테스팅 도구

  • React Testing Library (RTL) , Enzyme등이 있는데 React Testing Library (RTL)와 Jest 조합이 React 애플리케이션을 테스트하기에 충분하다는 이유로 Enzyme은 더 이상 개발 및 업데이트되지 않는다. image