리액트와 타입스크립트로 테스트 작성하기: Jest와 Testing Library

byCode Keeper •


리액트와 타입스크립트로 테스트 작성하기: Jest와 Testing Library


리액트(React) 애플리케이션을 개발할 때, 코드의 안정성과 품질을 보장하기 위해 테스트 작성은 매우 중요합니다. Jest와 Testing Library는 리액트 애플리케이션의 테스트를 작성하는 데 가장 많이 사용되는 도구입니다. 이 포스팅에서는 Jest와 Testing Library를 사용하여 리액트와 타입스크립트(TypeScript)로 테스트를 작성하는 방법을 소개하겠습니다.


테스트 작성의 중요성


테스트를 작성하면 다음과 같은 이점을 얻을 수 있습니다:

  • 안정성 확보: 코드 변경 시 발생할 수 있는 버그를 사전에 발견할 수 있습니다.
  • 품질 보장: 테스트를 통해 코드의 품질을 유지하고, 예기치 않은 오류를 방지할 수 있습니다.
  • 문서화: 테스트 코드는 코드의 동작 방식을 문서화하는 역할을 합니다.
  • 리팩토링 지원: 테스트가 존재하면 코드 리팩토링 시 안정성을 확보할 수 있습니다.

프로젝트 설정 및 Jest, Testing Library 설치


먼저, Jest와 Testing Library를 설치하고 설정합니다. 다음 명령어를 사용하여 새로운 리액트 타입스크립트 프로젝트를 생성하고 필요한 패키지를 설치합니다.


npx create-react-app my-testing-app --template typescript
cd my-testing-app
npm install --save-dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event @types/jest

프로젝트 구조


프로젝트는 기본적으로 다음과 같은 구조를 가집니다.


my-testing-app/
├── src/
│   ├── components/
│   ├── App.tsx
│   ├── App.test.tsx
│   ├── index.tsx
├── public/
├── package.json
└── README.md

Jest와 Testing Library 설정


기본적으로 Create React App에는 Jest가 포함되어 있습니다. 이제 Testing Library를 사용하여 테스트를 작성하는 방법을 살펴보겠습니다.


기본 테스트 작성


먼저, App 컴포넌트의 기본 테스트를 작성합니다.


// src/App.tsx
import React from 'react';

const App: React.FC = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
};

export default App;

위 App 컴포넌트를 테스트하는 파일을 작성합니다.


// src/App.test.tsx
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders hello world', () => {
  render(<App />);
  const linkElement = screen.getByText(/Hello, World!/i);
  expect(linkElement).toBeInTheDocument();
});

위 코드에서는 @testing-library/react의 render 함수를 사용하여 App 컴포넌트를 렌더링하고, screen.getByText 함수를 사용하여 텍스트를 검색한 후, 해당 엘리먼트가 문서에 존재하는지 확인합니다.


사용자 상호작용 테스트


Testing Library를 사용하여 사용자 상호작용을 테스트할 수 있습니다. 예를 들어, 버튼 클릭 이벤트를 테스트하는 방법을 살펴보겠습니다.


컴포넌트 작성


먼저, 버튼을 포함한 컴포넌트를 작성합니다.


// src/Counter.tsx
import React, { useState } from 'react';

const Counter: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

사용자 상호작용 테스트 작성


이제, Counter 컴포넌트의 버튼 클릭 이벤트를 테스트합니다.


// src/Counter.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('increments counter', () => {
  render(<Counter />);
  const buttonElement = screen.getByText(/Increment/i);
  fireEvent.click(buttonElement);
  const countElement = screen.getByText(/Count: 1/i);
  expect(countElement).toBeInTheDocument();
});

위 코드에서는 fireEvent.click 함수를 사용하여 버튼 클릭 이벤트를 시뮬레이션하고, 카운트 값이 증가했는지 확인합니다.


비동기 작업 테스트


비동기 작업을 테스트하는 방법을 살펴보겠습니다. 예를 들어, API 호출을 시뮬레이션하여 데이터를 가져오는 컴포넌트를 테스트합니다.


컴포넌트 작성


먼저, API 호출을 포함한 컴포넌트를 작성합니다.


// src/FetchData.tsx
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const FetchData: React.FC = () => {
  const [data, setData] = useState<string | null>(null);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => setData(response.data.title))
      .catch(error => console.error(error));
  }, []);

  return (
    <div>
      {data ? <p>{data}</p> : <p>Loading...</p>}
    </div>
  );
};

export default FetchData;

비동기 작업 테스트 작성


이제, FetchData 컴포넌트의 비동기 작업을 테스트합니다.


// src/FetchData.test.tsx
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import axios from 'axios';
import FetchData from './FetchData';

jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

test('fetches and displays data', async () => {
  mockedAxios.get.mockResolvedValue({ data: { title: 'Hello, World!' } });

  render(<FetchData />);

  expect(screen.getByText(/Loading.../i)).toBeInTheDocument();

  await waitFor(() => expect(screen.getByText(/Hello, World!/i)).toBeInTheDocument());
});

위 코드에서는 jest.mock을 사용하여 axios를 모킹하고, mockResolvedValue 함수를 사용하여 비동기 응답을 시뮬레이션합니다. waitFor 함수를 사용하여 비동기 작업이 완료될 때까지 기다립니다.


주요 포인트 요약 및 추가 학습 자료


이 포스팅에서는 Jest와 Testing Library를 사용하여 리액트와 타입스크립트로 테스트를 작성하는 방법에 대해 살펴보았습니다. Jest는 강력한 테스트 러너로, 다양한 테스트 유형을 지원하며, Testing Library는 리액트 컴포넌트의 렌더링 및 사용자 상호작용을 테스트하는 데 유용한 도구입니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다:


Tags:
다음 이전