Jest는 Facebook에서 만든 테스팅 프레임워크이다.
여러가지의 테스팅 라이브러리가 있지만 Jest를 선택한 이유는 다음과 같다.
위와 같은 이유로 Jest를 선정하였고, 이제 사용법을 알아보자.
npm i -D jest @types/jest
npm i -D ts-test // typescript에서 jest를 사용하기 위해 설치
npm i -D jest-environment-jsdom // dom 을 테스트하기 위해 설치
test 코드는 개발환경에서만 사용되므로 -D
명령어를 사용해서 설치해준다.
npx ts-jest config:init
해당 명령어를 입력하면 jest.config.js
파일이 생긴다
/** @type {import('ts-jest').JestConfigWithTsJest} **/
module.exports = {
transform: {
"^.+.tsx?$": ["ts-jest",{}],
},
// 추가
preset: "ts-jest",
setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
testEnvironment: "jsdom",
};
ts-jest
를 설정해서 ts를 사용한다.js-dom
을 설정해서 react dom을 테스트 할수 있도록 한다.// setupTests.ts
import "@testing-library/jest-dom";
해당 구문을 추가해 dom을 테스트하기 위한 추가 라이브러리를 불러온다.
"scripts": {
"test": "jest", // 수정
},
test 명령어를 jest 로 수정한다.
기본적인 테스트 코드를 작성해보자
describe("react 에서 jest 사용하기", () => {
it("기본 테스트", () => {
expect(1 + 2).toBe(3);
});
});
명령어를 입력해서 테스트가 잘 됐는지 확인해보자.
npm run test
테스트가 성공적으로 끝난걸 알 수 있다.
이번에는 React DOM을 테스트 해보자
import { render, screen } from "@testing-library/react";
describe("react 에서 jest 사용하기", () => {
it("기본 테스트", () => {
expect(1 + 2).toBe(3);
});
it("dom 테스트", () => {
render(<div data-testid="test-dom">DOM TEST</div>);
const element = screen.getByTestId("test-dom");
expect(element).toHaveTextContent("DOM TEST");
});
});
render
를 이용해 dom을 렌더링 한 뒤 getByTestId
를 사용해서 test-dom의 텍스트를 테스트하는 코드다.
한번 테스트해보자
npm run test
테스트가 성공적으로 끝난걸 알 수 있다.
React + Typescript + Jest 로 테스팅 코드를 작성하는 방법을 알아보았다. 테스트 코드를 작성하는 것으로 코드의 오류를 발견하고 수정하는 작업을 효율적으로 할 수 있다는 것을 알았고 테스트 코드를 작성하는 습관을 들이겠다고 다짐했다.