React Testing Library 설치 및 설정

CRA(Create React App)를 통해 리액트 패키지를 설치하면 React Testing Library도 같이 설치되어서 테스팅 라이브러리를 설치하지 않아도 테스트 주도 개발을 할 수 있다.

 

하지만 테스팅 라이브러리를 지원하지 않는 버전으로 CRA를 실행했거나, CRA를 통해 리액트 패키지를 설치하지 않은 경우에는 React Testing Library를 직접 설치하고 셋팅해야 한다.

 

 

 

React Testing Library를 사용해야 하는 몇 가지 이유가 있다. 모든 테스트를 DOM 위주로 진행하며, 필요한 기능들만 지원해줘서 매우 가볍고, 개발자들이 일관성있고 좋은 관습을 따르는 테스트 코드를 작성할 수 있도록 도와준다는 점이다.

 

자, React Testing Library를 설치하고 셋팅해보자!

 

 

-Jest 설치 (CRA로 생성된 프로젝트는 기본적으로 jest가 내장되어 있으니 패스해도 좋음)

npm i -D--save jest

-React Testing Library 설치

npm i -D--save @testing-library/react

-Jest DOM에 특화된 matcher 애드온인 jest-dom 설치

npm i -D--save @testing-library/jest-dom

 

**

아래 velopert 블로그에서 VSCode를 사용한다면 다음도 설치하라고 한다.

npm i --save-dev @types/jest

 

React Testing Library 설정

설치를 마쳤다면, config를 셋팅하자!

 

리액트 테스팅 라이브러리를 사용하려면 두 가지 설정이 필요하다.

 1) 각 테스트가 DOM에 렌더링 해놓은 내용들을 => 테스트가 끝날 때 => 다음 테스트를 위해서 지워주는 것

 2) jest-dom이 제공하는 matcher를 => Jest 테스트 러너에게 인식시키는 것

 

아래 두 줄의 코드를 자신의 React 프로젝트의 테스팅 설정파일에 추가해주면 된다.

CRA로 생성된 프로젝트라면 src/setupTest.js 파일에 추가해주면 된다.

import "@testing-library/react/cleanup-after-each"
import "@testing-library/jest-dom/extend-expect"

 

 

 

 

www.daleseo.com/react-testing-library/

React Testing Library 사용법

// 위 주요 내용을 다룸

 

velog.io/@velopert/react-testing-library

react-testing-library 를 사용한 리액트 컴포넌트 테스트

// 위는 구버전임. (최근에 패키지 명이 '@testing-library/react ....'로 바뀌었으나 위 블로그에서는 이전 패키지를 사용하고 있음.)

// CRA 로 testing 라이브러리를 자동 설치하는 것이 아니라면, 구버전의 config 셋팅 방법을 참고하는 것이 좋지 않을까 싶다.