[typescript] 타입스크립트와 Jest를 함께 사용하여 컴포넌트 단위 테스트하는 방법

11 Dec 2023

typescript

타입스크립트는 컴포넌트 기반의 웹 애플리케이션을 개발하는 데 널리 사용되는 언어입니다. Jest는 JavaScript 애플리케이션을 위한 테스트 프레임워크로, 타입스크립트와 함께 사용될 수 있어 효과적인 컴포넌트 테스트를 지원합니다. 본 문서에서는 타입스크립트와 Jest를 함께 사용하여 컴포넌트 단위 테스트를 하는 방법에 대해 알아보겠습니다.

1. Jest 및 타입스크립트 환경 설정

먼저, 프로젝트에 Jest와 타입스크립트를 설치합니다.

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

그리고 tsconfig.json 파일에 다음과 같이 설정을 추가합니다.

{
  "compilerOptions": {
    "jsx": "react",
    "esModuleInterop": true,
    "module": "commonjs",
    "target": "es5"
  }
}

2. 컴포넌트 테스트 작성

다음으로, src 폴더에 컴포넌트와 그 컴포넌트의 테스트 파일을 작성합니다. 예를 들어, Button.tsx 파일에 다음과 같이 간단한 버튼 컴포넌트를 작성합니다.

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

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

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

export default Button;

이어서, Button.test.tsx 파일에 해당 컴포넌트의 테스트를 작성합니다.

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

test('Button 컴포넌트가 렌더링되는지 확인', () => {
  const { getByText } = render(<Button label="Click me" onClick={() => {}} />);
  const buttonElement = getByText(/click me/i);
  expect(buttonElement).toBeInTheDocument();
});

test('Button 클릭 이벤트 확인', () => {
  const handleClick = jest.fn();
  const { getByText } = render(<Button label="Click me" onClick={handleClick} />);
  const buttonElement = getByText(/click me/i);
  fireEvent.click(buttonElement);
  expect(handleClick).toHaveBeenCalled();
});

위와 같이 Jest와 함께 타입스크립트를 사용하여 컴포넌트를 테스트할 수 있습니다. 타입스크립트의 형식 검사 및 Jest의 강력한 테스트 기능을 결합하여 안정적이고 견고한 웹 애플리케이션을 개발할 수 있습니다.

이제 타입스크립트와 Jest를 활용하여 컴포넌트 단위 테스트를 수행하는 방법에 대해 알아보았습니다. 위의 예제를 통해 보다 안정적이고 신뢰할 수 있는 웹 애플리케이션을 개발하기 위해 타입스크립트와 Jest의 강력한 특징을 활용할 수 있습니다.

참고 문헌:

Jest 공식 문서: https://jestjs.io/docs/getting-started
타입스크립트 공식 문서: https://www.typescriptlang.org/docs/