타입스크립트(TypeScript)는 정적인 타입 검사를 제공하여 JavaScript 코드의 오류를 사전에 방지하는 데 도움을 줍니다. Jest는 JavaScript 프로젝트를 위한 테스팅 프레임워크로, 테스트 러너 및 어설션 라이브러리를 포함하고 있어 테스트 작성 및 실행이 용이합니다. 이번 블로그에서는 타입스크립트와 Jest를 함께 사용하여 리액트 컴포넌트를 테스트하는 방법에 대해 알아보겠습니다.

1. 프로젝트 설정

먼저, 타입스크립트로 작성된 리액트 프로젝트를 생성하고 Jest를 이용하여 테스트 설정을 해야 합니다.

npx create-react-app my-app --template typescript
cd my-app

2. Jest 및 관련 패키지 설치

다음으로, Jest 및 관련 패키지를 설치합니다.

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

3. Jest 구성

tsconfig.json 파일을 만들고, Jest를 위한 설정을 추가합니다.

{
  "compilerOptions": {
    "jsx": "react",
    "esModuleInterop": true
  }
}

그런 다음, package.json 파일에서 Jest 명령을 추가합니다.

{
  "scripts": {
    "test": "jest"
  }
}

4. 예제 테스트

이제, 간단한 예제로 테스트를 작성해보겠습니다.

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

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

const Button: React.FC<ButtonProps> = ({ text, onClick }) => {
  return (
    <button onClick={onClick}>{text}</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 text', () => {
  const onClick = jest.fn();
  const { getByText } = render(<Button text="Click me" onClick={onClick} />);
  const button = getByText('Click me');
  fireEvent.click(button);
  expect(onClick).toHaveBeenCalled();
});

5. 테스트 실행

마지막으로, 작성한 테스트를 실행해보겠습니다.

npm test

테스트가 성공적으로 실행되면, Jest를 사용하여 타입스크립트로 작성된 리액트 컴포넌트를 테스트하는 방법에 대한 기본적인 이해를 얻을 수 있습니다.

테스트 코드를 작성하는 것은 좋은 습관이며, 코드 변경으로 인한 예기치 못한 오류를 방지하는 데 매우 유용합니다. 제스트(Jest)와 타입스크립트(TypeScript)를 사용하여 리액트 컴포넌트를 테스트해보세요!