[React] Jest와 React 테스트 환경 설정

React에서 Jest로 테스트 환경을 구축하는 방법을 정리해볼게요

 

Jest & 필수 패키지 설치

기본적인 Jest 설정을 위한 패키지

yarn add --dev jest @types/jest
yarn add --dev @testing-library/react @testing-library/jest-dom
yarn add --dev @babel/preset-env @babel/preset-react
yarn add --dev identity-obj-proxy

이렇게 하면 Jest와 React 테스트 환경을 갖출 수 있어요

---

1. 한 번에 설치하는 방법

yarn add --dev @testing-library/react @testing-library/jest-dom jest jest-environment-jsdom @babel/preset-env @babel/preset-react babel-jest

 

반응형

2. Babel 설정

Jest가 ES6 문법을 이해할 수 있도록 Babel도 설정해줘야 해요

 

Babel 관련 패키지 설치

 

yarn add --dev babel-jest @babel/core

React 테스팅 환경을 위한 패키지

yarn add --dev jest-environment-jsdom

 

JSON 데이터를 검증하는 JavaScript 라이브러리

npm install --save-dev ajv

 

package.json 설정

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "eject": "react-scripts eject"
  },

 

.babelrc 설정

 

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", {"runtime": "automatic"}]
  ]
}

 

babel.config.js 설정

 

module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    '@babel/preset-react'
  ]
};

---

3. Jest 설정

Jest가 React 환경에서 잘 동작하도록 설정해줄게요

 

jest.config.js

 

module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest',
  },
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js']
};

 

• testEnvironment: 'jsdom' → 브라우저 환경에서 테스트할 수 있도록 설정
• transform → Babel을 사용해서 코드 변환

---

 

yarn add --dev @testing-library/jest-dom

---

4. 테스트 코드 작성

 

실제 컴포넌트 테스트를 해볼게요!

 

components/Button.js

import React from 'react'

const Button = ({ onClick, children }) => {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  )
}

export default Button

 

components/Button.test.js

 

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

// describe : 테스트 그룹 생성 시 사용
describe("Button Component", () => {
  test("renders button", () => {
    render(<Button>Click me</Button>);
    expect(screen.getByText("Click me")).toBeInTheDocument();
  });

  test("calls onClick when clicked", () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click me</Button>);
    fireEvent.click(screen.getByText("Click me"));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

📌 render() → 버튼을 렌더링
📌 screen.getByText() → 특정 텍스트가 있는지 확인
📌 fireEvent.click() → 클릭 이벤트 발생

---

5. 테스트 실행

테스트를 실행하려면 아래 명령어를 입력하면 돼요

 

yarn test

이제 Jest가 자동으로 테스트를 실행하고 결과를 보여줄 거예요