javascript测试如何进行_如何使用Jest编写单元测试？-js教程-PHP中文网

javascript测试如何进行_如何使用Jest编写单元测试？

紅蓮之龍

发布： 2025-12-13 03:37:30

原创

437人浏览过

Jest 是 JavaScript 单元测试最常用、上手最友好的方案，开箱即用，自带断言库、Mock 工具、覆盖率报告和测试运行器；支持 ES Module，需配置 jest.config.js；通过 test() 和 expect().matcher 编写测试，可模拟依赖、验证异步逻辑。

javascript测试如何进行_如何使用jest编写单元测试？

JavaScript 单元测试最常用、上手最友好的方案就是 Jest。它开箱即用，自带断言库、Mock 工具、覆盖率报告和测试运行器，不需要额外配置就能跑起来。

安装与基础配置

在项目根目录下执行：

npm install --save-dev jest

登录后复制

在 package.json 的 scripts 中添加：

"test": "jest",<br>"test:watch": "jest --watch"

登录后复制

如果项目使用 ES Module（比如有 type: "module"），需在 jest.config.js 中启用 ESM 支持（Jest 29+ 原生支持）：

立即学习“Java免费学习笔记（深入）”；

export default {<br>  testEnvironment: 'node',<br>  extensionsToTreatAsEsm: ['.ts', '.js'],<br>  transform: {<br>    '^.+\.js$': ['babel-jest', { presets: ['@babel/preset-env'] }],<br>  },<br>};

登录后复制

编写第一个测试文件

Jest 默认匹配 *.test.js 或 *.spec.js 文件。比如你有一个 math.js：

// math.js<br>export const add = (a, b) => a + b;<br>export const multiply = (a, b) => a * b;

登录后复制

对应写一个 math.test.js：

// math.test.js<br>import { add, multiply } from './math.js';<br><br>test('add returns correct sum', () => {<br>  expect(add(2, 3)).toBe(5);<br>});<br><br>test('multiply returns correct product', () => {<br>  expect(multiply(4, 5)).toBe(20);<br>});

登录后复制

运行 npm test 就能看到通过结果。

简小派

简小派是一款AI原生求职工具，通过简历优化、岗位匹配、项目生成、模拟面试与智能投递，全链路提升求职成功率，帮助普通人更快拿到更好的 offer。

123

查看详情

常用断言与测试技巧

Jest 提供丰富的 expect().matcher 方法，覆盖大多数验证场景：

toBe()：严格相等（适合原始值）
toEqual()：深度相等（适合对象、数组）
toBeTruthy() / toBeFalsy()：检查真值/假值
toThrow()：验证是否抛出错误
toHaveBeenCalledTimes()：配合 jest.fn() 检查函数调用次数

例如测试异步函数：

test('fetches user data', async () => {<br>  const userData = await fetchUser(123);<br>  expect(userData.name).toBe('Alice');<br>});

登录后复制

或者用 await expect(...).resolves 更安全地捕获 Promise 成功结果。

模拟依赖（Mocking）

测试时经常要隔离外部影响，比如 API 调用、定时器或第三方库。Jest 内置强大 Mock 功能：

jest.fn() 创建模拟函数，可记录调用、返回固定值或抛错
jest.mock('./module') 自动 mock 模块（会自动替换其所有导出）
jest.useFakeTimers() 替换 setTimeout 等，让时间控制可控

例子：mock 一个发请求的函数

import { fetchData } from './api.js';<br><br>jest.mock('./api.js'); // 自动 mock<br><br>test('shows loading then data', () => {<br>  fetchData.mockResolvedValue({ id: 1, name: 'Bob' });<br>  // ...触发组件逻辑<br>  expect(fetchData).toHaveBeenCalledTimes(1);<br>});

登录后复制

基本上就这些。Jest 不复杂但容易忽略细节，比如默认不支持顶层 await、ESM 导入路径别名需要额外配置。从简单函数开始写，逐步覆盖分支逻辑和副作用，测试就会自然成为开发节奏的一部分。

以上就是javascript测试如何进行_如何使用Jest编写单元测试？的详细内容，更多请关注php中文网其它相关文章！