오늘은 Jest를 사용한 테스트 코드 작성법에 대해 포스팅을 해보려고 한다.
여러 테스트 중에서 가장 기본적인 단위 테스트를 기준으로 알아볼 예정이다!
많은 테스팅 라이브러리가 있지만 오늘은 Jest를 사용하는 것에 초점을 맞춰 보려고 한다.
📌 Jest
Jest란 페이스북에서 만든 테스팅 라이브러리이다.
가장 기본적인 테스트 툴로 이 라이브러리만 설치하면 따로 필요한 설정 없이 사용 가능하다. 또한 이전에는 JavaScript코드를 테스트하기 위해 여러 라이브러리를 조합해서 사용하곤 했었는데 Jest는 Test Runner, Test Mathcher,Test Mock프레임워크까지 모두 제공해주기 때문문에 매우 유용하다!
💡 설치 및 사용방법
- 설치:
yarn add -D jest
설치 후에는package.json파일에test스크립트를jest로 추가해준다!
- 폴더 및 파일 생성
테스트 파일들의 경우src폴더 아래test폴더를 생성한 후--.test.tsx/js/jsx 등등이런식으로 파일을 생성해준다.
그래야yarn test명령어를 입력했을 때jest가test폴더 아래에 있는 파일들을 테스트한다!
이렇게 하면 세팅은 끝!
🤔 예제
📌 함수 테스트
Jest의 공식문서에 나오는 예제를 하나 사용해보자 !
// 합을 구하는 함수 sum.ts
export const sum = (a: number, b: number): number => {
return a + b;
};위의 함수를 테스트 하는 테스트 코드를 작성해보자.
// sum함수를 테스트 하는 sum.test.ts
import { describe, expect, test } from '@jest/globals';
import { sum } from 'sum';
describe('sum module', () => {
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
});이렇게 코드를 작성한 이후 yarn test명령어를 사용해 테스트를 진행해보았을 때 Pass가 나오면 성공/Failed가 나오면 실패인 것이다!
📌 컴포넌트 테스트
위에서는 함수를 테스트 해보았는데 프론트엔드 개발을 하면서 만드는 컴포넌트들도 테스트가 가능하다!
Jest와 함께 React에서 제공하는 testing-library를 사용하면 작성할 수 있다!
간단한 카운터를 구현해보자.
// Counter.tsx
import React, { useState } from "react";
export default function Counter() {
const [count, setCount] = useState<number>(0);
const onIncrease = () => setCount(count + 1);
const onDecrease = () => setCount(count - 1);
return (
<div>
<h2>Counter</h2>
<p>{count}</p>
<button onClick={onIncrease}>+</button>
<button onClick={onDecrease}>-</button>
</div>
);
}다음으로 카운터 컴포넌트를 테스트할 코드를 작성해보자
(카운트 증가 기능에 대한 테스트 코드)
// counter.test.ts
import { fireEvent, render, screen } from "@testing-library/react";
import { act } from "react-dom/test-utils";
import userEvent from "@testing-library/user-event";
describe("Counter", () => {
// 렌더링이 잘되는지 확인
it("render correctly", () => {
renderCounter();
expect(screen.getByText("Counter")).toBeInTheDocument();
});
it("increase test", () => {
renderCounter();
const button = screen.getByText("+");
fireEvent.click(button);
expect(screen.getByText("1")).toBeInTheDocument();
});
});💻 코드 구조
위의 테스트 코드의 구조를 살펴볼 것이다.
describe(desc, func): 관련된 테스트들을 그룹화하는 역할을 한다. 첫 번째 인자로 해당 테스트에 대한 설명을 적고 그 이후부터는 it을 사용해 테스트 코드를 작성한다.test(content, func): 테스트할 내용, 수행할 로직expect(testing logic or something).toBe(expected result): 검증을 수행하는 함수로 검증을 진행할 로직과 기대값을 의미.it: 하나의 테스트를 정의하는 역할. 이 함수의 첫 번째 인자로는 해당 테스트의 이름을 지정. 두 번째 인자로 실제 테스트 코드를 작성한다.screen: DOM요소에 접근해 검증하는 데에 사용되는 객체. 이를 사용해 요소를 찾고 그 요소가 존재하는지, 보이는지의 여부를 검증할 수 있다.fireEvent: DOM이벤트를 발생시키는 함수getByText: DOM에서 특정 텍스트를 포함한 요소를 검색하는 데에 사용하는 함수.
테스트 코드를 단편적으로 쉽게 이해하면 코딩테스트에 비유해 이해할 수 있다!
코테를 보면서 코드를 돌려볼 때 여러 테스트 케이스들을 실행하는데 test는 테스트 케이스들을 넣어보는 것이고 expected는 내 코드의 결과와 기댓값이 모두 같다면 Pass인 것!
함수보다는 컴포넌트 테스트 코드를 작성하는게 체감상 더 어렵게 다가와서 간단한 예제로도 이해하는 데에 시간이 좀 걸렸다..ㅎㅎ 그래도 이렇게 간단한 예제로나마 테스트 코드를 작성해보니 TDD가 얼마나 중요한지 세삼 느껴진다..!! 이미 만들어놓은 컴포넌트를 기준으로 테스트 코드를 작성하면 예상치 못한 버그나 에러가 와르르 발생할 것 같다😶 다음에 잘 써먹을 수 있게 테스트 코드 작성하는 연습을 하면 매우 좋을 것 같다👩🏻💻
그럼 오늘 포스팅 끝!
