编辑“︁Next.js组件测试”︁

= Next.js组件测试 =

== 介绍 ==
'''Next.js组件测试'''是指对Next.js框架中的React组件进行自动化验证的过程，旨在确保组件在不同场景下能按预期工作。测试范围包括：
* 渲染逻辑（JSX结构）
* 交互行为（点击、输入等）
* 状态管理（useState, Context等）
* 数据获取（getStaticProps等）

组件测试是Next.js应用质量保障的核心环节，通常使用Jest配合React Testing Library或Cypress等工具实现。

== 测试类型 ==
<mermaid>
pie
    title Next.js组件测试类型占比
    "渲染测试" : 35
    "交互测试" : 30
    "快照测试" : 20
    "数据获取测试" : 15
</mermaid>

== 测试工具配置 ==
=== 基础配置 ===
安装必要依赖：
<syntaxhighlight lang="bash">
npm install --save-dev jest @testing-library/react @testing-library/jest-dom
</syntaxhighlight>

创建`jest.config.js`：
<syntaxhighlight lang="javascript">
module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1'
  }
}
</syntaxhighlight>

== 测试编写实践 ==
=== 基础组件测试 ===
测试一个简单的按钮组件：
<syntaxhighlight lang="javascript">
// Button.js
export default function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}
</syntaxhighlight>

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

test('renders button with text', () => {
  render(<Button>Click me</Button>);
  expect(screen.getByText('Click me')).toBeInTheDocument();
});

test('triggers onClick handler', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Click</Button>);
  fireEvent.click(screen.getByText('Click'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});
</syntaxhighlight>

=== 异步组件测试 ===
测试数据获取组件：
<syntaxhighlight lang="javascript">
// UserList.js
export default function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}
</syntaxhighlight>

测试方案：
<syntaxhighlight lang="javascript">
import { render, screen, waitFor } from '@testing-library/react';
import UserList from './UserList';

beforeEach(() => {
  global.fetch = jest.fn(() =>
    Promise.resolve({
      json: () => Promise.resolve([{ id: 1, name: 'John' }]),
    })
  );
});

test('loads and displays users', async () => {
  render(<UserList />);
  await waitFor(() => {
    expect(screen.getByText('John')).toBeInTheDocument();
  });
});
</syntaxhighlight>

== 高级测试场景 ==
=== 路由组件测试 ===
Next.js页面组件测试需要模拟路由环境：
<syntaxhighlight lang="javascript">
import { render } from '@testing-library/react';
import { RouterContext } from 'next/dist/shared/lib/router-context';

function createMockRouter() {
  return {
    pathname: '/',
    route: '/',
    query: {},
    asPath: '/',
  };
}

test('renders page with router', () => {
  render(
    <RouterContext.Provider value={createMockRouter()}>
      <HomePage />
    </RouterContext.Provider>
  );
  // 断言...
});
</syntaxhighlight>

=== 快照测试 ===
捕获组件渲染结构的基准：
<syntaxhighlight lang="javascript">
import renderer from 'react-test-renderer';
import Component from './Component';

test('matches snapshot', () => {
  const tree = renderer.create(<Component />).toJSON();
  expect(tree).toMatchSnapshot();
});
</syntaxhighlight>

== 测试覆盖率 ==
使用Jest收集覆盖率：
<syntaxhighlight lang="bash">
jest --coverage
</syntaxhighlight>

数学公式表示覆盖率计算：
<math>
\text{覆盖率} = \frac{\text{已执行代码行数}}{\text{总代码行数}} \times 100\%
</math>

== 最佳实践 ==
1. '''测试金字塔'''遵循：单元测试 > 集成测试 > E2E测试的比例
2. 避免过度实现细节测试
3. 使用<code>data-testid</code>属性定位元素
4. 模拟外部依赖（API、路由等）
5. 定期更新快照

== 常见问题 ==
{| class="wikitable"
|-
! 问题 !! 解决方案
|-
| 样式导入错误 || 在jest配置中添加样式文件mock
|-
| 动态导入失败 || 配置`next/dynamic`的测试实现
|-
| 路由行为异常 || 使用`next-router-mock`包
|}

== 扩展阅读 ==
* Jest官方文档
* React Testing Library最佳实践
* Next.js测试指南

[[Category:Next.js测试]]
[[Category:前端开发]]
[[Category:软件测试]]

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