编辑“︁JavaScript Jest框架”︁（章节）

= JavaScript Jest框架 =

'''Jest''' 是一个由 Facebook 开发的 JavaScript 测试框架，专注于简洁性和易用性。它支持单元测试、集成测试和快照测试，适用于 React、Vue、Node.js 和其他 JavaScript 项目。Jest 提供了开箱即用的功能，如模拟（mocking）、断言（assertions）、覆盖率报告和并行测试执行，使其成为现代 JavaScript 开发中的首选测试工具。

== 核心特性 ==
Jest 的主要特点包括：
* '''零配置'''：默认支持 Babel、TypeScript 和 Node.js 环境。
* '''快速执行'''：通过智能缓存和并行测试运行提高速度。
* '''快照测试'''：捕获组件或对象的输出，确保 UI 或数据结构不会意外更改。
* '''模拟功能'''：轻松模拟函数、模块和定时器。
* '''覆盖率报告'''：内置代码覆盖率分析工具。

== 安装与配置 ==
Jest 可以通过 npm 或 yarn 安装：
<syntaxhighlight lang="bash">
npm install --save-dev jest
# 或
yarn add --dev jest
</syntaxhighlight>

在 <code>package.json</code> 中添加测试脚本：
<syntaxhighlight lang="json">
{
  "scripts": {
    "test": "jest"
  }
}
</syntaxhighlight>

== 基本用法 ==
=== 简单测试示例 ===
以下是一个测试加法函数的例子：
<syntaxhighlight lang="javascript">
// sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// sum.test.js
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});
</syntaxhighlight>

运行测试：
<syntaxhighlight lang="bash">
npm test
</syntaxhighlight>

输出：
<syntaxhighlight lang="text">
PASS  ./sum.test.js
✓ adds 1 + 2 to equal 3 (2 ms)
</syntaxhighlight>

=== 匹配器（Matchers） ===
Jest 提供了多种匹配器来验证结果：
* <code>toBe(value)</code>：严格相等（===）。
* <code>toEqual(object)</code>：递归检查对象或数组的字段。
* <code>toBeTruthy()</code>：检查值是否为真。
* <code>toHaveLength(number)</code>：检查数组或字符串的长度。

示例：
<syntaxhighlight lang="javascript">
test('object assignment', () => {
  const data = { one: 1 };
  data['two'] = 2;
  expect(data).toEqual({ one: 1, two: 2 });
});
</syntaxhighlight>

== 高级功能 ==
=== 模拟函数 ===
Jest 允许模拟函数以控制其行为：
<syntaxhighlight lang="javascript">
const mockFn = jest.fn();
mockFn.mockReturnValue(42);
console.log(mockFn()); // 输出: 42
</syntaxhighlight>

=== 异步测试 ===
Jest 支持 Promise 和 async/await：
<syntaxhighlight lang="javascript">
test('fetch data resolves to "peanut butter"', async () => {
  await expect(fetchData()).resolves.toBe('peanut butter');
});
</syntaxhighlight>

=== 快照测试 ===
用于验证 UI 组件输出：
<syntaxhighlight lang="javascript">
test('Link renders correctly', () => {
  const component = renderer.create(<Link page="example.com">Example</Link>);
  const tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});
</syntaxhighlight>

== 实际案例 ==
=== 测试 React 组件 ===
假设有一个简单的按钮组件：
<syntaxhighlight lang="javascript">
// Button.js
import React from 'react';

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

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

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

=== 测试 API 调用 ===
使用 <code>jest.mock</code> 模拟 API 模块：
<syntaxhighlight lang="javascript">
// api.js
export const fetchUser = () => {
  return Promise.resolve({ name: 'Alice' });
};
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// api.test.js
import { fetchUser } from './api';

jest.mock('./api');

test('fetchUser returns Alice', async () => {
  fetchUser.mockResolvedValue({ name: 'Alice' });
  const user = await fetchUser();
  expect(user.name).toBe('Alice');
});
</syntaxhighlight>

== 覆盖率报告 ==
生成覆盖率报告：
<syntaxhighlight lang="bash">
npx jest --coverage
</syntaxhighlight>

输出目录 <code>coverage/</code> 包含 HTML 和 JSON 格式的报告。

== 性能优化 ==
Jest 通过以下方式优化性能：
* 仅运行与更改文件相关的测试（<code>--onlyChanged</code>）。
* 并行测试执行。
* 文件系统缓存。

== 常见问题 ==
{| class="wikitable"
|-
! 问题 !! 解决方案
|-
| 测试无法识别 ES6 语法 || 安装 <code>@babel/preset-env</code> 并配置 Babel
|-
| 模拟模块不生效 || 确保调用 <code>jest.mock()</code> 在文件顶部
|-
| 快照测试频繁失败 || 检查是否是有意更改，或更新快照（<code>jest -u</code>）
|}

== 总结 ==
Jest 是一个功能强大且易于使用的测试框架，适合从初学者到高级开发者的所有用户。通过其丰富的匹配器、模拟功能和覆盖率工具，可以轻松编写和维护可靠的测试套件。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript测试]]