📌 본 포스팅은
제 개발지식의 전부라 할 수 있는 벨로퍼트님의 자료를 참고해서 작성합니다 :)
https://learn-react-test.vlpt.us/#/
개발을 함에 있어서
코드 한줄을 작성하면, 그 코드가 제대로 작동 하는지 검증하는 작업이 필요하다.
지금까지 나는 react로 코드를 작성하면서
내가 작성한 코드가 제대로 작동이 되는지 마우스🖱로 클릭을 해보고, 키보드⌨️를 눌러보고,
계속해서 새로고침🔄을 해보는 등의 작업을 수동으로만 해왔다.
배우는 단계에 있어서 더 많은걸 알지 못하기에, 원래 작업방식이 그것 뿐인줄 알았다.
그런데 이번에 테스트 자동화라는걸 접하게 되면서
작업할 때 내가 수동으로 확인하는 방식이 아닌,
테스트 시스템이 자동으로 확인을 해주는 방식이 있다는 것을 알게 되었다.
더불어 내가 아는 방식만이 답이 아닐 수 있고,
앞으로 개발을 계속함에 있어서 더 효율적인 방법을 추구해야 한다는 것을 깨닫게 되었다 :(
테스트 자동화
프로젝트에서 다른사람들과 협업할 때에는 코드의 가독성을 신경써야할 뿐만 아니라
남이 작성한 코드를 잘못 건드리지 않도록 조심해야 한다.
코드를 제대로 파악하지 못한 채 잘못 건드려서 망가뜨리는 일을 방지하기 위해
테스트 코드를 작성하면 이후에도 발생하게 되는 버그나 실수들에 대해서도 대비할 수 있다.
테스트코드는 두종류로 나누어진다.
- 유닛테스트
작은 단위로 작성되는 테스트코드 - 통합테스트
기능이 전체적으로 잘 작동하는지 확인하기 위해 사용하는 테스트코드
TDD(Test Driven Development)
TDD란 테스트가 개발을 주도하는 것이라고 보면 된다.
보통 어떤 기능을 구현한다고 하면,
그 기능에 대한 코드를 작성하면서 제대로 작동하는지
확인하면서 작업을 하게 된다.
하지만 TDD방법으로 개발을 하게 될 경우에는
테스트 케이스를 먼저 작성하고 기능은 다음 단계에 작업을 하게 된다.
TDD는 위와같이 3가지 절차를 거치면서 진행되게 된다.
- 실패하는 테스트케이스를 먼저 만든다
-> 프로젝트 전체 기능에 대한 테스트 케이스를 한꺼번에 작성하는게 아닌
구현할 기능 하나씩 테스트 케이스를 작성한다. - 앞서 실패한 테스트케이스를 통과시키는 코드를 작성한다.
- 이미 작성한 코드에서 중복되었거나 개선시킬 수 있는 방법이 있다면 리팩토링을 진행한다.
-> 리팩토링 이후에도 테스트 케이스가 성공하는지 확인해야 함. 실패했다면 위 절차 다시 반복
react-testing-library
원래 리액트 컴포넌트를 테스팅 할 때에는 react-dom/test-utils 안에 들어있는
유틸 함수를 사용해서 테스트 코드를 작성하게 된다.
하지만, 조금 복잡하고 불편한 점들이 있는 문제로
리액트 공식문서에서도 react-testing-library를 사용하는 것을 권장한다고 한다.
react-testing-library는 많은 사람들이 airbnb 에서 만든 Enzyme과 비교를 한다.
Enzyme는 react-testing-library가 나오기 3년전에 사용되던 리액트 테스트 라이브러리다.
나는 react-testing-library를 사용할 것이기 때문에 자세히 정리해두진 않겠지만,
간단히 말하자면
react-testing-library: 컴포넌트의 인스턴스보다는 실제 DOM에 집중되기 때문에, 사용자의 관점에서는 렌더링 결과를 테스팅 하기가 더 용이하다.Enzyme: 컴포넌트의 내부기능에 자주 접근하여 props, state를 확인하거나 컴포넌트의 내장 메서드를 직접 호출하기도 한다.
내가 앞으로 사용할 react-testing-library는
컴포넌트의 props나 state를 조회하지 않고,
리팩토링 시엔 컴포넌트의 기능이 똑같이 작동한다면 컴포넌트 내부의 구현방식이 바뀌어도
테스트가 실패하지 않도록 설계되어있다.
테스팅을 처음 하는 나로선, 다양한 기능이 많은Enzyme 보다는
필수적인 기능만을 지원해주기에 그나마 다루기 편할 것 같은 react-testing-library로
테스팅 연습을 해야겠다 :)
