Vitest로 React 애플리케이션 테스트하기: 종합 가이드

테스트는 코드가 예상대로 작동하는지 확인하고 애플리케이션이 발전함에 따라 회귀를 방지하는 현대 소프트웨어 개발의 중요한 측면입니다. React 생태계에서 Vitest와 같은 도구는 최신 React 애플리케이션과 원활하게 통합되는 빠르고 강력하며 사용하기 쉬운 테스트 프레임워크를 제공합니다. 이 게시물에서는 Vitest를 설정하고 사용하여 React 구성 요소, 후크 및 유틸리티를 효과적으로 테스트하는 방법을 살펴보겠습니다.

---

1. 비테스트 소개

Vitest는 최신 JavaScript 및 TypeScript 프로젝트, 특히 Vite를 빌드 도구로 사용하는 프로젝트를 위해 구축된 매우 빠른 테스트 프레임워크입니다. Vitest는 React 커뮤니티에서 가장 인기 있는 테스트 프레임워크 중 하나인 Jest에서 영감을 얻었지만 속도와 단순성에 최적화되어 Vite 기반 React 프로젝트에 탁월한 선택입니다.

주요 특징:

• 빠른 실행: Vitest는 테스트를 병렬로 실행하고 Vite의 빠른 빌드 기능을 활용합니다.
• 기본 ESM 지원: Vitest는 최신 JavaScript용으로 설계되어 ES 모듈에 대한 기본 지원을 제공합니다.
• Jest와의 호환성: Jest에 익숙하다면 Vitest의 API도 익숙하므로 전환이 원활할 것입니다.
• 내장 TypeScript 지원: Vitest는 기본적으로 TypeScript를 지원하여 테스트에서 유형 안전성을 제공합니다.

---

2. React 프로젝트에서 Vitest 설정

React 프로젝트에서 Vitest를 설정하는 것부터 시작하겠습니다. Vite를 사용하여 만든 React 앱이 있다고 가정하겠습니다. 그렇지 않은 경우 다음 명령을 사용하여 빠르게 만들 수 있습니다.

npm create vite@latest my-react-app -- --template react
cd my-react-app

1단계: Vitest 및 관련 종속성 설치

React 테스트 라이브러리 및 기타 필요한 종속성과 함께 Vitest를 설치합니다.

npm install --save-dev vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event

• vitest: 테스트 프레임워크입니다.
• @testing-library/react: React 구성요소를 테스트하기 위한 유틸리티를 제공합니다.
• @testing-library/jest-dom: DOM 노드 어설션을 위해 Jest 및 Vitest에 사용자 정의 매처를 추가합니다.
• @testing-library/user-event: DOM과 사용자 상호 작용을 시뮬레이션합니다.

2단계: Vitest 구성

다음으로 프로젝트 루트에서 vitest.config.ts 파일을 생성하거나 수정하여 Vitest를 구성합니다.

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/setupTests.ts',
  },
});

• Environment: 'jsdom': 테스트를 위해 브라우저 환경을 모의합니다.
• globals: true: 가져오지 않고도 explain, it, Expect와 같은 전역 변수를 사용할 수 있습니다.
• setupFiles: Jest의 setupFilesAfterEnv와 유사하게 테스트 구성을 설정하는 파일입니다.

3단계: 설정 파일 생성

src 디렉토리에 setupTests.ts 파일을 생성하여 @testing-library/jest-dom을 구성합니다.

import '@testing-library/jest-dom';

이 설정에는 테스트에 jest-dom이 제공하는 맞춤 일치자가 자동으로 포함됩니다.

---

3. React 구성 요소에 대한 테스트 작성

Vitest를 설정한 후 간단한 React 구성 요소에 대한 몇 가지 테스트를 작성해 보겠습니다. 다음 버튼 구성요소를 고려하세요.

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

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

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

export default Button;

이제 이 구성요소에 대한 테스트를 작성해 보겠습니다.

// src/components/Button.test.tsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Button from './Button';

describe('Button Component', () => {
  it('renders the button with the correct label', () => {
    render(<Button label="Click Me" onClick={() => {}} />);
    expect(screen.getByText('Click Me')).toBeInTheDocument();
  });

  it('calls the onClick handler when clicked', async () => {
    const handleClick = vi.fn();
    render(<Button label="Click Me" onClick={handleClick} />);
    await userEvent.click(screen.getByText('Click Me'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

설명:

• render: 테스트용 구성요소를 렌더링합니다.
• screen: 렌더링된 DOM을 쿼리합니다.
• userEvent.click: 버튼 클릭 이벤트를 시뮬레이션합니다.
• vi.fn(): 호출을 추적하기 위해 함수를 모의합니다.

---

4. 테스트 실행

다음 명령을 사용하여 테스트를 실행할 수 있습니다.

npx vitest

기본적으로 *.test.tsx 또는 *.spec.tsx 패턴을 따르는 모든 테스트 파일을 실행합니다. 다음을 사용하여 감시 모드에서 테스트를 실행할 수도 있습니다.

npx vitest --watch

Vitest는 각 테스트의 상태와 발생한 오류를 보여주는 자세한 출력을 제공합니다.

---

5. 테스트 후크 및 사용자 정의 유틸리티

Vitest를 사용하여 사용자 정의 React 후크 및 유틸리티를 테스트할 수도 있습니다. 사용자 정의 후크 useCounter가 있다고 가정해 보겠습니다.

// src/hooks/useCounter.ts
import { useState } from 'react';

export function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount((prev) => prev + 1);
  const decrement = () => setCount((prev) => prev - 1);

  return { count, increment, decrement };
}

다음과 같이 이 후크에 대한 테스트를 작성할 수 있습니다.

// src/hooks/useCounter.test.ts
import { renderHook, act } from '@testing-library/react-hooks';
import { useCounter } from './useCounter';

describe('useCounter Hook', () => {
  it('initializes with the correct value', () => {
    const { result } = renderHook(() => useCounter(10));
    expect(result.current.count).toBe(10);
  });

  it('increments the counter', () => {
    const { result } = renderHook(() => useCounter());
    act(() => {
      result.current.increment();
    });
    expect(result.current.count).toBe(1);
  });

  it('decrements the counter', () => {
    const { result } = renderHook(() => useCounter(10));
    act(() => {
      result.current.decrement();
    });
    expect(result.current.count).toBe(9);
  });
});

설명:

• renderHook: 테스트 환경에서 React Hook을 렌더링합니다.
• act: 주장을 하기 전에 상태나 효과에 대한 모든 업데이트가 처리되도록 합니다.

---

6. 결론

Vitest는 특히 Vite와 같은 최신 도구와 결합할 때 React 애플리케이션을 테스트하는 강력하고 효율적인 방법을 제공합니다. 단순성, 속도 및 기존 Jest 사례와의 호환성으로 인해 소규모 및 대규모 React 프로젝트 모두에 탁월한 선택이 됩니다.

By integrating Vitest into your workflow, you can ensure that your React components, hooks, and utilities are thoroughly tested, leading to more robust and reliable applications. Whether you’re testing simple components or complex hooks, Vitest offers the tools you need to write effective tests quickly.

For more information, visit the Vitest documentation.

Feel free to explore more advanced features of Vitest, such as mocking, snapshot testing, and parallel test execution, to further enhance your testing capabilities.

Happy Coding ?‍?

위 내용은 Vitest로 React 애플리케이션 테스트하기: 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!