讲师中心 微信公众号
AI工具推荐 视频效率加速

javascript测试框架如何编写单元测试?【教程】

阿瑶小哥_3267

阿瑶小哥_3267

发布时间:2026-01-22 15:23:22

|

966人浏览过

|

来源于php中文网

原创

用 Jest 写第一个 test 函数需安装 jest、命名文件为 .test.js 或 .spec.js,用 test() 包裹断言,expect() 后接匹配器如 toBe()。

javascript测试框架如何编写单元测试?【教程】

怎么用 Jest 写第一个 test 函数

Jest 是当前最主流的 JavaScript 单元测试框架,开箱即用,不用配 Babel 或打包工具就能跑 ES6+ 语法。写测试前先确保项目里装了 Jest:npm install --save-dev jest,并在 package.json 的 scripts 里加一行:"test": "jest"。

测试文件名必须以 .test.js 或 .spec.js 结尾(比如 math.test.js),Jest 才会自动识别。每个测试用 test() 或 it() 包裹,第一个参数是描述性字符串,第二个是回调函数:

test('add(1, 2) returns 3', () => {
  expect(add(1, 2)).toBe(3);
});

注意:expect() 后面必须跟匹配器(如 toBe()、toEqual()),不能直接写 add(1, 2) === 3——那样失败时没错误堆栈,也看不到期望值与实际值的差异。

describe() 和 beforeEach() 怎么组织多个测试用例

当一个模块有多个函数或同一函数有多种输入场景时,用 describe() 分组能让测试结构清晰,报错时也更容易定位到哪一组出问题。它不改变执行逻辑,只是语义分组:

立即学习“Java免费学习笔记(深入)”;

describe('User validation', () => {
  test('rejects empty name', () => { /* ... */ });
  test('accepts valid email', () => { /* ... */ });
});

如果多个测试共用某个对象或状态(比如初始化一个 new UserService() 实例),用 beforeEach() 比在每个 test() 里重复创建更安全、更易维护:

  • 避免测试间状态污染(比如某个测试修改了全局变量或实例属性)
  • 所有测试从干净状态开始,结果可重现
  • 如果初始化耗时,还可以考虑 beforeAll(),但得小心副作用

异步代码怎么测?async/await 和 Promise 的写法区别

Jest 默认等待测试函数同步执行完就结束,遇到异步操作会直接跳过断言,导致“测试通过但其实没跑”。必须显式告诉 Jest:等我这个异步动作完成再判结果。

Json Repair Kit
Json Repair Kit

使用 Node.js 评估修复格式错误的 JSON,自动纠正尾随逗号、单引号、未加引号的键等常见问题,实现文件规范化。

下载

三种合法写法(任选其一):

  • 返回 Promise:在 test() 回调里 return fetch('/api').then(...)
  • 用 async/await:函数声明为 async,里面用 await 等待,Jest 自动识别
  • 传入 done 回调:在函数参数里加 done,手动调用 done() 表示完成(容易忘调,不推荐)

错误示范:test('fetches user', () => { fetch('/user').then(res => expect(res.ok).toBe(true)); }); —— 这个 expect 永远不会被 Jest 等待,测试必然“假通过”。

为什么 mock 不生效?常见陷阱在哪

Mock 的核心是“替换真实依赖”,但 Jest 的 jest.mock() 是**自动 hoist 到文件顶部**的,这意味着你不能在 require 或 import 之后才调用它——那样模块已经加载完了,mock 失效。

正确做法只有两种:

  • 把 jest.mock('axios') 放在 import 语句之后、任何测试代码之前(Jest 会自动提升,但写在上面更直观)
  • 用工厂函数形式动态控制返回值:jest.mock('axios', () => ({ get: jest.fn().mockResolvedValue({ data: 'ok' }) }));

另一个高频坑:mock 模块里的默认导出(export default)时,要 mock 整个模块,而不是只 mock 某个方法名;ESM 下还要注意 __esModule: true 兼容性,有时得用 jest.requireActual() 保留部分真实行为。

真实项目里,边界越清晰(比如 API 调用全收口在 service 层)、mock 越简单;把 fetch 直接塞进组件里,后续就只能靠 msw 拦网络请求,成本高得多。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2175

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3402

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1136

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

3919

2025.09.10

es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

285

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

406

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

375

2025.12.24

require的用法
require的用法

require的用法有引入模块、导入类或方法、执行特定任务。想了解更多require的相关内容,可以阅读本专题下面的文章。

1955

2023.11.27

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

60

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 12.3万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn