상태 관리 라이브러리를 개발할 때 테스트는 매우 중요합니다. 테스트를 통해 코드의 안정성을 확보하고 예상치 못한 버그를 방지할 수 있습니다. 이번 블로그에서는 타입스크립트와 Jest를 사용하여 상태 관리 라이브러리를 테스트하는 방법에 대해 알아보겠습니다.

Jest 소개

Jest는 페이스북에서 만든 자바스크립트 테스트 프레임워크로, 타입스크립트와의 호환성이 뛰어나며 강력한 기능을 제공합니다. Jest는 간편한 구성과 실행이 가능하며, mocking, assertion, 비동기 코드 테스트 등을 지원합니다.

타입스크립트와 Jest 설정

우선 Jest를 프로젝트에 추가하고 타입스크립트와의 호환성을 설정해야 합니다. ts-jest 패키지를 사용하면 간단히 설정할 수 있습니다.

npm install --save-dev jest @types/jest ts-jest

그 후 tsconfig.json 파일을 열고 다음과 같이 설정합니다.

{
  "compilerOptions": {
    "jsx": "react",
    "esModuleInterop": true
  },
  "compileOnSave": false,
  "exclude": ["node_modules", "dist"],
  "include": ["src", "tests"]
}

babel-jest와 같은 플러그인을 사용하지 않아도 jest에 대한 typescript 지원과 함꼐 사용할 수 있습니다.

테스트 작성

이제 테스트 파일을 작성할 차례입니다. 예를 들어 상태 관리 라이브러리의 액션 생성자 함수를 테스트해보겠습니다.

// actionCreators.ts
export const increment = (value: number) => {
  return {
    type: 'INCREMENT',
    payload: value
  };
};

export const decrement = (value: number) => {
  return {
    type: 'DECREMENT',
    payload: value
  };
};

다음은 Jest를 사용하여 액션 생성자 함수를 테스트하는 예제 코드입니다.

// actionCreators.test.ts
import { increment, decrement } from './actionCreators';

describe('Action Creators', () => {
  test('increment action creator', () => {
    expect(increment(1)).toEqual({ type: 'INCREMENT', payload: 1 });
  });

  test('decrement action creator', () => {
    expect(decrement(5)).toEqual({ type: 'DECREMENT', payload: 5 });
  });
});

위의 코드는 increment 함수가 올바르게 작동하는지를 테스트하고, decrement 함수도 동일한 방식으로 테스트합니다.

테스트 실행

마지막으로 터미널에서 다음 명령어를 이용하여 테스트를 실행합니다.

npm test

이렇게 하면 Jest가 실행되고 테스트가 수행됩니다.

이렇게 함으로써 Jest와 타입스크립트를 사용하여 상태 관리 라이브러리의 테스트를 개발할 수 있습니다.

위에서 설명한 내용을 토대로, 다양한 상황에서 테스트하는 방법을 익혀두면 프로젝트 퀄리티를 높일 수 있을 것입니다.