Настройка Vitest в Next.js

Vite и React Testing Library часто используются вместе для модульного тестирования (Unit Testing). Это руководство покажет, как настроить Vitest с Next.js и написать первые тесты.

Полезно знать: Поскольку асинхронные серверные компоненты (async Server Components) являются новинкой в экосистеме React, Vitest пока их не поддерживает. Хотя вы можете выполнять модульные тесты для синхронных серверных и клиентских компонентов, мы рекомендуем использовать сквозные тесты (E2E tests) для асинхронных компонентов.

Быстрый старт

Вы можете использовать create-next-app с примером Next.js with-vitest, чтобы быстро начать работу:

npx create-next-app@latest --example with-vitest with-vitest-app

Ручная настройка

Для ручной настройки Vitest установите vitest и следующие пакеты как dev-зависимости:

npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react
# или
yarn add -D vitest @vitejs/plugin-react jsdom @testing-library/react
# или
pnpm install -D vitest @vitejs/plugin-react jsdom @testing-library/react
# или
bun add -D vitest @vitejs/plugin-react jsdom @testing-library/react

Создайте файл vitest.config.ts|js в корне проекта и добавьте следующие настройки:

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
  },
})

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
  },
})

Для получения дополнительной информации о конфигурации Vitest обратитесь к документации Vitest Configuration.

Затем добавьте скрипт test в ваш package.json:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "vitest"
  }
}

При запуске npm run test Vitest по умолчанию будет отслеживать изменения в вашем проекте.

Создание первого модульного теста с Vitest

Проверьте работоспособность, создав тест для проверки успешного рендеринга заголовка в компоненте <Page />:

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About</Link>
    </div>
  )
}

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About</Link>
    </div>
  )
}

import { expect, test } from 'vitest'
import { render, screen } from '@testing-library/react'
import Page from '../app/page'

test('Page', () => {
  render(<Page />)
  expect(screen.getByRole('heading', { level: 1, name: 'Home' })).toBeDefined()
})

import { expect, test } from 'vitest'
import { render, screen } from '@testing-library/react'
import Page from '../app/page'

test('Page', () => {
  render(<Page />)
  expect(screen.getByRole('heading', { level: 1, name: 'Home' })).toBeDefined()
})

Полезно знать: В примере выше используется общепринятое соглашение __tests__, но тестовые файлы также могут располагаться внутри роутера app.

Запуск тестов

Затем выполните следующую команду для запуска тестов:

npm run test
# или
yarn test
# или
pnpm test
# или
bun test

Дополнительные ресурсы

Эти ресурсы могут быть полезны:

• Пример Next.js с Vitest
• Документация Vitest
• Документация React Testing Library