Vitest로 Vite React TS 프로젝트를 설정하는 방법

이 튜토리얼은 자체 생성된 vite react-ts 프로젝트에서 작동합니다. 요구 사항이 다른 경우 다음 두 리포지토리도 참조하십시오.

https://github.com/nickmccurdy/vite-react-testing-ts

https://stackblitz.com/edit/vitest-dev-vitest-iaqfk8?file=src%2FApp.test.tsx&initialPath=__vitest__

저는 개인적으로 꽤 많은 TS 오류에 부딪혔고 몇 시간 동안 파헤친 후에 다음 설정이 저에게 효과적이라는 것을 알았습니다. 따라서 나는 그것을 적어두고 같은 문제에 직면한 모든 사람에게 도움이 되기를 바랍니다.

1. 패키지를 설치합니다. 다음이 필요합니다.

@testing-library/dom
@testing-library/jest-dom
@testing-library/react
@testing-library/user-event
@types/testing-library__jest-dom
@vitest/ui
vitest

2. 스크립트 추가:

"test": "vitest",
"test:ui": "vitest --ui",
"coverage": "vitest run --coverage",

3. vite.config.ts 추가에서 여기에 삼중 슬래시 참조 유형을 포함하는 것이 중요합니다.

/// <reference types="vitest" />
/// <reference types="vite/client" />

import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],

  ...bla bla bla

  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts',
    // you might want to disable it, if you don't have tests that rely on CSS
    // since parsing CSS is slow
    css: true,
  },
});

4. tsconfig.json에 다음을 포함합니다.

 "include": ["src", "@testing-library/jest-dom"],

5. 루트 디렉터리에 setupTests.ts라는 파일을 만들고 다음을 포함합니다.

/// <reference types="vitest/globals" />
import '@testing-library/jest-dom';
import "@testing-library/jest-dom/extend-expect";

6. utils 폴더를 만들고 test-utils.tsx 파일을 포함하고 코드에 넣습니다.

/* eslint-disable import/export */
import { cleanup, render } from '@testing-library/react'
import { afterEach } from 'vitest'

afterEach(() => {
  cleanup()
})

const customRender = (ui: React.ReactElement, options = {}) =>
  render(ui, {
    // wrap provider(s) here if needed
    wrapper: ({ children }) => children,
    ...options,
  })

export * from '@testing-library/react'
export { default as userEvent } from '@testing-library/user-event'
// override render export
export { customRender as render }

7. 마지막으로 App.test.tsx와 같은 테스트 작성을 시도합니다.

import {describe, expect, it} from 'vitest';
import App from './App';
import { render, screen, userEvent } from './utils/test-utils'


describe('Simple working test', () => {
  it('the title is visible', () => {
    render(<App />);
    expect(screen.getByText(/Ellida Admin/i)).toBeInTheDocument();
  });
``
  it('should increment count on click', async () => {
    render(<App />)
    userEvent.click(screen.getByRole('button'))
    expect(await screen.findByText(/count is: 1/i)).toBeInTheDocument()
  })

  it('uses flexbox in app header', async () => {
    render(<App />)
    const element = screen.getByRole('banner')
    expect(element.className).toEqual('App-header')
    expect(getComputedStyle(element).display).toEqual('flex')
  })
});

그런 다음 터미널에서 실행하려는 경우 명령줄에 pnpm test를 입력하고 멋진 UI 부분을 보려면 pnpm test:ui를 입력합니다. npm 또는 yarn는 비슷하게 작동합니다.