Добавление vitest с react testing library в typescript проект

vitest.md

Добавление vitest с react testing library в typescript проект

Настройка

1. yarn add -D vitest happy-dom @testing-library/react @testing-library/jest-dom
2. В package.json добавить:

"scripts": {
  "test": "vitest"
}

3. Сверху файла vite.config.ts добавить /// <reference types="vitest" />
4. В этом же файле в defineConfig добавить:

test: {
  globals: true,
  environment: 'happy-dom',
  setupFiles: ['src/setupTest.ts']
}

5. Добавить в tsconfig.json:

compilerOptions: {
  "types": ["vitest/globals"]
}

6. Создать файл src/setupTest.ts и поместить в него import '@testing-library/jest-dom'

Проверка

1. Создать файл src/App.test.tsx с содержимым:

import { render, screen, fireEvent } from '@testing-library/react'
import App from './App'

describe('<App />', () => {
  it('is first test', () => {
    render(<App />)
    fireEvent.click(screen.getByRole('button'))
    expect(screen.getByText(/count is 1/i)).toBeInTheDocument()
  })
})

2. yarn test