테스트 자동화
테스트를 하는 코드를 작성해서, 테스트 시스템이 자동으로 확인을 해줄 수 있게 하는 것. 이를 테스트 자동화라고 합니다.
장점
- 여러분들이 프로젝트를 다른 사람들과 협업을 하게 되는 경우 테스트 코드를 작성하는 것은 매우 큰 도움을 줍니다.
- 테스트 코드가 존재한다면, 리팩토링 이후에 코드가 이전과 똑같이 작동하는지 검증하는게 매우 쉬워지기 때문에 코드의 질을 향상시키는 것에 매우 큰 도움이 됩니다.
- 테스트 코드를 사용하면 우리가 프로젝트를 개발하는 과정에서 우리가 써내려가는 코드가 기존의 기능들을 실수로 망가뜨리는것을 아주 효과적으로 방지 할 수 있습니다.
- 테스트 코드를 작성해도, 프로젝트에는 버그가 발생할 수 있습니다. 하지만, 만약 버그가 발생했더라면, 그 버그를 고치고 나서, 버그가 발생하는 상황에 대한 테스트 코드를 작성해두면, 두번 다시 똑같은 실수를 하는 것을 방지할 수 있습니다.
테스트 코드는 크게 두 종류로 나뉘어질 수 있습니다.
유닛(Unit) 테스트
첫번째는 유닛 테스트입니다. 유닛 테스트는 아주 조그마한 단위로 작성됩니다.
- 컴포넌트가 잘 렌더링된다.
- 컴포넌트의 특정 함수를 실행하면 상태가 우리가 원하는 형태로 바뀐다.
- 리덕스의 액션 생성 함수가 액션 객체를 잘 만들어낸다.
- 리덕스의 리듀서에 상태와 액션객체를 넣어서 호출하면 새로운 상태를 잘 만들어준다.
프로젝트의 기능을 잘게잘게 쪼개서 테스트를 하면 각 기능이 모두 잘 작동하는지 확인 할 수는 있습니다. 그런데, 전체적으로 잘 작동하는지 확인이 잘 안될 수도 있습니다.
통합(Integrated) 테스트
기능들이 전체적으로 잘 작동하는지 확인하기 위해서 사용 하는 것이 바로 통합 테스트입니다.
- 여러 컴포넌트들을 렌더링하고 서로 상호 작용을 잘 하고 있다.
- DOM 이벤트를 발생 시켰을 때 우리의 UI 에 원하는 변화가 잘 발생한다.
- 리덕스와 연동된 컨테이너 컴포넌트의 DOM 에 특정 이벤트를 발생시켰을 때 우리가 원하는 액션이 잘 디스패치 된다.
유닛 테스트와 통합 테스트 간의 차이는 간단합니다. 유닛 테스트는 하나에 초점을 둔다면, 통합 테스트는 이름이 그러하듯 여러 요소들을 고려하여 작성합니다. 유닛 테스트는 보통 한 파일만 불러와서 진행하는 반면, 통합 테스트는 여러 요소들을 고려하는 과정에서, 여러 파일들을 불러와서 사용하게 될 수도 있습니다. 추가적으로, 한 파일에 있는 여러 기능들을 함께 사용하는 것도 통합테스트로 간주됩니다.
TDD
자바스크립트 테스트
Jest
Jest 는 페이스북 팀에서 Jasmine 기반으로 만든 테스팅 프레임워크입니다. CRA 로 만든 프로젝트에는 자동으로 적용이 되어있습니다.
리엑트 컴포넌트 테스트
리액트 컴포넌트를 테스팅 할 때에는 react-dom/test-utils 안에 들어있는 유틸 함수를 사용해서 테스트 코드를 작성합니다.
Enzyme 과 react-testing-library
리액트 공식문서에서 사용을 권장하는 라이브러리는
react-testing-library 입니다. 그리고, 대체방안으로 Enzyme 이 있다고 언급을 하고 있습니다.
2년 전까지는 airbnb 에서 만든 Enzyme 을 사용하는것이 가장 좋은 솔루션이였는데요, 요즘은 react-testing-library 가 많은 주목을 받고 있습니다. Enzyme 의 경우엔 2015년부터 개발이 되었고 react-testing-library 의 경우엔 2018년부터 개발이 되어 2018년 말부터 급부상을 하고 있습니다.
Enzyme 을 사용하여 테스트 코드를 작성 할 때에는 컴포넌트의 내부 기능을 자주 접근합니다. 예를 들어서 컴포넌트가 지니고 있는 props, state 를 확인하고, 컴포넌트의 내장 메서드를 직접 호출하기도 합니다.
react-testing-library는 반면 렌더링 결과에 조금 더 집중을 합니다. 실제 DOM 에 대해서 신경을 더 많이 쓰고, 컴포넌트의 인스턴스에 대해서 신경쓰지 않고, 실제 화면에 무엇이 보여지는지, 그리고 어떠한 이벤트가 발생했을때 화면에 원하는 변화가 생겼는지 이런 것을 확인하기에 조금 더 최적화 되어있습니다. 그래서, react-testing-library 는 조금 더 사용자의 관점에서 테스팅하기에 더욱 용이합니다.
참조
