728x90
내가 만든 로직이 제대로 작동하는지 확인하기 위해 작성하는 테스트 코드이다.
환경설정
/src 폴더 위치에 test라는 폴더를 만들고 그 안에 테스트 코드를 작성한 파일을 두면 된다. 파일명은 __test__ 혹은 .test.ts로 지정해준다.
함수를 테스트하는 경우 해당 컴포넌트를 import해와서 테스트를 진행하면 된다.
우선 필요한 라이브러리를 설치해야 한다.
yarn add -D jest @types/jest
yarn add -D ts-jest
yarn add -D @testing-library/jest-dom @testing-library/react
필요한 파일로는 우선 테스트를 돌려볼 수 있는 파일이 필요할 것이다.
/src/test/app.test.tsx ...
root 위치에 jest.config.js, setupTest.js, tsconfig.jest.json, (typescript일 경우)tsconfig.json
package.json에 test를 jest로 설정
"scripts": {
...
"test": "jest",
},
예시
const sum = (num1, num2) => num1 + num2;
test('1 더하기 2는 3이다.', () => {
expect(sum(1, 2)).toBe(3)
});
여기서 toBe 같은 메소드는 Matcher라고 한다. toBe 말고도 toEqual, toStrictEqual, toBeNull 등이 있다.
이때 예시처럼 test를 통해 바로 테스트를 해볼수도 있고 describe을 통해 진행해볼 수도 있다.
테스트 실행하기
yarn test
// or npm test
it VS test
it과 test 둘다 기능은 동일하다고 한다. 그러나 의미론적으로 it을 사용하는 것을 권장한다는 글을 읽었다. 테스트 출력할 때 테스트를 더 읽기 쉽게 만들기 위해 만들어졌다. 가독성 부분에서 다르다고 볼 수 있다.
참고
728x90
'WEB > REACT' 카테고리의 다른 글
[Next.js] CSR 장단점 / SSR 필요성 / Next.js yarn start했을 때의 내부 살펴보기 (0) | 2023.07.04 |
---|---|
React manifest.json는 뭘까 (0) | 2022.09.07 |
[React / 2차 프로젝트] react-slick 적용법 (0) | 2022.01.16 |
[React] fetch로 백엔드와 통신하면서 놓쳤던 부분 (0) | 2022.01.09 |
[React] map 함수 적용시 key props를 부여하는 이유 (+index 안돼!) (0) | 2021.12.24 |