참고로 이 글에서 말하는 테스트는 React환경에서 사용하기 위한 방법을 공부한 것을 정리했다.
우선, Jest를 설치한다.
npm install --save-dev jest
yarn add --dev jest
다음으로 간단한 예시로 sum.js 파일을 하나 만들고, 다음과 같이 작성한다.
function sum(a, b) {
return a + b;
}
이제 위의 코드를 테스트하기 위한 sum.test.js 테스트 파일을 하나 생성한다.
const { sum, sumOf } = require("./sum");
//test, it --> 새로운 테스트 작성
test("adds 1 + 2 to equal 3", () => {
expect(sum(1, 2)).toBe(3);
});
앞서 만든 sum함수를 import해온 다음 테스트 구문에 활용해 제대로 원하는 결과가 테스트되는지 확인하는 코드이다.
이제 테스트 코드를 실행해볼 차례인데, 다음과 같이 pakage.json파일에 추가해준다.
"scripts": {
"test": "jest"
}
아래 명령어를 통해 테스트를 실행하도록 한다.
npm run test
테스트 코드가 제대로 통과가 된다면, 다음과 같은 결과가 나타날 것이다. 참고로 아래 결과는 VSCode를 사용했을 때 나타난 결과이다.
PASS ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)
추가적으로 describe를 사용을 해보기 위해 sum.js파일에 새로운 함수를 추가해주자. 여기서 describe 메서드는 여러 테스트 케이스를 묶어주는 기능을 한다.
// sum.js
function sum(a, b) {
return a + b;
}
// 배열의 합
function sumOf(numbers) {
return numbers.reduce((acc, current) => acc + current, 0);
}
module.exports = { sum, sumOf };
그리고 테스트 코드 역시 수정해주고, 실행을 하게 되면 테스트 결과가 나타난다.
// sum.test.js
const { sum, sumOf } = require("./sum");
describe("sum", () => {
it("calculates 1 + 2", () => {
expect(sum(1, 2)).toBe(3);
});
it("calculates all numbers", () => {
const array = [1, 2, 3, 4, 5];
expect(sumOf(array)).toBe(15);
});
});
test 대신 it을 사용해도 같은 기능이다. 다만 it을 사용하게 되면, 테스트 케이스 설명을 영어로 작성할 경우 "말이 되게" 매끄럽게 작성 가능해져 사용한다고 한다.
반응형
'JavaScript' 카테고리의 다른 글
[JavaScript] 객체, 배열 자료 다루기 - JSON 데이터 (0) | 2020.09.24 |
---|---|
[JavaScript] Advice Slip API 이용한 간단한 웹앱 - Fetch (0) | 2020.08.19 |
[JavaScript] Numbers API를 이용한 프로젝트 - AJAX, Fetch (0) | 2020.08.10 |
[JavaScript] AJAX 란 무엇인가? (0) | 2020.07.17 |
[JavaScript] Event - addEventListener, 이벤트 객체 (0) | 2020.05.14 |