리액트 애플리케이션에서 컴포넌트를 작성할 때 타입스크립트와 JSX를 함께 사용하는 경우가 많습니다. 이때 통합 테스트는 컴포넌트의 전반적인 동작을 확인하는 데 유용합니다. 이 포스트에서는 Jest와 Testing Library를 사용하여 타입스크립트와 JSX로 작성된 리액트 컴포넌트의 통합 테스트를 어떻게 작성하는지 살펴보겠습니다.

1. 필수 패키지 설치

가장 먼저 프로젝트에 필요한 패키지를 설치해야 합니다. package.json 파일 내 dependencies에 다음과 같은 패키지들이 설치되어 있는지 확인하세요.

"dependencies": {
  "react": "^17.0.2",
  "react-dom": "^17.0.2"
},
"devDependencies": {
  "@testing-library/react": "^12.1.2",
  "@types/jest": "^27.0.1",
  "@types/react": "^17.0.30",
  "@types/react-dom": "^17.0.9",
  "jest": "^27.4.7",
  "ts-jest": "^27.0.5",
  "typescript": "^4.4.3"
}

2. 테스트 환경 구성

package.json 파일에서 Jest 구성이 완료되었다면, Jest 구성 파일을 프로젝트 루트 경로에 생성해 주세요.

// jest.config.js

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom'
};

3. 테스트 작성

이제 구성이 완료되었으므로, 타입스크립트와 JSX를 사용하여 리액트 컴포넌트의 통합 테스트를 작성해 보겠습니다.

```typescript jsx // MyComponent.test.tsx

import React from ‘react’; import { render, screen } from ‘@testing-library/react’; import MyComponent from ‘./MyComponent’;

test(‘renders MyComponent with given prop’, () => { render(); const headingElement = screen.getByText(/Hello Testing/i); expect(headingElement).toBeInTheDocument(); });

test(‘renders MyComponent with default prop’, () => { render(); const headingElement = screen.getByText(/Hello Guest/i); expect(headingElement).toBeInTheDocument(); }); ```

위 예시 코드에서는 @testing-library/react의 render 함수를 사용하여 컴포넌트를 렌더링하고, screen 객체를 사용하여 렌더링된 컴포넌트의 요소를 테스트하는 방법을 보여주고 있습니다.

마치며

위에서 살펴본 것처럼, 타입스크립트와 JSX로 작성된 리액트 컴포넌트의 통합 테스트는 Jest와 Testing Library를 활용하여 간단하게 작성할 수 있습니다. 이를 통해 다양한 상황에서 컴포넌트의 동작을 검증할 수 있으며, 코드의 신뢰성과 품질을 높일 수 있습니다.

참고 문헌:

• React Testing Library 공식 문서
• Jest 공식 문서

권고사항: 테스트 코드를 작성하면서 컴포넌트의 동작을 잘 이해하고, 코드의 신뢰성을 높일 수 있으며, 리팩토링 시에도 안정적으로 동작하는지 확인할 수 있습니다.