如何在 Next.js 中配置 Vitest-未完纪

Vitest 经常与 React Testing Library 配合，用于单元测试。本指南将介绍如何在 Next.js 中配置 Vitest，并编写第一批测试。

提示：由于 async 服务端组件在 React 生态中仍是较新的功能，Vitest 目前不支持它们。同步的服务端组件和客户端组件仍然可以运行单元测试；对于 async 组件，建议使用端到端测试（E2E）。

快速开始

可以通过 create-next-app 使用 Next.js 的 with-vitest 示例，快速开始：

pnpm：

pnpm create next-app --example with-vitest with-vitest-app

npm：

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

yarn：

yarn create next-app --example with-vitest with-vitest-app

bun：

bun create next-app --example with-vitest with-vitest-app

手动配置

若要手动配置 Vitest，请将 vitest 及以下软件包安装为开发依赖：

pnpm：

# Using TypeScript
pnpm add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths
# Using JavaScript
pnpm add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom

npm：

# Using TypeScript
npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths
# Using JavaScript
npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom

yarn：

# Using TypeScript
yarn add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths
# Using JavaScript
yarn add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom

bun：

# Using TypeScript
bun add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths
# Using JavaScript
bun add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom

在项目根目录创建 vitest.config.mts 或 vitest.config.js 文件，并加入以下配置。

TypeScript，vitest.config.mts：

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'

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

JavaScript，vitest.config.js：

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

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

关于 Vitest 配置的更多信息，请参阅 Vitest 配置文档。

随后，在 package.json 中添加 test 脚本：

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

运行 npm run test 时，Vitest 默认会监视项目中的变化。

编写第一个 Vitest 单元测试

创建一个测试，检查 <Page /> 组件是否成功渲染了标题，以确认各部分正常工作。

TypeScript，app/page.tsx：

import Link from 'next/link'

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

JavaScript，app/page.jsx：

import Link from 'next/link'

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

TypeScript，__tests__/page.test.tsx：

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()
})

JavaScript，__tests__/page.test.jsx：

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 路由中的相关文件放在一起。