제가 프론트엔드 개발에서 처음으로 유닛 테스트를 경험했던게 Angular 를 처음 사용하던 시기였던것 같습니다. 그 당시엔 이건 뭐지? 왜 항상 Javascript 소스와 동일한 이름의 spec 파일이 생성될까? 이거 꼭 필요한가? 라는 생각으로 자세하게 보지 않았습니다.

사실 그당시에는 Angular 프로젝트를 진행하면서도 유닛 테스트 파일을 만들지 않고 개발을 진행한적이 많았습니다. 물론 현재는 테스트 주도 개발의 중요성을 항상 느끼고 있으며 Angular 의 Jasmin 부터 현재의 Jest를 사용하여 프로젝트를 진행하고 있습니다.

테스트 주도 개발이란

• 즉 개발자는 먼저 요구사항을 검증하는 자동화된 테스트 케이스를 작성하고,
• 그 테스트 케이스를 통과하기 위한 최소한의 코드를 생성하며,
• 마지막으로 작성한 코드를 표준에 맞도록 리팩토링을 진행하는 개발 방식입니다.

그럼 이번 포스트에서는 테스트 주도 개발의 핵심인 Jest 유닛 테스트 프레임워크에 대해서 알아보는 시간을 갖도록 하겠습니다.

Jest 란?

Jest는 페이스북에서 개발한 React 에 포함되어 있는 Javascript 테스트 도구입니다.

현재 Jest는 React 뿐만아니라, 여러 프레임워크 프로젝트에서 같이 사용할 수 있으며, 간단한 설정만으로도 빠르게 테스트를 진행할 수 있는 매력적인 Javascript 유닛 테스트 도구입니다.

또한, Jest는 Test Runner와 Test Mathcher 그리고 Test Mock 프레임워크까지 제공해주기 때문에 다른 유닛 테스트 툴보다 상당히 편리합니다.

STEP1 : Jest 설치하기

먼저 프로젝트 디렉터리를 생성하고 NPM을 이용해 초기화를 진행합니다.

$ mkdir my-jest
$ npm init -y
$ ls
package.json

프로젝트 초기화를 완료했다면 이제 본격적으로 Jest 라이브러리를 설치합니다.

$ npm install --save-dev jest

프로젝트에 Jest 라이브러리를 설치했다면 실행 명령어를 package.json의 scripts 에 추가합니다.

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

앞으로 test 파일을 생성하고 터미널에 npm run test 를 실행시키면 Jest 테스트 커멘트를 실행할 수 있습니다.

Jest 는 테스트를 위한 methods와 objects를 글로벌 환경에 설정하기 때문에, 테스트를 위해 require 또는 import 를 사용하지 않아도됩니다. 그러나 명시적인 import 를 선호하는 경우 ‘import {describe, expect, it} from @jest/globals’ 를 사용해서 가져올 수 있습니다.

STEP2 : Jest 테스트 코드 작성

그럼 간단하게 Jest 테스트 코드를 작성해 보겠습니다.

test("true is true", () => {
  expect(true).toBe(true)
})

간단한 테스트 코드를 작성하고 테스트를 진행해 봅니다.

$ npm test

> my-jest@1.0.0 test /my-jest
> jest

 PASS  ./test.js
  ✓ true is true (3ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.468s, estimated 1s
Ran all test suites.

첫 번째 코드를 작성하고 멋지게 통과했습니다.

npm test 실행시 Jest는 프로젝트 내에 모든 테스트 파일을 테스트 하며, test , _ _test _ _ 디렉터리 내에 모든 테스트 기본 테스트 파일로 인식하고 자동으로 테스트를 진행합니다. 하지만 특정 테스트 파일만 실행하고 싶다면 npm test <파일명 또는 경로> 를 입력해 실행합니다.

그럼, 다음 포스트에서는 Jest 테스트 코드를 다양하게 작성하기 위한 Matcher에 대해서 알아보도록 하겠습니다.