레시피 광장
?
사용자

Jest/RTL을 활용한 React 컴포넌트 테스트 코드 작성 가이드

React 컴포넌트의 동작을 Jest와 React Testing Library(RTL)를 사용하여 효과적으로 테스트하는 방법을 안내합니다. 복잡한 UI 로직이나 사용자 인터랙션 테스트 시 유용합니다.

#jest#react testing library#rtl#react#테스트 코드
recipe.sh
Jest와 React Testing Library(RTL)를 사용하여 React 컴포넌트의 테스트 코드를 작성하는 방법을 안내합니다. 이 레시피는 재사용 가능한 프롬프트 템플릿으로, 실제 프로젝트에서 바로 적용할 수 있도록 구성되어 있습니다.

## 목표

- Jest와 RTL을 활용하여 React 컴포넌트의 기능 및 사용자 인터랙션을 검증하는 테스트 코드 작성
- 테스트 커버리지 향상 및 코드 품질 개선

## 사용 방법

아래 프롬프트 템플릿에서 `{{컴포넌트 이름}}`, `{{테스트할 기능}}`, `{{컴포넌트 코드}}`, `{{필요한 Mock 데이터 또는 함수}}` 부분을 실제 상황에 맞게 채워 넣어 AI에게 요청하세요.

```prompt
다음은 "{{컴포넌트 이름}}" React 컴포넌트입니다:

```jsx
{{컴포넌트 코드}}
```

이 컴포넌트에 대해 Jest와 React Testing Library(RTL)를 사용하여 "{{테스트할 기능}}"을(를) 검증하는 테스트 코드를 작성해 주세요. 

테스트 시뮬레이션:
- 사용자는 {{사용자 행동}}을(를) 수행합니다.
- 예상 결과는 {{기대되는 결과}}입니다.

필요하다면, 다음과 같은 Mock 데이터를 사용하거나 함수를 구현해 주세요:
```javascript
{{필요한 Mock 데이터 또는 함수}}
```

테스트 코드는 다음을 포함해야 합니다:
1.  컴포넌트 렌더링 및 기본 상태 확인
2.  `{{테스트할 기능}}`과 관련된 사용자 상호작용 (예: 버튼 클릭, 입력 필드 변경)
3.  상호작용 후 DOM 상태 또는 결과 확인
4.  적절한 `screen` 쿼리를 사용하고, 필요시 `fireEvent` 또는 `userEvent`를 활용
5.  비동기 작업이 있다면 `waitFor` 또는 `findBy` 관련 헬퍼 함수 사용

다음은 일반적인 `{{컴포넌트 이름}}` 컴포넌트의 구조 예시이며, 실제 코드는 제공된 `{{컴포넌트 코드}}`를 따릅니다.

```jsx
// src/components/{{컴포넌트 이름}}.jsx
import React, {{ useState }} from 'react';

function {{컴포넌트 이름}}(props) {
  // ... 컴포넌트 로직 ...
  return (
    <div>
      {/* ... JSX ... */}
    </div>
  );
}

export default {{컴포넌트 이름}};
```

테스트 파일은 `{{컴포넌트 이름}}.test.js` 또는 `{{컴포넌트 이름}}.test.jsx` 형식으로 작성해 주세요.

**예시 입력 (참고용):**

*   `{{컴포넌트 이름}}`: Counter
*   `{{테스트할 기능}}`: 카운터 증가 및 감소 버튼 동작
*   `{{컴포넌트 코드}}`: 
    ```jsx
    import React, { useState } from 'react';

    function Counter() {
      const [count, setCount] = useState(0);

      return (
        <div>
          <h1>Count: {count}</h1>
          <button onClick={() => setCount(count + 1)}>Increment</button>
          <button onClick={() => setCount(count - 1)}>Decrement</button>
        </div>
      );
    }

    export default Counter;
    ```
*   `{{사용자 행동}}`: 'Increment' 버튼을 두 번 클릭
*   `{{기대되는 결과}}`: 화면의 'Count: 2' 텍스트가 표시되어야 합니다.
*   `{{필요한 Mock 데이터 또는 함수}}`: (이 예시에서는 특별히 필요 없음)
```

## 추가 팁

-   `user-event` 라이브러리를 사용하면 실제 사용자 행동과 더 유사한 시뮬레이션이 가능합니다.
-   복잡한 상태 관리나 API 호출이 있다면, 해당 부분은 Mocking하여 테스트의 독립성을 확보하세요.
-   테스트 시, 접근성을 고려하여 `getByRole`, `getByLabelText` 등의 쿼리 사용을 우선적으로 고려하는 것이 좋습니다.
0
스크랩
4
좋아요
0
댓글
Jest/RTL을 활용한 React 컴포넌트 테스트 코드 작성 가이드