[typescript] 타입스크립트와 JSX를 사용하여 리액트 컴포넌트 단위 테스트 방법

18 Dec 2023

typescript

리액트 애플리케이션을 개발하는 동안 컴포넌트 단위 테스트가 매우 중요합니다. 특히, 타입스크립트와 JSX를 사용하여 작성된 컴포넌트의 테스트는 더욱 중요합니다. 이번 글에서는 타입스크립트와 JSX를 사용하여 리액트 컴포넌트의 단위 테스트를 하는 방법을 알아보겠습니다.

1. Jest와 React Testing Library 설치

가장 먼저, Jest와 React Testing Library를 프로젝트에 설치해야 합니다. 이를 위해 아래 명령을 실행합니다.

npm install --save-dev @types/jest @testing-library/react @testing-library/jest-dom

2. 테스트 파일 작성

다음으로는 실제 테스트 코드를 작성해야 합니다. 테스트 파일은 일반적으로 __tests__ 디렉토리에 작성하며, 파일명은 .test.tsx로 끝나는 것이 관례입니다. 아래는 간단한 예제 코드입니다.

// Button.tsx
import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

export default Button;

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

test('renders button with correct label', () => {
  const onClick = jest.fn();
  const { getByText } = render(<Button label="Click me" onClick={onClick} />);
  const button = getByText('Click me');
  expect(button).toBeInTheDocument();
  fireEvent.click(button);
  expect(onClick).toHaveBeenCalled();
});

위 코드에서는 Button 컴포넌트의 렌더링과 클릭 이벤트 처리를 테스트하는 예제입니다.

3. 테스트 실행

마지막으로, 작성된 테스트를 실행하여 컴포넌트의 동작을 확인할 수 있습니다. 이를 위해 아래 명령을 실행합니다.

npm run test

위 명령을 실행하면 Jest가 테스트 파일을 실행하고 결과를 터미널에 표시해줍니다.

이와 같이, 타입스크립트와 JSX를 사용하여 작성된 리액트 컴포넌트의 단위 테스트를 위해 Jest와 React Testing Library를 활용하는 방법을 알아보았습니다. 이를 통해 안정적인 리액트 애플리케이션을 개발하는 데 도움이 될 것입니다.

더 알아보기: