JEST 테스트 코드

JEST

페이스북에서 만든 자바스크립트 테스팅 라이브러리
공식 문서 [JEST Getting Started]

💻설치 방법

※ create-react-app으로 설치한 경우에는 별도로 설치하지 않아도 됨

vite typescript 프로젝트에서 설치하기

1. 패키지 설치하기

npm install --save-dev -D jest @types/jest ts-node ts-jest @testing-library/react identity-obj-proxy jest-environment-jsdom @testing-library/jest-dom jest-svg-transformer

2. package.json에 scripts 추가하기

// package.json

{
  "scripts": {
    "test": "jest"
  }
}

3. jest.config.ts (jest 설정 파일) 추가하기

// jest.config.ts

export default {
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.tsx?$": "ts-jest"
  },
  moduleNameMapper: {
    "^.+\\.svg$": "jest-svg-transformer",
    "\\.(css|less|sass|scss)$": "identity-obj-proxy"
  },
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"]
};

4. root 폴더에 jest.seup.ts 파일 추가하기

import "@testing-library/jest-dom/extend-expect";

5. lint에러 발생하면 .eslintignore 파일에 코드 추가해서 linting에서 제외하기

.eslintrc.cjs
jest.config.ts
jest.setup.ts

6. tsconfig.json에 complile 옵션 추가하기

// tsconfig.json

{
	"compilerOptions":{
  ...,
  "esModuleInterop": true
  }
}

7. src 폴더에 __test__폴더 생성 후 App.test.tsx 파일 생성하기

// App.test.tsx

import { render, screen, fireEvent } from "@testing-library/react";

// 테스트할 파일
import App from "../App";

test("Renders main page correctly", async () => {
  render(<App />);

  const submitButton = await screen.findByRole("button");
  expect(submitButton.innerHTML).toBe("제출");
});

💻테스트 방법

npm run test

특정 파일만 테스트 하고 싶은 경우

npm run test 파일명

npm run test Button.spec.tsx

💻테스트를 위한 주요 함수들

💡테스트 그룹화

describe()를 사용하여 그룹으로 묶음

describe("계산 테스트", () => {
  test("1 + 2 = 3 ???", () => {
    expect(1 + 2).toBe(3);
  });

  test("2 - 1 = 1 ???", () => {
    expect(2 - 1).toBe(1);
  });
});

💡개별 테스트 케이스 정의

test() 또는 it()를 사용하여 실제 기능이 예상대로 동작하는지 확인

test("1 + 2 = 3 ???", () => {
  expect(1 + 2).toBe(3);
});

it("1 + 2 = 3 ???", () => {
  expect(1 + 2).toBe(3);
});

💡예상 결과 설정 및 확인

expect()를 사용하여 테스트의 예상 결과를 설정하고, 테스트 결과가 예상한 대로 나오는지 확인

expect(1 + 2).toBe(3);

💡리액트 컴포넌트를 렌더링

render()을 사용해서 가상 DOM을 만들고 컴포넌트를 렌더링한 다음 테스트를 하기 위해 사용

test("Renders main page correctly", async () => {
  // App을 렌더링
  render(<App />);
});

💡실제 화면 요소를 가져오기

screen()을 사용해서 render()된 컴포넌트의 화면 요소를 가져오거나 조작함

test("렌더 확인", () => {
  render(<Button>버튼</Button>);
  expect(screen.getByText("버튼")).toBeInTheDocument();
});

● getByRole: 특정 역할을 가진 요소를 가져오는 함수

const button = screen.getByRole("button");

● getByText: 특정 텍스트를 가진 요소를 가져오는 함수

render()로 렌더링된 요소 중에 getByText를 사용해서 특정 텍스트를 가진 요소를 찾음

test("renders welcome message", () => {
  const { getByText } = render(<MyComponent />);
  const welcomeMessage = getByText("Welcome!");
  expect(welcomeMessage).toBeInTheDocument();
});

📘기타 함수

＊toBe: 주어진 값이 엄격하게 같은지(===)를 확인

expect(2 + 2).toBe(4);

＊toEqual: 주어진 값이 객체 또는 배열인 경우 내용이 동일한지를 확인

const array = [1, 2, 3];
expect(array).toEqual([1, 2, 3]);

＊toBeDefined: 주어진 값이 undefined가 아님을 확인

expect(value).toBeDefined();

＊toBeUndefined: 주어진 값이 undefined임을 확인

expect(value).toBeUndefined();

＊toBeNull: 주어진 값이 null임을 확인

expect(value).toBeNull();

＊toBeGreaterThan: 주어진 값이 비교하는 값보다 큰지 확인

expect(2 + 2).toBeGreaterThan(3);

＊toBeGreaterThanOrEqual: 주어진 값이 비교하는 값보다 크거나 같은지 확인

expect(2 + 2).toBeGreaterThanOrEqual(3);

＊toBeLessThan: 주어진 값이 비교하는 값보다 작은지 확인

expect(2 + 2).toBeLessThan(3);

＊toBeLessThanOrEqual: 주어진 값이 비교하는 값보다 작거나 같은지 확인

expect(2 + 2).toBeLessThanOrEqual(3);

＊toMatch: 문자열 동일한지, 정규식과 일치하는지

expect("Christoph").toMatch("stop");
expect(value).toMatch(/world/);

＊toContain: 특정값을 가지고 있는지

expect(array).toContain("milk");

＊toHaveLength: 배열 또는 문자열의 길이가 주어진 값과 일치하는지

expect(string).toHaveLength(14);
expect(array).toHaveLength(4);

＊toBeInTheDocument: document에 해당 요소가 존재하는지 확인

expect(screen.getByRole("button")).toBeInTheDocument();

＊toHaveStyle: 해당 스타일값을 가지고 있는지 확인

expect(container.firstChild).toHaveStyle({ fontSize: "1.5rem" });

＊toHaveClass: 해당 요소가 지정된 클래스를 가지고 있는지 확인

expect(container.firstChild).toHaveClass("active");

＊toBeVisible: 해당 요소가 화면에 보여지는 상태인지 확인

expect(modal).toBeVisible();

＊toBeEnabled: 해당 요소가 활성화 상태인지 확인 (버튼, 입력과 같이 상호작용 가능한 요소가 올바르게 동작하는지 확인)

expect(button).toBeEnabled();

＊toBeDisabled: 해당 요소가 disabled 상태인지 확인

expect(button).toBeDisabled();

＊toHaveAttribute: 해당 요소가 지정된 속성을 가지고 있는지 확인 (href 값이나 이미지의 src 값이 올바르게 설정되어있는지 확인)

expect(link).toHaveAttribute("href", "https://naver.com");

참고 사이트

• Vite 프로젝트에 Jest 추가하기