자바스크립트 Jest로 유닛 테스트하는 방법

자바스크립트 Jest 라이브러리를 사용하면 작성한 자바스크립트 코드가 예상대로 작동하는 지 테스트해볼 수 있습니다.

Jest 테스트 라이브러리 설치

$ npm i --save-dev jest

라이브러리 설치 후 package.json의 script 부분에서 "test": "jest"를 다음과 같이 수정해줍니다.

{
  "scripts": {
    "test": "jest"
  },
  "devDependencies": {
    "jest": "^29.2.2"
  }
}

Jest 유닛 테스트 방법

다음과 같이 더하기 함수 sum이 있다고 해보겠습니다.

// sum.js

function sum(a, b) {
  return a + b;
}

module.exports = sum;

이를 테스트하라면 sum.test.js 파일을 새롭게 생성하고 다음과 같이 sum 함수를 불러온다음, Jest에서 제공하는 test 함수를 사용하여 아래와 같이 코드를 작성합니다. 

//sum.test.js

const sum = require('./sum')

test('test message: properly adds two numbers', () => {
  expect(sum(1, 2)).toBe(3);
})

첫 인자는 테스트 메시지이며 다음은 테스트를 수행할 로직입니다. sum(1, 2)를 실행할 경우 결과가 3이 되어야 하므로 이를 () => { expect(sum1, 2,)).toBe(3)};과 같이 작성할 수 있습니다.

 

npm test 실행 시 다음과 같이 테스트 결과가 안내됩니다.

테스트 성공

테스트 실패

또 다른 예시를 한 번 살펴보도록 하겠습니다. 다음과 같이 한 배열을 복제하는 함수 cloneArray가 있습니다.

//cloneArray.js

function cloneArray(array) {
  return [...array];
}

module.exports = cloneArray;

이제 테스트 코드를 작성해보겠습니다.

//cloneArray.test.js

const cloneArray = require("./cloneArray");

test("properly clone arrays", () => {
  const array = [1, 2, 3];
  expect(cloneArray(array)).toBe(array);
});

아래와 같이 오류가 발생합니다. 이는 두 배열이 값은 같지만 실제로는 다른 메모리에 서로 다른 배열로 존재하기 때문입니다.

이 때는 toBe를 toEqual로 바꿔주면 성공적으로 테스트를 통과합니다.

//cloneArray.test.js

const cloneArray = require("./cloneArray");

test("properly clone arrays", () => {
  const array = [1, 2, 3];
  expect(cloneArray(array)).toEqual(array);
});

Jest에서 테스트를 진행한 로그 찍기

위에서 테스트 코드는 성공 또는 실패의 결과만 출력해줄 뿐 어떤 함수가 어떻게 테스트를 통과했는지는 보여주지 않습니다. 해당 로그를 찍으려면 package.json에서 "test": "jest --coverage"와 같이 수정해줍니다.

{
  "scripts": {
    "test": "jest --coverage"
  },
  "devDependencies": {
    "jest": "^29.2.2"
  }
}

이후 다시 테스트를 진행하면 아래와 같이 메시지가 출력됩니다.

또한 lcov-report 디렉토리 내에 index.html 파일이 생성된 것을 볼 수 있는데요. 해당 파일을 열어보면 다음과 같이 시각화된 테스트 결과를 볼 수 있습니다.

만약, 새로운 함수를 만들고 테스트를 진행하지 않는다면 다음과 같이 표시되며 해당 파일을 이름을 클릭하면 테스트가 진행되지 않은 부분을 확인할 수 있습니다.

이상으로 Jest를 사용하여 자바스크립트 유닛 테스트를 진행하는 방법에 대해 알아봤습니다.