react-testing-library로 테스트 코드를 작성해보자

테스트 코드를 사용하면 우리가 프로젝트를 개발하는 과정에서 우리가 써내려가는 코드가 기존의 기능들을 실수로 망가뜨리는 것을 아주 효과적으로 방지할 수 있다. 또한 개발하게 될 때 실제 발생할 수 있게 되는 상황에 대하여 미리 정해놓고 그에 맞춰 코드를 작성하게 되면 우리가 실수로 빠뜨릴 수 있는 사항들을 까먹지 않고 잘 챙길 수 있게 된다.

이 뿐만 아니라, 코드를 리팩토링할 때 좋다. 예를 들어 우리가 A라는 기능을 리팩토링한다고 가정해보자. 리팩토링을 하고 있는 기능이 규모가 크다면 실수로 몇몇 사항은 빠뜨릴 수도 있는 상황이 생길 수 있다. 그런데, 테스트 코드가 존재한다면 리팩토링 이후에 코드가 이전ㄴ과 똑같이 작동하는지 검증하는게 매우 쉬워지기 때문에 코드의 질을 향상시키는 것에 매우 큰 도움이 된다.

하지만, 테스트 코드를 작성한다고해서 프로젝트에 버그가 발생하지 않는 것은 아니다. 테스트 코드를 작성해도 프로젝트에 버그가 발생할 수 있다. 하지만 만약 버그가 발생했더라면 그 버그를 고치고 나서 버그가 발생하는 상황에 대한 테스트 코드를 작성해두면, 두번 다시 똑같은 실수를 하는 것을 방지할 수 있다.

react-testing-library

리액트 공식문서에서 권장하는 라이브러리는 react-testing-library이다. 그리고, 대체방안으로 Enzyme이 있다고 언급하고 있다.

몇년 전까지는 airbnb에서 만든 Enzyme을 사용하는 것이 가장 좋은 솔루션이었지만, 요즘은 react-testing-library가 많은 주목을 받고 있다.

https://www.npmtrends.com/ 를 확인하면 더욱 명확히 알 수 있다.
(react-testing-library는 @testing-library/react로 변경되었다.)

Enzyme과 react-testing-library는 서로 다른 철학을 가지고 있다. Enyzme을 사용하여 테스트 코드를 작성할 때에는 컴포넌트의 내부 기능을 자주 접근한다. 예를 들어서 컴포넌트가 지니고 있는 props, state를 확인하고, 컴포넌트의 내장 메서도를 직접 호출하기도 한다.

react-testing-library는 반면 렌더링 결과에 조금 더 집중을 한다. 실제 DOM에 대해서 신경을 더 많이 쓰고, 컴포넌트의 인스턴스에 대해서 신경쓰지 않고, 실제 화면에 무엇이 보여지는지, 어떠한 이벤트가 발생했을 때 원하는 변화가 생겼는지에 대한 것들을 확인하기에 조금 더 최적화 되어있다. 그래서 react-testing-library는 조금 더 사용자의 관점에서 테스팅하기 더욱 용이하다.

다음 글부터 테스트를 해보도록 한다.