[React]React Testing Library, Jest

김건휘·2024년 12월 17일

React

목록 보기

17/19

React에서 컴포넌트와 기능이 제대로 동작하는지 검증하기 위해 테스트는 필수적인 과정입니다. React Testing Library와 Jest를 사용해 React 컴포넌트를 테스트하는 방법을 소개하겠습니다.

📌React Testing Library란?

사용자 관점에서 React 컴포넌트를 테스트하기 위한 도구이다. 실제 사용자가 컴포넌트를 어떻게 사용할지를 중심으로 테스트를 작성하도록 합니다.

📌Jest란?

Jest는 페이스북(Facebook)이 개발하고 유지하는 JavaScript 테스팅 프레임워크이다. React와 함께 사용되도록 설계되었으며, 단위 테스트(Unit Test), 통합 테스트(Integration Test), 스냅샷 테스트(Snapshot Test) 등을 수행할 수 있다.

React에서 Jest는 컴포넌트의 동작을 테스트하거나 로직을 검증하는 데 널리 사용된다.

✅Jest 실행하기

yarn add jest

✔️타입스크립트를 사용한다면 코드 에디터의 지원을 받기위해 @types/jest를 설치하는 것을 권장한다.

yarn add --dev @types/jest

첨부한 사진과 같이 scripts내에 "test": "jest"를 추가해준다.

✅테스트 코드 작성

1. fn.js 함수 파일 생성

//fn.js
const fn = {
  add: (num1, num2) => num1 + num2,
};

module.exports = fn;

2. fn.js 함수를 테스트할 fn.test.js 테스트 코드 작성

//fn.test.js
const fn = require("./fn");

test("1은 1이야", () => {
  expect(1).toBe(1);
});

test("2 더하기 3은 5야", () => {
  expect(fn.add(2, 3)).toBe(5);
});

test("3 더하기 3은 5야", () => {
  expect(fn.add(3, 3)).toBe(5);
});

✅테스트 코드 실행

yarn test명령어 실행

어떤 테스트를 실패하고 성공했는지 확인 할 수 있다.

✅테스트 코드 패턴

test("테스트 설명", () => {
  expect("검증 대상").toXxx("기대 결과");
});

toXxx 부분에서 사용되는 함수를 흔히 Test Matcher라고 한다. 위에서 사용된 toBe() 함수는 숫자나 문자와 같은 객체가 아닌 기본형(primitive) 값을 비교할 때 사용된다.

그리고 yarn test를 실행하면 프로젝트 내에 모든 테스트 파일을 찾아서 테스트를 실행해준다. Jest는 기본적으로 test.js로 끝나거나, __test__ 디렉터리 안에 있는 파일들은 모두 테스트 파일로 인식한다. 만약 특정 테스트 파일만 실행하고 싶은 경우에는 yarn test <파일명 이나 경로>를 입력하면 된다.

✅자주 사용되는 Matcher

toEqual()

function getUser(id) {
  return {
    id,
    email: `user${id}@test.com`,
  };
}

module.exports = getUser;

const getUser = require("./fn");

test("return a user object", () => {
  expect(getUser(1)).toBe({
    id: 1,
    email: `user1@test.com`,
  });
});

다음과 같이 toBe() 함수를 사용하면 테스트가 실패한다.

그러나, 다음과 같이 Matcher 함수 부분을 toEqual()로 교체하면

const getUser = require("./fn");

test("return a user object", () => {
  expect(getUser(1)).toEqual({
    id: 1,
    email: `user1@test.com`,
  });
});