Jest로 테스트 코드 작성하기

React

Jest로 테스트 코드 작성하기

B_Tae 2023. 8. 18. 00:28

본 글은 Jest 29.5V Docs를 기반으로 작성했습니다.

간단한 테스트 작성하기

Jest 설치

yarn add --dev jest

본 글에서는 yarn을 기준으로 작성하겠습니다. npm은 Docs에 나와있으니 참고 부탁드립니다.

package.json 수정

{
...
  "scripts": {
    "test": "jest"
  }
...
}

테스트 코드 작성

/* sum.ts */
// 테스트할 함수 
function sum(a, b) {
  return a + b;
}
module.exports = sum;

/* src > __tests__ > sum.test.ts */
// 테스트 코드
const sum = require('./sum');

describe("sum module", () => {
  it("adds 1 + 2 to equal 3", () => {
    expect(sum(1, 2)).toBe(3);
  });
});

ES6 문법이 익숙하신 분들은 위 코드에 어색함이 있을 것 같아요. ES6부터는 import,export를 주로 사용했지만, 따로 Babel을 설정하지 않으면 Jest가 ES6문법을 해석 할 수 없습니다. 설정하는 건 아래에 나옵니다.

여기서 중요한 건 폴더명 또는 파일명입니다.
Jest는 기본적으로 __tests__폴더내에 테스트, xxxx.test.ts, xxxx.spec.ts명으로 만들어진 테스트 를 실행합니다. 따라서 다른 폴더명 혹은 파일명을 사용할 경우 테스트가 불가할 수 있습니다. 물론 CLI명령어를 통해 특정 파일명 혹은 폴더에 테스트를 실행할 수 있습니다. 링크를 통해 명령어를 확인 할 수 있습니다.

테스트 코드 구조

describe 함수는 특정 모듈이나 함수, 또는 테스트에 대한 설명을 포함하는 블록을 생성하는데 사용합니다. 테스트를 구성하는 데 사용되며, 보통 비슷한 테스트 케이스를 그룹화하는 데 사용됩니다. 또한 중첩하여 사용할 수 있으며, 그룹 내에 it(또는 test) 블록을 작성할 수 있습니다.

it(또는 test) 함수는 어떤 일이 발생해야 하는지에 대한 테스트 케이스를 작성하는 데 사용됩니다.

함수는 it(description, callback, timeout)구조를 갖추고 있습니다.

description은 어떤 테스트인지 이름이라고 생각하면 됩니다. 영문과 한글 상관없습니다. \

callback은 테스트를 진행할 코드를 작성하면 됩니다.

timeout은 만료 제한 시간입니다. 보통 비동기 통신을 위해 사용합니다. 테스트 과정에서 정해진 시간을 넘길 경우 테스트 실패로 종료하게됩니다. 단위는 ms단위를 사용하며 해당 시간이 지난 후에 테스트를 실행합니다. timeout는 생략이 가능하며 생략할 경우 기본값으로 설정됩니다. 기본값은 jackage.json 또는 jest.config.js에서 설정이 가능합니다. 따로 지정하지 않을 경우 5초를 기본값으로 갖습니다.

테스트 실행

yarn test

위 과정을 따라하셨다면 아래와 같은 결과가 나타납니다.

추가 구성하기

Jest는 Babel을 이용하여 ES6 문법과 Typescript를 지원합니다.

ES6와 Typescript를 사용할 수 있도록 추가 세팅을 해봅시다.

jest --init

먼저 Jest를 초기화합니다. jest를 설치한 적이 없다면 yarn global add jest명령어를 통해 설치해줍니다.

Mac 사용자는 위 명령어로 jest 글로벌 설치가 안된다면 앞에 sudo를 작성하여 설치하면 됩니다.

라이브러리 설치

yarn add --dev babel-jest @babel/core @babel/preset-env

babel을 사용하기 위해 위 명령어로 종속 항목을 설치하세요

yarn add --dev @babel/preset-typescript

typescript를 사용하기 위해 위 명령어를 통해 종속 항목을 설치하세요.

그러나 Babel의 TypeScript 지원은 순전히 변환이기 때문에 Jest는 테스트가 실행될 때 유형을 확인하지 않습니다.

원하는 경우 대신 ts-jest를 사용하거나 TypeScript 컴파일러 tsc를 별도로(또는 빌드 프로세스의 일부로) 실행할 수 있습니다.

yarn add --dev ts-jest

babel.config.js 생성

프로젝트 root위치에 babel.config.js를 생성하고 아래 코드를 넣어주세요

module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    '@babel/preset-typescript',
  ],
};

추가적으로 Jest에서 제공하는 Global객체 사용과 자동완성을 위해 추가 라이브러리를 설치합니다.

yarn add --dev @jest/globals
yarn add --dev @types/jest

마무리

Jest를 이용한 테스트 코드 작성하는 방법을 정리해봤습니다. 다음 포스트는 React와 같은 DOM을 조작하여 테스트하는 방법에 대해 정리해보도록 하겠습니다.

Jest 문서를 보고 정리했지만 제가 착각하고 잘못 이해한 내용이 있을 수 있습니다. 피드백은 항상 감사합니다!!

저작자표시