编辑“︁Next.js Jest配置”︁

= Next.js Jest配置 =

== 介绍 ==  
'''Jest''' 是 JavaScript 生态系统中广泛使用的测试框架，专注于简洁性和易用性。在 Next.js 项目中配置 Jest 可以帮助开发者编写单元测试、集成测试和组件测试，确保代码的可靠性和可维护性。本指南将详细介绍如何在 Next.js 项目中配置 Jest，并提供实际示例和最佳实践。

== 为什么使用 Jest？ ==  
Jest 提供以下优势：  
* **零配置启动**：默认支持大多数 JavaScript 项目。  
* **快照测试**：捕获组件渲染结果，确保 UI 一致性。  
* **模拟功能**：轻松模拟模块、函数和 API 调用。  
* **并行测试**：优化测试执行速度。  

== 安装依赖 ==  
在 Next.js 项目中配置 Jest 需要安装以下依赖：  

<syntaxhighlight lang="bash">
npm install --save-dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event jest-environment-jsdom babel-jest
</syntaxhighlight>

或使用 Yarn：  

<syntaxhighlight lang="bash">
yarn add --dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event jest-environment-jsdom babel-jest
</syntaxhighlight>

== 基础配置 ==  
在项目根目录创建 `jest.config.js` 文件，配置如下：  

<syntaxhighlight lang="javascript">
module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
  },
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
  },
};
</syntaxhighlight>

=== 配置解析 ===  
* '''testEnvironment'''：指定测试环境为 `jsdom`，适用于浏览器环境测试。  
* '''setupFilesAfterEnv'''：指定测试初始化文件（如全局导入 `@testing-library/jest-dom`）。  
* '''moduleNameMapper'''：处理路径别名（需与 `next.config.js` 中的别名一致）。  
* '''transform'''：使用 Babel 转换文件，支持 Next.js 的预设。  

== 初始化设置文件 ==  
创建 `jest.setup.js` 文件，配置全局测试工具：  

<syntaxhighlight lang="javascript">
import '@testing-library/jest-dom';
</syntaxhighlight>

== 编写第一个测试 ==  
以下是一个简单的组件测试示例：  

=== 组件代码 ===  
创建 `components/Button.js`：  

<syntaxhighlight lang="javascript">
export default function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}
</syntaxhighlight>

=== 测试代码 ===  
创建 `components/Button.test.js`：  

<syntaxhighlight lang="javascript">
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

describe('Button Component', () => {
  it('renders the button with correct label', () => {
    render(<Button label="Click Me" />);
    expect(screen.getByText('Click Me')).toBeInTheDocument();
  });

  it('triggers onClick when clicked', () => {
    const handleClick = jest.fn();
    render(<Button label="Click Me" onClick={handleClick} />);
    fireEvent.click(screen.getByText('Click Me'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});
</syntaxhighlight>

=== 测试输出 ===  
运行测试：  

<syntaxhighlight lang="bash">
npm test
</syntaxhighlight>

预期输出：  

<syntaxhighlight lang="text">
PASS  components/Button.test.js
  Button Component
    ✓ renders the button with correct label (25 ms)
    ✓ triggers onClick when clicked (5 ms)
</syntaxhighlight>

== 高级配置 ==  
=== 支持 TypeScript ===  
安装额外依赖：  

<syntaxhighlight lang="bash">
npm install --save-dev ts-jest @types/jest
</syntaxhighlight>

更新 `jest.config.js`：  

<syntaxhighlight lang="javascript">
module.exports = {
  preset: 'ts-jest',
  // 其他配置保持不变...
};
</syntaxhighlight>

=== 模拟 API 调用 ===  
使用 `jest.mock` 模拟 API 模块：  

<syntaxhighlight lang="javascript">
jest.mock('../utils/api', () => ({
  fetchData: jest.fn(() => Promise.resolve({ data: 'Mock Data' })),
}));
</syntaxhighlight>

== 实际案例 ==  
=== 测试页面组件 ===  
以下是一个 Next.js 页面组件的测试示例：  

<syntaxhighlight lang="javascript">
import { render, screen } from '@testing-library/react';
import Home from '../pages/index';

describe('Home Page', () => {
  it('displays the welcome message', () => {
    render(<Home />);
    expect(screen.getByText('Welcome to Next.js!')).toBeInTheDocument();
  });
});
</syntaxhighlight>

== 常见问题 ==  
=== 样式文件报错 ===  
在 `jest.config.js` 中忽略样式文件：  

<syntaxhighlight lang="javascript">
moduleNameMapper: {
  '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
}
</syntaxhighlight>

=== 快照测试 ===  
使用 Jest 快照测试确保组件渲染一致性：  

<syntaxhighlight lang="javascript">
it('matches snapshot', () => {
  const { container } = render(<Button label="Click Me" />);
  expect(container).toMatchSnapshot();
});
</syntaxhighlight>

== 总结 ==  
通过本指南，你已学会：  
* 在 Next.js 中配置 Jest 测试环境。  
* 编写组件和页面测试。  
* 使用高级功能如 TypeScript 支持和 API 模拟。  

定期运行测试可显著提升代码质量，建议将其集成到 CI/CD 流程中。

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