어떤 기술스택을 쌓으면 더 성장할 수 있을까를 고민하다가 이전 프로젝트 코치님께서 "프론트엔드 개발자라면 테스트 코드를 잘 짜는 것이 중요하다"는 조언을 해주신 것이 떠올랐습니다.
그래서 곧 다가오는 3차 프로젝트 개발에서 TDD 방법론을 적용해보기 위해 Jest 프레임워크와react-testing library를 공부하면서 정리해보았습니다.
🔸 들어가기에 앞서...
❓ 테스트 코드를 짜는 이유는 무엇일까?
- 테스트가 용이하게 코드를 작성하여, 코드 품질과 신뢰성을 높입니다.
- 테스팅 코드를 작성함으로써, 미리 에러를 방지 할 수 있습니다.
- 버그가 있다면, 어떤 상황에서 발생하는지 알 수 있습니다.
- 리팩토링 시에 안정성을 확보할 수 있습니다.
- 장기적인 측면에서 개발 및 테스팅에 대한 시간과 비용을 절감할 수 있습니다.
🔹 TDD 방법론
: Test-Driven Development. 즉, 테스트 주도 개발이라는 뜻으로 실패하는 테스트 코드를 먼저 만들어놓고, 그 테스트를 통과하는 코드를 작성하는 방식을 말합니다.
ex) App.test.js 코드를 통과하는 App.js 코드를 만든다.
또한, TDD의 개발 단계 중 리팩토링 과정을 통해 깔끔한 코드를 작성할 수 있습니다.
🔹 Jest 란?
: facebook에서 오픈소스화한 javascript 테스트 프레임워크로 CRA(Create-React-App)에는 기본적으로 내장되어 있습니다.
🔹 React-Testing Library (RTL)
: DOM을 테스트하기 위한 도구. 즉, React 컴포넌트를 테스트 하기 위해 만들어진 도구입니다.
🔹 Jest vs RTL
: RTL을 Jest의 대안이라고 생각할 수 있으나, React 내에서 테스트를 진행할 때 함께 사용되기 때문에 상호 보완 관계라고 할 수 있습니다.
Jest를 통해 전반적인 기능 테스트를 진행할 수 있지만, React의 컴포넌트를 렌더링하고 테스트하기 위해서는 RTL이 필요하기 때문입니다.
- 참고
- RTL (React-Testing Library)
: jest를 확장하여, 개발자가 좀 더 쓰기 편하게 도와주는 라이브러리
- RTL (React-Testing Library)
🔹 세팅 방법
CRA(create-react-app)를 사용하면 기본적으로 jest는 내장되어 있습니다.
(아래 내용은 CRA(create-react-app)를 통해 리액트 패키지를 설치했다는 가정 하에 이루어지는 세팅 방법입니다.)
react-testing library와jest-dom을 설치해줍니다.→
yarn add --dev @testing-library/jest-dom @testing-library/react
- src > setupTests.js 라는 파일을 하나 만든 후
import "@testing-library/jest-dom";코드를 추가해주면
세팅이 완료됩니다.
