프론트엔드 개발

Jest 실습 본문

Front-End/TDD

Jest 실습

태나미 2021. 9. 8. 02:06
Jest 공식 홈페이지를 보고, 번역하면서 작성하였습니다

Jest 라이브러리 설치 

1) yarn을 이용

yarn add --dev jest

2) npm을 이용

npm install --save-dev jest

테스트 파일 생성

  • 파일 위치 : 테스트할 파일이 있는 폴더 내
  • 폴더 이름 : __test__
  • 파일 이름 : 파일 이름.test.js 또는 파일 이름.spec.js

테스트 코드 작성

두 개의 숫자를 더하는 가상 함수에 대한 테스트를 작성하는 것으로 시작해 보겠습니다.

먼저 sum.js 파일을 만듭니다.

sum.js

function sum(a, b) {
  return a + b;
}
module.exports = sum;

sum.test.js

const sum = require('./sum');

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

test 스크립트 수정

package.json

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

마지막으로  yarn test  또는  npm run test를 실행하면 Jest가 다음 메시지를 출력합니다.

Matcher

Jest는 "Matcher"를 사용하여 다양한 방식으로 값을 테스트할 수 있습니다.

일반적으로 사용되는 몇 가지 matcher를 알아보겠습니다.

Common Matcher

test('two plus two is four', () => {
  expect(2 + 2).toBe(4);
});

이 코드에서 expect()는 "expectation" 객체를 반환합니다.

일반적으로 호출 일치자를 제외하고 이러한 기대 개체로 많은 작업을 수행하지 않습니다.

toBe()matcher입니다. Jest가 실행되면 모든 실패한 "matcher"를 추적하여 오류 메시지를 출력할 수 있습니다.

또한, toBe는 Object.is를 사용하여 정확한 동등성을 테스트합니다.

 

객체(Object)의 값을 확인하고 싶으면, toEqual을 사용해야 합니다.

test('object assignment', () => {
  const data = {one: 1};
  data['two'] = 2;
  expect(data).toEqual({one: 1, two: 2});
});

toEqual은 객체 또는 배열의 모든 필드를 재귀적으로 확인합니다.

 

Matcher에 not을 붙여 반대를 테스트할 수도 있습니다.

test('adding positive numbers is not zero', () => {
  for (let a = 1; a < 10; a++) {
    for (let b = 1; b < 10; b++) {
      expect(a + b).not.toBe(0);
    }
  }
});

Truthiness

테스트를 할 때 때로는 undefined, null, false를 구별해야 하지만 이들을 다르게 취급하고 싶지 않을 때가 있습니다.

Jest에는 원하는 것을 명시할 수 있는 것들이 포함되어 있습니다.

  • toBeNullnull 만 일치합니다.
  • toBeUndefinedundefined 만 일치합니다.
  • toBeDefinedtoBeUndefined의 반대입니다.
  • toBeTruthy는 if 문이 true로 취급하는 모든 것과 일치합니다.
  • toBeFalsy는 if 문이 false로 취급하는 모든 것과 일치합니다.
test('null', () => {
  const n = null;
  expect(n).toBeNull();
  expect(n).toBeDefined();
  expect(n).not.toBeUndefined();
  expect(n).not.toBeTruthy();
  expect(n).toBeFalsy();
});

test('zero', () => {
  const z = 0;
  expect(z).not.toBeNull();
  expect(z).toBeDefined();
  expect(z).not.toBeUndefined();
  expect(z).not.toBeTruthy();
  expect(z).toBeFalsy();
});

코드에서 수행하려는 작업과 가장 정확하게 일치하는 matcher를 사용해야 합니다.

 

 

 

 

 

 

 

 

 

 

 

출처:

 

https://jestjs.io/docs/using-matchers

 

 

'Front-End > TDD' 카테고리의 다른 글

Cypress Test해보기 (with Vanilla js)  (0) 2022.03.21
Cypress에 대해  (0) 2022.03.21
Jest  (0) 2021.09.08
TDD란  (0) 2021.09.07
Comments