Vitest 프레임워크로 테스트를 생성하는 최고의 기술

Vite용으로 설계된 빠르고 현대적인 테스트 프레임워크인 Vitest는 단위 테스트, 통합 테스트 및 엔드투엔드 테스트를 모두 지원합니다. React 및 Vue와 같은 최신 JavaScript 라이브러리와의 원활한 통합을 통해 설정이 필요 없는 빠르고 효과적인 테스트 작성 수단을 제공합니다. 이 기사에서는 Vitest 프레임워크를 사용하여 신뢰할 수 있고 관리 가능하며 효과적인 테스트를 작성하는 가장 좋은 방법에 대해 설명합니다.

1. Vitest 설정

고급 기술에 대해 알아보기 전에 Vitest로 간단한 프로젝트를 설정해 보겠습니다. 프로젝트에 Vite를 사용하는 경우 Vitest는 최소한의 설정만으로 즉시 작동하도록 설계되었습니다.

1단계: Vitest 설치

Vitest를 설치하려면 프로젝트 디렉터리에서 다음 명령을 실행하세요.

npm install vitest --save-dev

2단계: 간단한 테스트 만들기

설치가 완료되면 간단한 테스트 파일을 만들어 Vitest의 실제 작동 모습을 확인하세요.

import { describe, it, expect } from 'vitest';

describe('Math Functions', () => {
  it('should add two numbers correctly', () => {
    const sum = 1 + 2;
    expect(sum).toBe(3);
  });
});

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

npx vitest

2. 설명 및 It 블록을 사용하여 테스트 구성

Describe 및 it 블록은 Vitest(및 Jest와 같은 다른 많은 테스트 프레임워크)의 기본입니다. 테스트를 논리적으로 구성하고 읽기 쉽게 만드는 데 도움이 됩니다.

설명: 관련 테스트를 그룹화하는 데 사용됩니다.
it: 설명 블록 내에서 개별 테스트 사례를 정의합니다.
이 구조를 통해 테스트 스위트가 성장함에 따라 테스트 케이스가 잘 구성되고 유지 관리 가능해집니다.

describe('User Authentication', () => {
  it('should login with valid credentials', () => {
    // Test login functionality
  });

  it('should fail to login with invalid credentials', () => {
    // Test invalid login functionality
  });
});

3. 종속성 모의

최신 애플리케이션에서는 테스트를 위해 API, 데이터베이스 또는 타사 라이브러리와 같은 외부 서비스를 시뮬레이션해야 하는 경우가 많습니다. Vitest는 종속성 모의에 대한 기본 지원을 제공하므로 테스트하려는 동작을 격리하는 데 도움이 됩니다.

API 호출 모의 예시

실제로 외부 서비스를 호출하지 않고 기능을 시뮬레이션하기 위해 Vitest의 vi.fn을 사용하여 간단한 API 호출을 모의해 보겠습니다.

import { vi } from 'vitest';
import { fetchUserData } from './api';

vi.mock('./api', () => ({
  fetchUserData: vi.fn(),
}));

describe('User API', () => {
  it('should fetch user data correctly', async () => {
    const mockUserData = { id: 1, name: 'John Doe' };
    fetchUserData.mockResolvedValueOnce(mockUserData);

    const result = await fetchUserData(1);
    expect(result).toEqual(mockUserData);
  });
});

이 예에서는 fetchUserData 함수를 모의하여 응답을 제어하고 실제 API 호출을 방지할 수 있습니다.

4. 스냅샷 테스트

Vitest는 스냅샷 테스트를 지원하는데, 이는 시간이 지남에 따라 구성요소나 기능의 출력을 확인하려는 경우에 유용합니다. 이 기술은 UI 구성 요소에 특히 유용합니다.

스냅샷 테스트 예시

import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should match the snapshot', () => {
    const { container } = render(<MyComponent />);
    expect(container).toMatchSnapshot();
  });
});

스냅샷 테스트를 통해 구성요소 출력의 일관성이 유지됩니다. 출력이 변경되면 스냅샷을 업데이트하라는 메시지가 표시되므로 의도하지 않은 변경 사항을 포착하는 데 도움이 됩니다.

5. 비동기 코드 테스트

비동기 기능을 테스트할 때 Vitest는 약속을 처리하는 유틸리티를 제공하여 비동기 코드가 예상대로 작동하는지 더 쉽게 확인할 수 있습니다.

비동기 함수 테스트 예제

import { describe, it, expect } from 'vitest';

const fetchData = async () => {
  return new Promise((resolve) => setTimeout(() => resolve('data'), 1000));
};

describe('Async Functions', () => {
  it('should resolve data', async () => {
    const data = await fetchData();
    expect(data).toBe('data');
  });
});

이 기술은 API 요청, 타이머 또는 기타 비동기 코드를 테스트하는 데 중요합니다.

6. 코드 커버리지

Vitest는 즉시 사용 가능한 코드 적용 범위 보고서 생성을 지원하므로, 테스트에 포함된 코드베이스의 양을 이해하는 데 도움이 됩니다. 코드의 어떤 부분이 테스트되었는지, 어떤 부분이 테스트되지 않았는지 보여줍니다.

코드 적용 범위 활성화

코드 적용 범위를 활성화하려면 Vitest 구성에 다음을 추가하세요.

// vite.config.js or vitest.config.js
export default {
  test: {
    coverage: {
      reporter: ['text', 'html'],
    },
  },
};

적용 범위를 고려하여 테스트 실행:

npx vitest --coverage

이렇게 하면 테스트가 더 필요한 코드 영역을 분석할 수 있는 적용 범위 보고서가 생성됩니다.

7. 매개변수화된 테스트

매개변수화된 테스트는 다양한 입력과 예상 출력이 포함된 단일 테스트 사례를 실행하는 좋은 방법입니다. 이렇게 하면 코드 중복이 줄어들고 다양한 시나리오에서 함수가 올바르게 작동하도록 보장됩니다.

매개변수화된 테스트의 예

describe.each([
  [1, 2, 3],
  [2, 3, 5],
  [5, 5, 10],
])('Math Operations', (a, b, expected) => {
  it(`should add ${a} and ${b} to equal ${expected}`, () => {
    expect(a + b).toBe(expected);
  });
});

describe.each를 사용하면 단일 테스트 사례에서 다양한 입력 및 예상 출력 세트를 반복하여 테스트를 더욱 DRY(반복하지 마세요)로 만들 수 있습니다.

8. 테스트 라이브러리로 React 구성 요소 테스트

Vitest는 React 구성 요소 테스트에 널리 사용되는 도구인 React Testing Library와 잘 작동합니다. 구현 세부 사항보다는 구성 요소의 동작을 테스트하는 것이 좋습니다.

React 컴포넌트 테스트 예시

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import MyButton from './MyButton';

describe('MyButton Component', () => {
  it('should render correctly', () => {
    render(<MyButton />);
    expect(screen.getByText('Click Me')).toBeInTheDocument();
  });

  it('should call onClick when clicked', () => {
    const handleClick = vi.fn();
    render(<MyButton onClick={handleClick} />);
    screen.getByText('Click Me').click();
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

Vitest로 React 구성요소를 테스트하면 버튼, 입력 또는 기타 요소와 상호작용할 때 UI가 예상대로 작동하는지 확인할 수 있습니다.

결론

설정이 필요 없는 Vitest 프레임워크는 강력하고 현대적인 테스트 경험을 제공합니다. 설명 블록을 사용하여 테스트를 구성하고, 외부 서비스를 시뮬레이션하고, 스냅샷 테스트를 활용하는 등 모범 사례를 준수하여 신뢰할 수 있고 효과적인 테스트 스위트를 구축할 수 있습니다. 또한 코드 적용 범위 활성화, React 구성 요소 테스트, 비동기 코드 테스트와 같은 방법을 통해 애플리케이션이 잘 테스트되고 유지 관리 가능하다는 것을 보장할 수 있습니다.

위 내용은 Vitest 프레임워크로 테스트를 생성하는 최고의 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!