Jest로 자바스크립트 코드 테스트하기 - 일반 매처(matcher) 사용하기

개발 공부를 하면서 웹 프로젝트를 할 때, TDD(테스트 주도 개발)로 개발하면 좋을 것 같아서 javascript의 테스트 프레임워크인 Jest에 대해 알아보고 공부해 보았다.

 

Jest

: Jest란 단순한 JavaScript 테스트 프레임워크이며 Babel, TypeScript, Node, React, Angular, Vue 등을 사용하는 프로젝트에서 작동한다.

 

Jest 설치하기

jest 사용을 위해 yarn이나 npm을 통해 설치합니다.

$ yarn add --dev jest

또는,

$ npm install --save-dev jest

설치 후, package.json, jest.config.js에 다음의 내용을 추가해준다.

// package.json

"scripts": {
  "test": "jest --watchAll"
}

// jest.config.js

module.exports = {
  transform: {},
};

 

*Jest CLI Options

• —watch: 파일에서 변경 사항을 감시하고 변경된 파일과 관련된 테스트를 다시 실행
• —watchAll: watch와 다르게 모든 테스트를 다시 실행

 

테스트코드 실행방법

$ yarn test

또는,

$ npm run test

 

테스트코드 작성하기

테스트 코드는 test 디렉토리를 새로 만든 후, 그 디렉토리 안에 .jest 파일을 생성하여 만들어 주었다.

javascript ES6 문법을 사용하고자 우선 Babel을 설치해줬다.

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

babel.config.js 파일을 프로젝트 루트에 생성하고 다음 내용을 추가해준다.

// babel.config.js

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

package.json

"script" {
    ...
    "babel": "babel-node"
}

 

매처(matcher) 사용하기

Jest는 여러 방법으로 테스트하기 위해 매처(matcher)를 사용한다.

 

- 일반 매처 사용하기

일반 매처는 값을 테스트하는 가장 간단한 방법으로 값이 정확히 일치하는지 확인하는 것이다.

test('sum 2 + 2', () => {
  expect(2 + 2).toBe(4)
}

expect(value) : 예상 객체 반환

.toBe(value) : 이 값과 일치하는지 확인(매처), '===' operator 보다 테스트에 더 좋다.

 

일반 매처 테스트 코드 예제

// sum.js

function sum(a, b) {
  return a + b
}

export { sum }

// calculate.test.js

import { sum } from './sum'

test('sum 1 + 2', () => {
  expect(sum(1, 2)).toBe(3)
})

sum.js란 파일을 하나 만들어서 function을 export해주었다. ES6의 export/import 문법을 사용하여 구현하였다.

 

test 폴더안에 calculate.test.js 파일을 생성하여 sum function을 테스트하기 위한 코드를 입력해 주었다.

test는 테스트 케이스를 만드는 함수이며, expect는 toBe 함수를 통해 특정 값이 조건을 만족하는지, 오류가 발생했는지를 확인한다. 조건을 만족하면 테스트는 성공이고, 값이 다르거나 오류가 발생하면 테스트를 실패시킨다.

 

보통 test 함수는 it 함수로 대체하여 사용하기도 한다.

 

* test() vs it()

// calculate.test.js

import { sum } from './sum'

test('sum 1 + 2', () => {
  expect(sum(1, 2)).toBe(3)
})

// calculate.test.js

import { sum } from './sum'

test('sum 1 + 2', () => {
  expect(sum(1, 2)).toBe(3)
})

it과 test 모두 작동방식은 동일하다. 두 키워드 모두 존재하는 이유는 기존 유명한 테스트 프레임워크인 Mocha, Jasmine에선 it()을 사용하여서 친숙함과 마이그레이션을 위해 test()와 it()을 둘 다 사용한다고 추측한다.

 

테스트 코드 예제 출력 결과

테스트를 통과하면 다음과 같이 출력되는 것을 확인할 수 있다.

 

---

참고

https://mulder21c.github.io/jest/docs/en/next/getting-started

Jest · 🃏 Delightful JavaScript Testing

https://velog.io/@velopert/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%85%8C%EC%8A%A4%ED%8C%85%EC%9D%98-%EA%B8%B0%EC%B4%88

자바스크립트 테스팅의 기초

https://medium.com/weekly-webtips/my-discovery-journey-with-jest-test-vs-it-2cc7420a2cbe

My Discovery Journey with Jest: test() vs it()