Jest Convention

Ⅰ. 전역 설정 (jest.setup.tsx)

ⅰ. 전역 import

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

ⅱ. 전역 환경설정

프로덕션과 동일한 환경을 구축한다. 테스트 시 여기서 정의한 render() 함수를 사용한다.

import { RecoilRoot } from 'recoil';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ThemeProvider } from 'styled-components';
import { theme } from '@src/styles/theme';
import GlobalStyle from '@src/styles/global';
import { render as tlrRender } from '@testing-library/react';
import type { RenderOptions } from '@testing-library/react';

const Provider = ({ children }: { children: React.ReactNode }) => {
  const queryClient = new QueryClient();

  return (
    <RecoilRoot>
      <QueryClientProvider client={queryClient}>
        <ThemeProvider theme={theme}>
          <GlobalStyle />
          {children}
        </ThemeProvider>
      </QueryClientProvider>
    </RecoilRoot>
  );
};

const renderWithProviders = (ui: React.ReactNode, options?: RenderOptions) => {
  return tlrRender(<Provider>{ui}</Provider>, options);
};

declare global {
  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace globalThis {
    // eslint-disable-next-line no-var, vars-on-top
    var render: typeof renderWithProviders;
  }
}

global.render = renderWithProviders;

Ⅱ. 단위 테스트

ⅰ. 파일 이름

{컴포넌트 이름}.test.tsx

ⅱ. 코드

1. 코드 구조

import

describe('{컴포넌트 이름}', () => {
  test('~해야 한다.', () => {
  });
});