从零搭建Jest与测试用例编写实战指南产品大全深圳市广通软件有限公司

在前端开发、计算机软件开发及运维服务中，单元测试是保证代码质量、提升可维护性和减少线上错误的关键环节。Jest是当前流行的JavaScript测试框架，凭借其零配置、高性能和丰富的功能，成为前端及Node.js项目的首选测试工具。本文将手把手教你如何从零搭建Jest环境，并实际编写测试用例，助力你的开发与运维工作。

一、Jest简介与优势

Jest是由Facebook开发的JavaScript测试框架，主要特点包括：

零配置：开箱即用，支持Babel、TypeScript等现代前端技术栈
快照测试：轻松捕获组件或数据结构的渲染结果
并行测试：通过工作进程并行运行测试，提高执行效率
Mock功能强大：内置丰富的模拟功能，简化依赖管理
代码覆盖率：自动生成测试覆盖率报告，直观评估测试完整性

二、从零搭建Jest环境

步骤1：初始化项目

如果你还没有项目，先创建一个新目录并初始化npm：
`bash
mkdir jest-demo && cd jest-demo
npm init -y
`

步骤2：安装Jest及相关依赖

`bash npm install --save-dev jest # 如需支持TypeScript

npm install --save-dev ts-jest @types/jest typescript
# 如需支持Babel

npm install --save-dev babel-jest @babel/core @babel/preset-env
`

步骤3：配置Jest

创建jest.config.js文件：
`javascript
module.exports = {
testEnvironment: 'node', // 或'jsdom'用于前端DOM测试
testMatch: ['/_tests_//.js', '**/?(.)+(spec|test).js'],
collectCoverage: true,
coverageDirectory: 'coverage',
coverageReporters: ['text', 'lcov'],
// TypeScript配置
preset: 'ts-jest',
// Babel配置
transform: {
'^.+\\.js$': 'babel-jest'
}
};
`

步骤4：配置Babel（如需要）

创建.babelrc文件：
`json
{
"presets": ["@babel/preset-env"]
}
`

步骤5：配置npm脚本

在package.json中添加：
`json
{
"scripts": {
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage"
}
}
`

三、编写测试用例实战

示例1：纯函数测试

创建src/math.js：
`javascript
export function add(a, b) {
return a + b;
}

export function divide(a, b) {
if (b === 0) throw new Error('除数不能为零');
return a / b;
}
`

创建tests/math.test.js：
`javascript
import { add, divide } from '../src/math';

describe('数学函数测试', () => {
test('add函数应正确计算两数之和', () => {
expect(add(2, 3)).toBe(5);
expect(add(-1, 1)).toBe(0);
expect(add(0.1, 0.2)).toBeCloseTo(0.3); // 处理浮点数精度
});

test('divide函数应正确处理除法', () => {
expect(divide(6, 2)).toBe(3);
expect(divide(5, 2)).toBe(2.5);
});

test('divide函数在除数为零时应抛出错误', () => {
expect(() => divide(10, 0)).toThrow('除数不能为零');
});
});
`

示例2：异步函数测试

创建src/api.js：
`javascript
export async function fetchData() {
const response = await fetch('https://api.example.com/data');
return response.json();
}
`

创建tests/api.test.js：
`javascript
describe('API函数测试', () => {
beforeEach(() => {
global.fetch = jest.fn();
});

afterEach(() => {
jest.resetAllMocks();
});

test('fetchData应成功返回数据', async () => {
const mockData = { id: 1, name: '测试数据' };
fetch.mockResolvedValue({
json: jest.fn().mockResolvedValue(mockData)
});

const data = await fetchData();
expect(data).toEqual(mockData);
expect(fetch).toHaveBeenCalledWith('https://api.example.com/data');
});

test('fetchData在请求失败时应抛出错误', async () => {
fetch.mockRejectedValue(new Error('网络错误'));

await expect(fetchData()).rejects.toThrow('网络错误');
});
});
`

示例3：React组件测试（需安装额外依赖）

npm install --save-dev react-test-renderer @testing-library/react

创建src/Button.js：
`jsx
import React from 'react';

function Button({ onClick, children, disabled = false }) {
return (

);
}

export default Button;
`

创建tests/Button.test.js：
`jsx
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Button from '../src/Button';

describe('Button组件测试', () => {
test('应正确渲染按钮文本', () => {
const { getByText } = render();
expect(getByText('点击我')).toBeInTheDocument();
});

test('点击按钮应触发onClick回调', () => {
const handleClick = jest.fn();
const { getByTestId } = render(

);

fireEvent.click(getByTestId('custom-button'));
expect(handleClick).toHaveBeenCalledTimes(1);
});

test('禁用状态下按钮不应触发点击', () => {
const handleClick = jest.fn();
const { getByTestId } = render(

);

fireEvent.click(getByTestId('custom-button'));
expect(handleClick).toHaveBeenCalledTimes(0);
});
});
`