[JEST] REACT APP 테스트 적용하기 with typescript

jest 사용해서 테스트 코드 적용하기

프로젝트를 진행하다보니 unit 테스트부터 테스트가 잘안되는 환경이 자주 생겨난다.

최소한의 테스트를 할 수 있게하는 방안을 마련하려고 한다.

기본적인 설치법은 jestjs.io Get Started 참고
[https://jestjs.io/docs/getting-started](jestjs 홈)

시작은 테스트 스크립트 만들어주기
package.json

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

방법에는 2가지

1 ts-jest 사용

이게 좀 쉬운듯 : 사이드 이펙트는 아직 미검증

yarn add -D jest @types/jest 

yarn add -D ts-test 

npx ts-test config:init 

jest.config.js 만들어지고 yarn test하면 잘돌아간다.

주의 : 테스트 할 함수가 export 없이 정의되면 에러 발생

jest.config.js에 추가

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  globals: { //추가
    'ts-jest': {
      isolatedModules: true,
    },
  },
};

2 바벨 + 타입스크립트 설정 Jest 설치 (타입스크립트가 사용되고 있다고 가정하고 설치한다.)

yarn add -D jest @types/jest 

yarn test :

함수가 js 타입이면 정상 테스트 된다.

describe('js test', () => {
  it('이건 테스트 타이틀 메시지1', () => {
    expect(3 + 4).toBe(7);
  });

  it('이건 테스트 타이틀 메시지2', () => {
    const name = 'yuds';
    expect(name).toBe('yuds');
  });
});

함수가 그냥 타입스크립트 형식으로 작성되어있으면 syntax 오류 발생한다.

해결안 : 바벨 설정 + 타입스크립트 설정

바벨 설치

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

babel.config.js 만들고

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

typescript 설치

yarn add -D @babel/preset-typescript

babel.config.js에 추가

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

yarn test : done ! !