[typescript] 타입스크립트와 Jest를 활용하여 컴포넌트 이벤트 핸들러를 테스트하는 방법

11 Dec 2023

typescript

테스트 주도 개발(Test-Driven Development, TDD)은 소프트웨어 개발의 핵심적인 원칙 중 하나입니다. 이 접근 방식은 코드를 작성하기 전에 테스트를 작성하고, 그 테스트를 통과하는 코드를 작성하는 방식으로, 소프트웨어의 품질을 유지하고 개발 생산성을 향상시킵니다. 이번 글에서는 타입스크립트로 작성된 리액트 컴포넌트의 이벤트 핸들러를 Jest를 사용하여 테스트하는 방법에 대해 알아보도록 하겠습니다.

1. 환경 설정

우선, 타입스크립트와 Jest가 설치된 프로젝트가 준비되어 있어야 합니다. 프로젝트 디렉토리에서 다음 명령을 통해 Jest를 설치합니다.

npm install --save-dev jest @types/jest ts-jest

2. 컴포넌트 이벤트 핸들러 테스트

이제, Button 컴포넌트의 클릭 이벤트 핸들러를 테스트하는 방법에 대해 살펴보겠습니다.

// Button.tsx

import React from 'react';

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

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

export default Button;

위의 Button 컴포넌트는 클릭 이벤트에 대한 핸들러인 onClick을 prop으로 받아 버튼을 렌더링하는 예제입니다. 이제 Jest를 사용하여 Button 컴포넌트의 이벤트 핸들러를 테스트해보겠습니다.

// Button.test.tsx

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

test('버튼 클릭 이벤트 핸들러 테스트', () => {
  const handleClick = jest.fn();
  const { getByText } = render(<Button onClick={handleClick}>Click me</Button>);
  fireEvent.click(getByText('Click me'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

위의 테스트 코드에서는 @testing-library/react에서 제공하는 render와 fireEvent 함수를 사용하여 Button 컴포넌트를 렌더링하고, 버튼을 클릭한 후에 handleClick 함수가 한 번 호출되는지를 테스트합니다.

3. 결론

이렇게 Jest를 활용하여 타입스크립트로 작성된 리액트 컴포넌트의 이벤트 핸들러를 테스트할 수 있습니다. 테스트 주도 개발은 코드 변경에 대한 안정성을 유지하고, 코드 리팩토링 시 발생할 수 있는 문제를 사전에 방지하는 데 큰 도움이 됩니다. 따라서 Jest와 타입스크립트를 활용하여 컴포넌트의 이벤트 핸들러를 테스트하는 것은 안정적이고 신뢰할 수 있는 소프트웨어를 개발하는 데 도움이 됩니다.

참고 자료:

Jest 공식 문서