Jest는 자바스크립트에서 유닛테스트를 만들 때 가장 범용적으로 사용되는 meta에서 개발한 테스트 프레임워크이다.
기본 테스트 구조
1
2
3
test('테스트 설명문', () => {
expect(1+1).toBe(2)
})
Jest 사용
npm install —save-dev jest @types/jest
typescript 사용시 @types/jest까지 설치한다.
간단한 테스트를 위해 package.json의 scripts의 test를 jest로 바꾼다.
파일명.test.js또는 ts파일로 파일을 생성한 후 테스트코드를 작성하고 npm run test명령어로 코드에 문제가 없는지 확인할 수 있다.
로직 테스트
describe로 여러개의 테스트를 묶을 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
import { getMillisToDateString } from "./DateUtils"
describe('특정 millisecond를 받았을때', ()=>{
test('해당하는 날짜의 문자열로 변경 합니다', ()=>{
expect(getMillisToDateString(1669136198786)).toBe('2022-11-23')
})
test('10이하의 날짜 일 경우, 0N으로 변경합니다', ()=>{
expect(getMillisToDateString(1667228400000)).toBe('2022-11-01');
})
})
컴포넌트 테스트
컴포넌트 테스트시에는 jest만으로는 불가능하기 때문에 추가로 패키지를 설치해야한다.
Enzyme이나 React Native Testing Library를 사용하면 된다.
React Native Testing Library 사용예시
npm install —save-dev react-test-renderer@18.1.0
npm install —save-dev @testing-library/react-native
npm install —save-dev @testing-library/jest-native
위 패키지들을 설치후, jest.config.js파일을 작성한다.
1
2
3
4
5
6
{
"preset": "react-native",
"setupFilesAfterEnv": ["@testing-library/jest-native/extend-expect"]
}
module.exports=config;
Snapshot Test
Snapshot test는 DOM형태로 확인이 가능하다.
다음은 버튼 테스트코드이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import {render} from '@testing-library/react-native';
import {Button} from './Button';
test('Button Test',async() =>{
const onPressed = () => {};
const expectedButtonName = 'TEST-BUTTON';
render{
<Button onPress={onPressed}>
<Typography>{expectedButtonName}</Typography>
</Button>
)
expect(screen.toJSON()).toMatchSnapshot();
})
Pressed Test
jest.fn()을 사용하여 함수형태로 바꿀 수 있다.
fireEvent로 이벤트를 발생시켜 확인이 가능하다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from 'react';
import {fireEvent, screen, render} from '@testing-library/react-native';
import {Button} from './Button';
test('Button Test',async() =>{
const onPressed = jest.fn();
const expectedButtonName = 'TEST-BUTTON';
render{
<Button onPress={onPressed}>
<Typography>{expectedButtonName}</Typography>
</Button>
)
expect(screen.toJSON()).toMatchSnapshot();
fireEvent.press(screen.getByText(expectedButtonName));
expect(onPressed).toHaveBeenCalled();
})