Testing with Jest

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

프로젝트에 Jest와 React Testing Library를 설정하는 방법을 안내해 드릴게요. 이 가이드는 어떤 프레임워크에도 적용할 수 있는 공통 로직만 다루고, 프레임워크에 따라 다를 수 있는 Jest와 React Testing Library의 초기 설정은 다루지 않아요.

출처: 문서

본문

커스텀 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/'
    );
  });
});

Web API 목(mock) 만들기

대부분의 Mantine 컴포넌트는 window.matchMedia나 ResizeObserver 같은 브라우저 API에 의존해요. 이 API는 jest-environment-jsdom 환경에서 사용할 수 없으므로 테스트에서 목으로 만들어야 해요.

프로젝트 루트에 jest.setup.js 파일을 만들고 다음 코드를 넣어요:

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

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

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

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

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

window.ResizeObserver = ResizeObserver;

그런 다음 jest.config.js의 setup 파일로 추가해요:

const config = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // ... rest of your config
};

프레임워크별 설정

다른 프레임워크의 Jest 설정은 서로 다르고 시간이 지나면서 변하는 경우가 많아요. 프레임워크의 Jest 설정 방법을 배우려면 Jest와 React Testing Library 문서를 확인하거나 미리 만들어진 템플릿을 확인하세요. 대부분의 템플릿에는 Jest 설정이 포함되어 있어 참조로 쓸 수 있어요.

테스트 예시

Mantine Help Center에서 테스트 예시를 볼 수 있어요:

  • Modal/Drawer/Popover 컴포넌트는 어떻게 테스트하나요?
  • Select/MultiSelect 컴포넌트는 어떻게 테스트하나요?

더 알아보기 (Learn more)