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

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 프로젝트와 유사합니다.

설치

1. Node.js와 npm/yarn/pnpm이 설치되어 있는지 확인하세요.
2. 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 id="Hello-name">Hello, {name}!</h1>;
};
</greetingprops>

테스트 작성

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

// 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"></greeting>);
    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"></greeting>);
  expect(container).toMatchSnapshot();
});

성능 테스트

Vitest의 CLI 옵션을 사용하여 성능 측정:
vitest --run --coverage

---

결론

Vitest는 Vite에서 제공하는 속도, 단순성 및 풍부한 기능을 제공하는 최신 테스트를 위한 강력한 선택입니다. Jest에서 마이그레이션하든 새로 시작하든 Vitest는 뛰어난 개발자 경험을 제공하고 테스트가 코드만큼 빠르게 실행되도록 보장합니다.

다음 프로젝트에서 Vitest를 사용해보고 차이를 경험해 보세요!

참고자료

Vitest 홈페이지
비테

위 내용은 Vitest를 사용한 단위 테스트: 차세대 테스트 프레임워크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!