[TDD를 적용해보자 2편]TDD 설정(React,Typescript)

TwentyFiveSeven·2021년 1월 7일

TDD를 적용하기전 설정부터 💧

이부분에서 최근 바뀐내용과 찾기 힘든 부분이 많아서 어려움을 많은 어려움을 겪었습니다. 제가 해결한 방법들을 설명해드리겠습니다.

우선 설치부터 🌚

npm i -D @testing-library/jest-dom @testing-library/react @types/jest babel-jest ts-jest
- 기존에는 react-testing-library와 jest-dom 을 사용하였습니다.
- 현재는 @testing-library/react와 @testing-library/jest-dom 으로 변경되었습니다.
npm i -g -D jest
- 저의 경우에는 jest를 -g 옵션없이 jest를 실행할경우 찾지 못하여 -g 옵션을 줘서 global로 설정하였습니다.

다음은 Package.json의 Script설정 🌛

{
  ...
  "script": {
    "test": "jest"
  }
}

실행은 npm run jest 명령어를 사용하면 됩니다.

🔥하지만🔥

저는 이러한 에러를 마주했습니다 😂

그럼 TypeScript + Jest 설정은 어떻게 해야하죠? 🙄

우선 앞에 보여줬던 에러는 왜 발생하는 것 일까요?

jest는 JavaScript 테스트 도구입니다.
- 때문에 TypeScript를 위한 도구가 필요합니다.
jest는 CommonJS 모듈 시스템을 사용합니다.
- 때문에 ES6문법인 import-export를 적용하면 에러가 발생합니다.

그래서 우리가 할일은 🏄‍♂️

1. root directory에 jest.config.js 파일을 만든다.

jest만을 위한 설정파일을 만들 것 입니다.

//jest.config.js
module.exports = {
  moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'json'],
  transform: {
    '^.+\\.(js|jsx)?$': 'babel-jest',
    '^.+\\.(ts|tsx)?$': 'ts-jest',
  },
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
  },
  testMatch: [
    '<rootDir>/**/*.test.(js|jsx|ts|tsx)',
    '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))',
  ],
  transformIgnorePatterns: ['<rootDir>/node_modules/'],
};

위 코드가 jest.config.js 파일 내용입니다.
하나씩 차근차근 설명해보겠습니다.

2. TypeScript에서 jest를 실행하기 위한 도구를 추가해보자

처음 설치했던 것 중에 ts-jest 기억나시나요 ?
jest.config.js안에 transform을 보면 정규식으로 '^.+\\.(ts|tsx)?$': 'ts-jest' 부분이 보이실겁니다.
눈치채셨겠지만 ts, tsx 파일을 필터링하고, ts-jest를 통해 TypeScript에서 jest를 사용할 수 있도록 해줍니다.

3. ES6문법(import,export)를 ES5문법으로 변경하자

앞서 npm으로 babel-jest를 설치하였습니다.
jest.config.js안에 transform을 보면 정규식으로 '^.+\\.(js|jsx)?$': 'babel-jest' 부분이 보이실겁니다.
이부분은 ES5 위의 문법들을 ES5로 바꿔주는 것인데 이 부분은 Babel의 설정이 이미 되어있다는 가정하에 적용할 수 있습니다.

4. Babel 설정을 하자( Babel이 알고싶다면 여기로 이동해주세요)

우선 root directory에 .babel.config.jest 파일을 만듭니다.
다음으로 터미널에 npm i -D @babel/preset-typescript @babel/preset-env 명령어를 입력합니다.

//.babel.config.jest
{
  "presets": ["@babel/preset-typescript", "@babel/preset-env"],
}

이 후에 위에 코드를 .babel.config.jest에 입력해줍니다.
위에 코드를 간단히 설명하자면, Babel은 Plugin으로 돌아가는 도구입니다.
그렇다면 위에 presets은 무엇일까요? 바로 plugin들을 모아놓은 것입니다.
preset-env 는 JS문법을 ES5로 맞추기 위한 plugin들의 집합을 뜻하고, preset-typescript는 TS -> JS를 위한 plugin들의 집합입니다.
위와 같은 설정이 끝났다면 이제 3번의 babel-jest가 적용됩니다.

5. Package.json의 script를 변경해보자.

사실 이부분은 모두에게 필요한 작업은 아니지만, 만약npm run test를 진행하였을 떄도 같은 문제가 발생하시는 분이 있다면 적용해주면 됩니다.

// package.json
{
  ...
  "script": {
    "test": "jest --config=jest.config.js"
  }
}

글을 마치며

이제 npm run test를 해보시면 *.test.*와 같은 파일들이 잘 돌아가는 것을 확인할 수 있습니다 👊
제가 설정하는 곳에서 삽질을 많이 하다보니 결국 이렇게 설정까지 정리하게 되었네요... 🤦‍♂️
글이 길어져 사용법은 다음 3편에 정리해보겠습니다.
감사합니다 !