jest로 typescript 테스트하기, (1)기본설정하기

테스팅 도구인 jest를 사용하면 typescript파일에서 작성한 코드를 테스트 할 수 있습니다!
이번 시간에는 기본적인 설정에 대해 알아봅시다 :)

해당 포스팅에서 진행할 기본설정은 이 링크의 레파지토리에서 볼 수 있습니다 :)

1. 테스트 코드?

테스트 코드를 짜는 이유는

: 방금 구현한 기능이 잘 돌아가는지 확인하거나
: 특정 기능을 변경했을 때 기존에 있던 다른 기능을 깨트리는지 확인하기 위해서입니다.

무엇을 어떻게 테스트 할 것인가?

: 가장 중요한 것은 무엇을 어떻게 테스트 할 것인가 인데요,
: 구현된 코드의 흐름이나 로직을 확인하는 것이 아니라 사용자의 관점에서
: 버튼 클릭과 키 입력 등의 이벤트에 따라 UI가 올바르게 전개되는지 확인해야 합니다.

2. 기본 설정 해보자!

A. 폴더 생성하기

mkdir jest-test
cd jest-test

B. yarn 설정 파일 생성하기

: 아래 명령어를 사용하면, package.json 파일이 생성됩니다.
: 이 파일은 패키지 설정 파일이며, 라이브러리와 스크립트 정보를 정의합니다.

yarn init

C. jest를 위한 라이브러리 설치하기

yarn add -D typescript jest @types/jest ts-jest

D. 바벨 설치하기

: 바벨은 바벨이란 입력과 출력이 모두 자바스크립트 코드로 만들어주는 컴파일러입니다.
: 바벨을 설치하면 JSX 문법, 타입스크립트, 코드 압축, 제안 단계의 문법들을 사용할 수 있습니다.
: 타입스크립트를 사용하기 위해 바벨을 설치해주어야 합니다.

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

E. config 파일 생성하기

: 테스트 도구인 jest에 관한 설정파일을 생성합니다. (jest.config.js)
: 테스트할 파일(XXX.ts)과 그 파일을 테스트 하는 파일(XXX.test.ts)은 서로 가깝게 위치해 있는 게 좋습니다.
: preset를 설정하여 jest 구성 사전 설정을 할 수 있습니다.

//jest.config.js
module.exports = {
  preset: "ts-jest", //trypeScript파일은 ts-jest에서 CommonJS구문으로 변환
  testEnvironment: "node", //테스트 환경
  testMatch: ["**/*.spec.[jt]s?(x)", "**/*.test.[jt]s?(x)"], //테스트 파일 위치
};

F. 테스트 폴더 생성하기

: 프로젝트 루트 위치에 __test__ 폴더를 생성합니다.

mkdir __test__

: __test__에 sample.test.ts을 생성합니다.

//__test__ / sample.test.ts
test("Dummy unit test", () => {
  const actual = 1 + 2;
  expect(actual).toBe(3);
});

G. 테스트 해보기

: 터미널에 아래 명령어를 입력하여 테스트가 잘 되는지 확인해보자!

yarn test

H. vscode에 extension 설치하기

: 만약 vscode를 사용하는 경우, jest, jest Runner를 설치해보세요.
: yarn test를 하지 않고 코드 위에 등장하는 run 버튼으로 바로 테스트할 수 있습니다 :)

출처
아래 링크로 가면 더 자세히 알 수 있다구~ 👍

Mong dev blog