javascript

jest를 통한 테스트코드 사용

2023-03-18

jest란?

단순성에 중점을 둔 javascript 테스트 프레임워크로, babel, Typescript, node, React, Angular, Vue 등을 사용하는 프로젝트에서 작동한다.

본 포스팅은 React 환경을 기준으로 작성되었다.

1. jest 설치

npm install --save-dev jest @babel/preset-env
# or
yarn add --dev jest @babel/preset-env

node.js 환경에서 import 등의 ES6 문법을 사용하기 위해 @babel/preset-env도 함께 설치해준다.

2. 루트 경로에 babel.config.js 파일 생성

module.exports = {
  presets: [
    "@babel/preset-env",
    // typescript를 사용하는 경우 yarn add --dev @babel/preset-typescript 설치 후
    // 아래와 같이 preset을 추가해준다.
    // "@babel/preset-typescript"
  ],
};

babel config 파일까지 생성이 완료됐다면 test 파일을 사용할 준비가 다 된 것이다.

3. jest가 인식하는 test file 이름

{filename}.test.js
{filename}.spec.js

4. 테스트 실행

jest 커맨드만으로도 테스트 코드를 진행할 수 있지만, 다른 플래그와 함께 사용할 수 있다.

--coverage # 프로젝트의 테스트 커버리지를 함께 나타내준다.
--watch # 대상 코드나 테스트 코드에 변경이 생기면 테스트를 다시 실행한다.

# ex) yarn jest --watch --coverage

jest만 실행한 터미널

--coverage와 함께 실행한 터미널

참고 : jest는 테스트 코드 내에서 오류가 발생할 때만 테스트를 fail시키기 때문에 test("",()=>{})와 같이 테스트 코드가 비어있더라도 테스트를 통과할 수 있다.

5. 테스트 코드 패턴

AAA 패턴 (Arrange - Act - Assert)

A 조건에서 B를 실행했을때 예상한 결과가 C가 나오는가? 라는 흐름의 패턴이다.

예제

// 기존 함수
export const add = (a, b) => {
  return a + b;
};

// somefn.spec.js - 테스트코드 함수

import { add } from "./someFn";

test("add 함수 테스트: result = a+b", () => {
  // 조건
  const a = 2;
  const b = 3;
  const result = 5;

  // 실행
  const actResult = add(a, b);

  // 평가
  expect(actResult).toBe(result);
});