프론트엔드 개발
Jest 실습 본문
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에는 원하는 것을 명시할 수 있는 것들이 포함되어 있습니다.
- toBeNull은 null 만 일치합니다.
- toBeUndefined은 undefined 만 일치합니다.
- toBeDefined은 toBeUndefined의 반대입니다.
- 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 |