Jest#
Facebook에서 개발한 인기 있는 JavaScript 테스팅 프레임워크로, JavaScript 코드의 단위 테스트(Unit Test)를 위해 설계되었다.
주로 React 애플리케이션과 함께 사용되지만, Vue, Angular, Node.js 등 다양한 JavaScript 프로젝트에서도 널리 사용된다.
주요 특징#
- 간단한 설정: 추가 설정 없이 바로 사용 가능한 “제로 구성” 철학을 따른다.
- 빠른 실행: 병렬 처리를 통해 테스트를 빠르게 실행한다.
- 모의(Mock) 기능: 복잡한 의존성을 가진 코드도 쉽게 테스트할 수 있다.
- 코드 커버리지: 내장된 코드 커버리지 도구를 제공한다.
- 스냅샷 테스팅: UI 컴포넌트의 변경사항을 쉽게 추적할 수 있다.
- 통합된 솔루션: 테스트 러너, 단언 라이브러리, 모의 기능을 모두 제공한다.
- 쉬운 사용법: 직관적인 API로 테스트 작성이 용이하다.
- 풍부한 매처(Matcher) 함수: 다양한 비교 함수를 제공한다.
- 활발한 커뮤니티: 지속적인 업데이트와 지원을 받을 수 있다.
단점 및 한계#
- 브라우저 환경 테스트의 제한: JSDOM을 사용하여 브라우저 환경을 시뮬레이션하지만, 실제 브라우저와는 차이가 있다.
- 학습 곡선: 고급 기능을 사용하기 위해서는 추가적인 학습이 필요할 수 있다.
- 설정의 복잡성: 대규모 프로젝트에서는 설정이 복잡해질 수 있다.
사용 방법#
설치
1
| npm install --save-dev jest
|
package.json에 테스트 스크립트 설정
1
2
3
4
5
6
| {
"scripts": {
"test": "jest",
"test:watch": "jest --watch"
}
}
|
테스트 파일 작성
*.test.js 또는 *.spec.js 형식으로 파일 생성
테스트 실행
npm test
주요 명령어 및 예시#
주요 명령어#
test(): 개별 테스트 케이스를 정의한다.describe(): 관련된 테스트들을 그룹화한다.expect(): 값을 검증하는 단언을 생성한다.beforeEach(), afterEach(): 각 테스트 전후에 실행될 코드를 정의한다.beforeAll(), afterAll(): 모든 테스트 전후에 한 번만 실행될 코드를 정의한다.
기본 테스트 작성#
1
2
3
4
5
6
7
8
9
10
11
12
| // math.js
function sum(a, b) {
return a + b;
}
module.exports = sum;
// math.test.js
const sum = require('./math');
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
|
다양한 매처(Matcher) 사용#
1
2
3
4
5
6
7
8
9
10
11
| test('object assignment', () => {
const data = {one: 1};
data['two'] = 2;
// 객체 동등성 비교
expect(data).toEqual({one: 1, two: 2});
// 널/정의 체크
expect(data).not.toBeNull();
expect(data).toBeDefined();
});
|
비동기 테스트#
1
2
3
4
5
6
7
8
9
10
11
12
| // 프로미스 테스트
test('async test', () => {
return fetchData().then(data => {
expect(data).toBe('result');
});
});
// async/await 사용
test('async/await test', async () => {
const data = await fetchData();
expect(data).toBe('result');
});
|
1
2
3
4
5
6
7
| // 함수 모킹
const mockCallback = jest.fn(x => x + 42);
[0, 1].forEach(mockCallback);
// 모킹된 함수 호출 검증
expect(mockCallback.mock.calls.length).toBe(2);
expect(mockCallback.mock.results[0].value).toBe(42);
|
고급 기능#
테스트 그룹화#
1
2
3
4
5
6
7
8
9
10
11
12
13
| describe('Calculator', () => {
beforeEach(() => {
// 각 테스트 전 초기화 로직
});
test('addition', () => {
// 덧셈 테스트
});
test('subtraction', () => {
// 뺄셈 테스트
});
});
|
코드 커버리지#
참고 및 출처#
Fetching Title#q70s