1025 TIL-U

Section 29 리액트 앱 테스트 (유닛테스트)

TIL1) 유닛 테스트란?

유닛 테스트는 소프트웨어의 개별 구성 요소(유닛)를 검증하는 테스트 방법이다. 리액트에서는 컴포넌트, 훅, 유틸리티 함수 등을 테스트할 수 있다.

TIL2) 테스트 환경 설정

리액트 앱에서 유닛 테스트를 진행하기 위해 주로 사용하는 도구는 다음과 같다:

Jest: 테스트 실행기 및 단언 라이브러리
React Testing Library: 리액트 컴포넌트를 테스트하기 위한 유틸리티

npm install --save-dev jest @testing-library/react

// Counter.js
import React, { useState } from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
};

export default Counter;

유닛 테스트 작성

// Counter.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('렌더링 및 버튼 클릭 테스트', () => {
    render(<Counter />);

    // 초기 카운트 값 확인
    expect(screen.getByText(/Count:/)).toHaveTextContent('Count: 0');

    // 버튼 클릭
    fireEvent.click(screen.getByText('Increment'));

    // 카운트 값이 증가했는지 확인
    expect(screen.getByText(/Count:/)).toHaveTextContent('Count: 1');
});

Jest

테스트 프레임워크: Jest는 단위 테스트, 통합 테스트, 스냅샷 테스트 등을 지원하는 테스트 프레임워크. 쉽게 설정하고 사용할 수 있도록 설계되었다.

자동 목(mock) 기능: Jest는 테스트 중에 함수나 모듈을 쉽게 목(mock)할 수 있는 기능을 제공한다. 이를 통해 외부 의존성을 제거하고 테스트의 독립성을 유지할 수 있다.

스냅샷 테스트: Jest는 스냅샷 테스트 기능을 제공하여 컴포넌트의 렌더링 결과를 저장하고, 이후에 변경 사항이 있는지 비교할 수 있다. 이는 UI의 변경을 쉽게 검증하는 데 유용하다.

빠른 실행 속도: Jest는 테스트를 병렬로 실행하여 성능을 최적화하다. 테스트가 완료된 후, 결과를 요약해서 보여준다.

간편한 설정: 기본적으로 리액트 애플리케이션에 Jest가 내장되어 있어, 별도의 설정 없이도 바로 사용할 수 있다.

커뮤니티와 문서화: Jest는 활발한 커뮤니티와 풍부한 문서화를 제공하여 문제를 해결하고 학습하는 데 도움이 된다.

질문거리

Jest와 React Testing Library 외에 다른 테스트 도구를 사용하는 이유

자동 목 기능 활용: Jest의 자동 목 기능을 효과적으로 활용하기 위한 전략

스냅샷 테스트: 스냅샷 테스트를 사용할 때 어떤 상황에서 적합한지

이전 프로젝트에서 유닛 테스트가 문제를 해결하는 데 어떻게 기여했는지 사례를 공유 부탁드립니닷