여러분이 작성한 코드가 제대로 동작하는지 어떻게 확신할 수 있을까요?

새로운 코드를 작성한 후에, 잘 동작을 했습니다. 그리고 다른 새로운 기능을 하는 코드를 작성합니다. 이때 아까까지 잘 동작하던 기존의 기능이 망가졌던 적은 없었나요?

우리의 코드에 변화가 있을 때마다, 직접 브라우저에 들어가 모든 기능을 전부 체크해보는 것은 효율적이지 않고, 빈틈이 있을 수도 있습니다. 그리고 매우 귀찮다고 느끼셨을 겁니다. 그래서 우리에게는 테스트 코드가 필요합니다.

TDD

Test-Driven-Development, 테스트 주도 개발을 의미합니다. 보통의 개발 과정은 다음과 같습니다. 요구 사항을 정의하고, 디자인이 나오고, 이를 토대로 실제 코드를 작성 하고 테스트를 진행합니다.

하지만 TDD는 테스트 코드를 먼저 작성하고 그 후에 테스트를 통과하기 위한 최소한의 실제 코드를 작성합니다. 그 다음에 코드를 리팩토링합니다.

jest로 테스트하기

자바스크립트에서 테스트 코드를 작성하는 것을 도와주는 여러가지 프레임워크들이 있지만, 그 중에 Jest에 대해 알아보겠습니다.

설치

yarn add --dev jest

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

첫번째 테스트 코드 작성

값을 더해주는 기능을 하는 함수를 작성해보고, 제대로 동작하는지 테스트 해보겠습니다.

test 폴더를 생성합니다.

sum.ts 파일을 만들어줍니다.

export const sum = (a: number, b: number) => {
  	return a + b;
};

sum.test.ts 파일을 만들어줍니다.

import { sum } from "./sum";

describe("sum()", () => {
  	it("2와 3이 주어졌을 때, 5가 나와야한다.", () => {
    	expect(sum(2, 3)).toBe(5);
  });
});

package.json 파일에 스크립트를 추가합니다.

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

"jest": {
    "transform": {
        "^.+\\.ts$": "ts-jest"
    },
    "testRegex": "\\.test\\.ts$",
    "moduleFileExtensions": [
        "ts",
        "tsx",
        "js",
        "json"
    ]
  }

이제 터미널에서 yarn test 명령어를 입력합니다. jest는 파일명에 test가 들어간 모든 파일을 찾아 테스트를 진행합니다.

처음으로 작성한 테스트를 통과했습니다!