编辑“︁Next.js单元测试”︁

= Next.js单元测试 =

'''Next.js单元测试'''是指对Next.js应用程序中的独立模块（如页面组件、API路由、工具函数等）进行隔离验证的实践。通过模拟依赖项并断言预期行为，开发者能确保代码在迭代过程中保持正确性。本指南将涵盖基础概念、工具链配置、常见模式及实战案例。

== 核心概念 ==
单元测试聚焦于'''最小可测试单元'''（通常是一个函数或组件），具有以下特点：
* '''隔离性'''：通过模拟（mock）外部依赖（如API调用、数据库）确保测试仅验证目标代码
* '''快速反馈'''：执行时间通常在毫秒级，适合开发中频繁运行
* '''确定性'''：相同输入始终产生相同输出，不受网络、环境等因素影响

在Next.js中常见测试对象包括：
* 页面组件（<code>pages/**/*.tsx</code>）
* API路由（<code>pages/api/**/*.ts</code>）
* 工具函数（<code>utils/*.ts</code>）
* 自定义Hooks

== 工具链配置 ==
推荐使用以下工具组合：
```bash
# 安装测试相关依赖
npm install --save-dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event ts-jest @types/jest
```

创建<code>jest.config.js</code>：
<syntaxhighlight lang="javascript">
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1', // 处理路径别名
  },
}
</syntaxhighlight>

基础断言库配置（<code>jest.setup.js</code>）：
<syntaxhighlight lang="javascript">
import '@testing-library/jest-dom/extend-expect'
</syntaxhighlight>

== 测试组件 ==
=== 基础组件测试 ===
测试一个简单的<code>Counter</code>组件：

<syntaxhighlight lang="tsx">
// components/Counter.tsx
import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <button onClick={() => setCount(c => c - 1)}>Decrement</button>
      <span data-testid="count-value">{count}</span>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  )
}
</syntaxhighlight>

对应测试文件：
<syntaxhighlight lang="javascript">
// components/Counter.test.tsx
import { render, screen, fireEvent } from '@testing-library/react'
import { Counter } from './Counter'

describe('Counter', () => {
  it('should increment count', () => {
    render(<Counter />)
    const incrementButton = screen.getByText('Increment')
    fireEvent.click(incrementButton)
    expect(screen.getByTestId('count-value')).toHaveTextContent('1')
  })
})
</syntaxhighlight>

=== 页面组件测试 ===
测试动态路由页面：
<syntaxhighlight lang="tsx">
// pages/posts/[id].tsx
import { GetStaticProps } from 'next'

export default function Post({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  )
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
  // 实际项目中这里会获取真实数据
  return { 
    props: { 
      post: { 
        id: params?.id, 
        title: `Post ${params?.id}`, 
        content: '...' 
      } 
    } 
  }
}
</syntaxhighlight>

测试策略：
<syntaxhighlight lang="javascript">
import { render, screen } from '@testing-library/react'
import Post from '../../pages/posts/[id]'

describe('Post page', () => {
  it('displays post content', () => {
    const mockPost = {
      id: '1',
      title: 'Test Post',
      content: 'This is a test'
    }
    
    render(<Post post={mockPost} />)
    expect(screen.getByRole('heading')).toHaveTextContent('Test Post')
    expect(screen.getByText('This is a test')).toBeInTheDocument()
  })
})
</syntaxhighlight>

== 测试API路由 ==
Next.js API路由本质是Node.js HTTP handlers，可使用<code>node-mocks-http</code>模拟请求：

<syntaxhighlight lang="javascript">
// pages/api/hello.test.js
import { createMocks } from 'node-mocks-http'
import handler from './hello'

describe('/api/hello', () => {
  it('returns greeting message', async () => {
    const { req, res } = createMocks({
      method: 'GET'
    })

    await handler(req, res)
    expect(res._getStatusCode()).toBe(200)
    expect(JSON.parse(res._getData())).toEqual(
      expect.objectContaining({ message: 'Hello world' })
    )
  })
})
</syntaxhighlight>

== 高级模式 ==
=== 快照测试 ===
捕获组件渲染结果作为基准：
<syntaxhighlight lang="javascript">
it('matches snapshot', () => {
  const { container } = render(<MyComponent />)
  expect(container.firstChild).toMatchSnapshot()
})
</syntaxhighlight>

=== 模拟Next.js路由 ===
使用<code>next-router-mock</code>：
<syntaxhighlight lang="javascript">
jest.mock('next/router', () => require('next-router-mock'))
</syntaxhighlight>

=== 覆盖率报告 ===
在<code>package.json</code>中添加：
<syntaxhighlight lang="json">
{
  "scripts": {
    "test:coverage": "jest --coverage"
  }
}
</syntaxhighlight>

== 测试金字塔实践 ==
<mermaid>
pie
    title 测试类型分布
    "单元测试" : 70
    "集成测试" : 20
    "E2E测试" : 10
</mermaid>

== 常见问题解决 ==
{| class="wikitable"
|-
! 错误类型 !! 解决方案
|-
| <code>SyntaxError: Cannot use import statement outside a module</code> || 确保<code>jest.config.js</code>配置了<code>transform</code>和<code>preset: 'ts-jest'</code>
|-
| <code>ReferenceError: document is not defined</code> || 设置<code>testEnvironment: 'jsdom'</code>
|-
| CSS模块导入失败 || 在<code>jest.config.js</code>中添加<code>moduleNameMapper: { '\\.(css|less)$': 'identity-obj-proxy' }</code>
|}

== 性能优化 ==
* 使用<code>jest --watch</code>仅运行修改文件的测试
* 并行化测试：<code>jest --maxWorkers=4</code>
* 虚拟DOM比较算法复杂度：<math>O(n)</math>（React的Reconciliation算法）

通过系统化的单元测试实践，Next.js应用可获得更高的代码健壮性和可维护性。建议将测试集成到CI/CD流程中，每次代码提交自动运行测试套件。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js测试]]