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 安装：

npm install --save-dev jest
# 或
yarn add --dev jest

在 package.json 中添加测试脚本：

{
  "scripts": {
    "test": "jest"
  }
}

基本用法

简单测试示例

以下是一个测试加法函数的例子：

// sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;

// sum.test.js
const sum = require('./sum');

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

运行测试：

npm test

输出：

PASS  ./sum.test.js
✓ adds 1 + 2 to equal 3 (2 ms)

匹配器（Matchers）

Jest 提供了多种匹配器来验证结果：

• toBe(value)：严格相等（===）。
• toEqual(object)：递归检查对象或数组的字段。
• toBeTruthy()：检查值是否为真。
• toHaveLength(number)：检查数组或字符串的长度。

示例：

test('object assignment', () => {
  const data = { one: 1 };
  data['two'] = 2;
  expect(data).toEqual({ one: 1, two: 2 });
});

高级功能

模拟函数

Jest 允许模拟函数以控制其行为：

const mockFn = jest.fn();
mockFn.mockReturnValue(42);
console.log(mockFn()); // 输出: 42

异步测试

Jest 支持 Promise 和 async/await：

test('fetch data resolves to "peanut butter"', async () => {
  await expect(fetchData()).resolves.toBe('peanut butter');
});

快照测试

用于验证 UI 组件输出：

test('Link renders correctly', () => {
  const component = renderer.create(<Link page="example.com">Example</Link>);
  const tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

实际案例

测试 React 组件

假设有一个简单的按钮组件：

// Button.js
import React from 'react';

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

测试文件：

// 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);
});

测试 API 调用

使用 jest.mock 模拟 API 模块：

// api.js
export const fetchUser = () => {
  return Promise.resolve({ name: 'Alice' });
};

// 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');
});

覆盖率报告

生成覆盖率报告：

npx jest --coverage

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

性能优化

Jest 通过以下方式优化性能：

• 仅运行与更改文件相关的测试（--onlyChanged）。
• 并行测试执行。
• 文件系统缓存。

常见问题

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

总结

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