[React] Jest

Narcoker·2023년 7월 2일

React

목록 보기

18/33

Jest

FaceBook에 의해서 만들어진 테스팅 프레임 워크이다.
최소한의 설정으로 동작하며 Test Case를 만들어서
어플리케이션 코드가 잘 돌아가는지 확인한다.

단위 테스트를 위해서 이용한다

특징

Zero configuration
Jest는 설정 없이 "박스에서 나와 바로 사용할 수 있도록" 설계되었다.
대부분의 경우에 추가 설정 없이 Jest를 프로젝트에 추가하고 바로 테스트를 작성할 수 있다.

Fast and sandboxed
Jest는 테스트를 병렬로 실행하여 전체 테스트 스위트의 실행 시간을 최소화한다.
각 테스트 파일은 독립적인 환경에서 실행되므로 테스트 사이에 상태가 유출되지 않는다.

Snapshot testing
Jest는 스냅샷 테스팅 기능을 제공하여
UI 컴포넌트나 데이터 구조가 예상대로 작동하는지 쉽게 확인할 수 있습니다.

Mocking and spying
Jest는 강력한 모킹과 스파잉 기능을 제공하여
함수 호출을 가로채거나 모의 객체를 생성하는 등의 작업을 쉽게 할 수 있습니다.

사용법

create-react-app 으로 프로젝트를 설치한 경우 따로 설치하지 않아도된다.

이 경우가 아니라면 다음 과정을 따른다.

Jest 라이브러리 설치 : npm install jest --save-dev
Test 스크립트 변경 : "test: "jest" or "jest --watchAll"
테스트 작성할 폴더 및 파일 기본 구조 생성

Jest가 Test 파일을 찾는 법

Jest는 프로젝트의 모든 폴더 구조를 탐색하고
다음과 같은 파일이나 폴더 구조에 있는 경우 테스트 파일로 인식한다.

{filename}.test.js
{filename}.spec.js
All files inside "test" folders

Test 파일 작성 예시

describe 각각의 테스트를 그룹화 하기 위한 것
test 또는 it 각각의 테스트를 정의하기 위한 것
expect 함수: 값을 테스트할 때마다 사용된다. 혼자서는 거의 사용되지 않으며 matcher와 같이 사용
matcher: 다른 방법으로 값을 테스트하도록 사용

예시 1

test('two plus two is four', () => {
	expect(2 + 2).toBe(4); // .toBe() => matcher!!
});

예시 2

test('two plus two is not five', () => {
	expect(2 + 2).not.toBe(5); // .not.toBe() => matcher!!
});

Test 실행법

npm test 를 터미널에 입력하면 다음과 같이 나온다.

a를 누르면 모든 테스트를 수행한다.
q를 누르면 테스트 콘솔을 종료한다.
...

기본 테스트가 진행되는 곳

src/App.test.js

두 테스팅은 같은 테스트를 하는 것이다.
screen 객체를 사용하는지 안사용하는지 차이일 뿐이다.
screen 객체란 현재 DOM을 표현하는 객체이다.

첫번째 테스트 코드 설명
render(<App/>): APP 컴포넌트를 랜더링한다.

const linkElement = screen.getByText(/learn react/i) :
현재 DOM에서 "learn react"라는 텍스트를 가진 요소를 찾아 할당한다.

expect(linkElement).toBeInTheDocument() : 해당 요소가 실제로 DOM에 존재하는지 확인한다.