Testing with Vitest

Testing with Vitest (Vitest로 테스트하기)

프로젝트에 Vitest와 React Testing Library를 설정하는 방법을 안내해 드릴게요. 이 가이드는 번들러로 Vite를 사용하는 프로젝트를 위한 가이드예요. 다른 프레임워크/번들러를 사용한다면 Jest를 권장해요.

출처: 문서

본문

설치

Vitest와 React Testing Library를 설치해요:

yarn add --dev vitest jsdom @testing-library/dom @testing-library/jest-dom @testing-library/react @testing-library/user-event

IDE에서 테스트를 실행하고 싶다면 확장 프로그램 중 하나를 설치하세요.

구성

Vite 구성 파일에 Vitest 구성을 추가해요:

import { defineConfig } from 'vite';

export default defineConfig({
  // ... rest of your config
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './vitest.setup.mjs',
  },
});

그런 다음 프로젝트 루트에 vitest.setup.mjs 파일을 만들고 다음 코드를 넣어요:

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

import { vi } from 'vitest';

const { getComputedStyle } = window;
window.getComputedStyle = (elt) => getComputedStyle(elt);
window.HTMLElement.prototype.scrollIntoView = () => {};

Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: vi.fn().mockImplementation((query) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: vi.fn(),
    removeListener: vi.fn(),
    addEventListener: vi.fn(),
    removeEventListener: vi.fn(),
    dispatchEvent: vi.fn(),
  })),
});

if (!document.fonts) {
  Object.defineProperty(document, 'fonts', {
    writable: true,
    value: { addEventListener: vi.fn(), removeEventListener: vi.fn() },
  });
}

class ResizeObserver {
  observe() {}
  unobserve() {}
  disconnect() {}
}

window.ResizeObserver = ResizeObserver;

위 코드는 jsdom 환경에서는 사용할 수 없지만 일부 Mantine 컴포넌트가 필요로 하는 window.matchMedia와 ResizeObserver API를 목으로 만들어요.

선택적으로 package.json에 Vitest 스크립트를 추가할 수 있어요:

{
  "scripts": {
    "vitest": "vitest run",
    "vitest:watch": "vitest"
  }
}

커스텀 render

모든 Mantine 컴포넌트는 컴포넌트 트리에 MantineProvider가 있어야 해요. 테스트에서 컴포넌트 트리에 MantineProvider를 추가하려면 커스텀 render 함수를 만들어요:

// ./test-utils/render.tsx
import { render as testingLibraryRender } from '@testing-library/react';
import { MantineProvider } from '@mantine/core';
// Import your theme object
import { theme } from '../src/theme';

export function render(ui: React.ReactNode) {
  return testingLibraryRender(<>{ui}</>, {
    wrapper: ({ children }: { children: React.ReactNode }) => (
      <MantineProvider theme={theme} env="test">{children}</MantineProvider>
    ),
  });
}

보통 사용할 모든 @testing-library/* 함수를 ./testing-utils/index.ts 파일에서 내보내는 것이 더 편리해요:

import userEvent from '@testing-library/user-event';

export * from '@testing-library/react';
export { render } from './render';
export { userEvent };

그런 다음 모든 테스트 유틸리티를 @testing-library/react 대신 ./testing-utils에서 import해요:

import { render, screen } from '../test-utils';
import { Welcome } from './Welcome';

describe('Welcome component', () => {
  it('has correct Next.js theming section link', () => {
    render(<Welcome />);
    expect(screen.getByText('this guide')).toHaveAttribute(
      'href',
      'https://mantine.dev/guides/next/'
    );
  });
});

전체 설정 예시

전체 Vitest 설정이 포함된 예시는 mantine-vite-template에서 볼 수 있어요.

더 알아보기 (Learn more)