테스트 코드 작성을 위한 도구, Jest & React-Testing-Library

joohe11·2022년 6월 5일
0

프론트엔드

목록 보기
7/8
post-thumbnail

어떤 기술스택을 쌓으면 더 성장할 수 있을까를 고민하다가 이전 프로젝트 코치님께서 "프론트엔드 개발자라면 테스트 코드를 잘 짜는 것이 중요하다"는 조언을 해주신 것이 떠올랐습니다.
그래서 곧 다가오는 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를 확장하여, 개발자가 좀 더 쓰기 편하게 도와주는 라이브러리

🔹 세팅 방법

CRA(create-react-app)를 사용하면 기본적으로 jest는 내장되어 있습니다.
(아래 내용은 CRA(create-react-app)를 통해 리액트 패키지를 설치했다는 가정 하에 이루어지는 세팅 방법입니다.)

  1. react-testing libraryjest-dom을 설치해줍니다.

    yarn add --dev @testing-library/jest-dom @testing-library/react

  1. src > setupTests.js 라는 파일을 하나 만든 후
    import "@testing-library/jest-dom"; 코드를 추가해주면
    세팅이 완료됩니다.
profile
Steadiness

0개의 댓글