Vitest를 사용한 단위 테스트: 차세대 테스트 프레임워크-JS 튜토리얼-php.cn

Vitest를 사용한 단위 테스트: 차세대 테스트 프레임워크

Patricia Arquette

풀어 주다： 2024-12-29 11:46:10

원래의

238명이 탐색했습니다.

Unit Testing with Vitest: A Next-Generation Testing Framework

Vitest를 선택하는 이유는 무엇입니까?

Vitest는 현대적인 개발을 염두에 두고 설계되었습니다. 눈에 띄는 이유는 다음과 같습니다.

속도

Vitest는 번들링 및 변환을 위해 초고속 HMR(핫 모듈 교체)과 esbuild를 활용하여 Vite를 기반으로 활용합니다. 결과는 다음과 같습니다.

스마트 및 인스턴트 감시 모드: 영향을 받은 파일에 대해서만 테스트가 다시 실행되어 피드백 루프가 즉각적으로 이루어집니다.
즉시 ESM 지원: 현대 프로젝트에서는 해킹 없이 ES 모듈을 직접 지원함으로써 이점을 얻을 수 있습니다.

성능 벤치마크에서 Vitest는 Vite의 최적화된 빌드 파이프라인을 사용하기 때문에 Jest를 지속적으로 앞지르고 있습니다.

Framework	Time to run 500 tests
Jest	~8 seconds
Vitest	~3 seconds
Mocha	~6 seconds

참고: 이러한 벤치마크는 프로젝트 복잡성과 시스템 사양에 따라 달라질 수 있습니다.

호환성

Vitest는 Jest와 호환되므로 최소한의 변경만으로 기존 테스트 모음의 대부분을 재사용할 수 있습니다. 또한 TypeScript, JSX, ESM과 같은 널리 사용되는 도구를 기본적으로 지원합니다.

개발자 경험

Vite의 HMR과 통합되어 빠른 테스트 반복이 가능합니다.
간단한 API 및 구성.
풍부한 생태계와 성장하는 커뮤니티 지원.

---

Vitest 설정

TypeScript 프로젝트에서 Vitest를 설정하는 방법을 살펴보겠습니다. React 프로젝트를 사용하여 이를 시연할 예정이지만 단계는 Vue 3 또는 Node.js 프로젝트와 유사합니다.

설치

Node.js와 npm/yarn/pnpm이 설치되어 있는지 확인하세요.
Vitest 및 해당 피어 종속성 설치:

npm install --save-dev vitest

React를 사용하는 프로젝트의 경우 React 테스트 라이브러리도 필요합니다.

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

구성

Vite.config.ts를 생성하거나 업데이트하여 Vitest를 활성화하세요.

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

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom', // Use 'node' for Node.js projects
    setupFiles: './test/setup.ts',
  },
});

로그인 후 복사

설정 파일 추가

설정 파일은 테스트 환경을 구성하는 데 사용됩니다. test/setup.ts 파일을 만듭니다.
import '@testing-library/jest-dom';

스크립트 추가

테스트 스크립트를 포함하도록 package.json을 업데이트하세요.

{
  "scripts": {
    "test": "vitest"
  }
}

로그인 후 복사

---

Vitest로 단위 테스트 작성

Vitest는 테스트 작성을 간단하게 만들어주는 Jest와 유사한 API를 제공합니다. 간단한 예는 다음과 같습니다.

예: 반응 구성요소

React 구성요소가 있다고 상상해 보세요.

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

type GreetingProps = {
  name: string;
};

export const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

로그인 후 복사

테스트 작성

구성요소에 대한 테스트 파일 만들기:

// src/components/__tests__/Greeting.test.tsx
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Greeting } from '../Greeting';

describe('Greeting Component', () => {
  it('renders the correct greeting', () => {
    render(<Greeting name="Vitest" />);
    expect(screen.getByText('Hello, Vitest!')).toBeInTheDocument();
  });
});

로그인 후 복사

테스트 실행

다음을 사용하여 테스트를 실행하세요.
npm 실행 테스트

다음과 유사한 출력이 표시됩니다.
✓ Greeting Component가 올바른 인사말을 렌더링합니다

---

고급 기능

조롱

Vitest는 모의 모듈과 기능을 직접 지원합니다.

import { vi } from 'vitest';

const mockFn = vi.fn();
mockFn();
expect(mockFn).toHaveBeenCalled();

로그인 후 복사

스냅샷 테스트

스냅샷 테스트는 다음과 같이 간단합니다.

import { render } from '@testing-library/react';
import { expect } from 'vitest';
import { Greeting } from '../Greeting';

test('matches snapshot', () => {
  const { container } = render(<Greeting name="Vitest" />);
  expect(container).toMatchSnapshot();
});

로그인 후 복사