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

如何利用javascript进行单元测试_jest框架的基本使用方法是什么

胖芳大大_6307

胖芳大大_6307

发布时间:2026-01-09 11:21:39

|

964人浏览过

|

来源于php中文网

原创

Jest 初始化需项目级安装并运行npx jest --init,选jsdom、.test.js后缀和覆盖率;首个测试用expect(1+2).toBe(3)验证;匹配器要按类型选用,mock须在import前声明并清理,异步测试必须正确await或return Promise。

如何利用javascript进行单元测试_jest框架的基本使用方法是什么

Jest 是目前最主流的 JavaScript 单元测试框架,开箱即用、零配置起步快,但新手常卡在「写完测试却跑不起来」「断言失败但看不出哪错了」「mock 不生效」这几个地方。

如何初始化 Jest 并让第一个测试跑起来

不需要全局安装,项目级依赖更安全。执行命令后 Jest 会自动识别 .test.js 或 .spec.js 文件:

npm init -y
npm install --save-dev jest
npx jest --init

运行 npx jest --init 时建议:
- 选 Yes 启用 TypeScript 支持(即使当前没用 TS,后续加也方便)
- 选 jsdom 当作测试环境(模拟浏览器 DOM,适合 React/Vue 组件测试)
- 测试文件后缀选 .test.js
- 覆盖率报告选 Yes(后期排查漏测很有用)

生成的 jest.config.js 不用改,直接写一个最简测试就能验证环境:

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

然后运行 npx jest,看到 PASS 就说明基础链路通了。

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

expect() 的常见匹配器怎么选

expect() 后面接的不是函数调用,而是「断言意图」,选错匹配器会导致报错信息难懂或逻辑误判:

JS X Monitor
JS X Monitor

X.com (Twitter) 账号监控自动化:定时抓取指定账号最新推文,发现新内容即时推送通知。

下载
  • toBe() 用于严格相等(===),适合数字、字符串、布尔、null、undefined
  • toEqual() 用于对象/数组深比较,比如 expect(obj).toEqual({a: 1})
  • toContain() 检查数组是否含某元素,或字符串是否含子串
  • toThrow() 验证函数抛出错误,必须传函数引用,不能写 fn()
  • toBeCalledTimes(n) 和 toHaveBeenCalledWith(...args) 专用于 mock 函数校验

容易踩的坑:
- 用 toBe() 比较对象 → 总是 false,因为引用不同
- 写 expect(fn()).toThrow() → 报错,应写 expect(() => fn()).toThrow()

如何正确 mock 一个模块或函数

mock 的核心目标是「隔离被测代码依赖」,而不是「让测试看起来能过」。常见错误是 mock 位置不对或没还原:

  • 模块级 mock 必须放在文件顶部,且在 import 之前,否则无效
  • 用 jest.mock('./module') 自动 mock 整个模块,内部所有导出都变成 mock 函数
  • 想只 mock 某个函数,用 jest.fn() 替换它,再通过 jest.mock('./module', () => ({ func: jest.fn() })) 注入
  • 测试完记得调用 jest.clearAllMocks() 或 jest.restoreAllMocks(),避免污染其他测试

例如 mock fetch:

global.fetch = jest.fn();
// 然后在测试中控制返回值:
fetch.mockResolvedValueOnce({ json: () => Promise.resolve({ id: 1 }) });

异步测试怎么写才不会超时或漏 await

Jest 默认等待 5 秒,但异步逻辑若没显式处理,会跳过断言直接报 Timeout。三种写法必须对应清楚:

  • 返回 Promise:函数末尾 return fetch(...).then(...),Jest 自动等待
  • 使用 async/await:函数声明加 async,内部 await 所有异步操作
  • 回调形式:函数参数加 done,并在异步完成时调用 done()(少用,易忘)

错误示范:
test('fetches data', () => { await fetch('/api'); expect(...); }) → 语法错误,必须加 async
test('fetches data', async () => { fetch('/api'); expect(...); }) → 没 await,断言在请求发出前就执行了

真实项目里最难的不是写测试,而是判断「该不该测」「测到什么粒度」——比如工具函数必须全覆盖,但组件渲染逻辑往往更适合集成测试;mock 过细会让测试脆弱,过粗又失去隔离意义。这些边界得结合具体代码慢慢试出来。

相关文章

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

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

下载

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

热门AI工具

更多
UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

WorkBuddy

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

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

豆包大模型

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

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

DeepSeek

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

墨刀AI
墨刀AI Hot

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

创客贴AI

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

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

312

2026.02.13

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

520

2026.02.25

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

391

2026.03.13

TypeScript 全栈开发进阶指南
TypeScript 全栈开发进阶指南

面向有 JavaScript 基础的开发者,深入讲解 TypeScript 的类型系统与全栈开发实践。

306

2026.06.03

TypeScript Node.js 全栈工程化与Monorepo架构实践
TypeScript Node.js 全栈工程化与Monorepo架构实践

本专题围绕 TypeScript 在 Node.js 全栈开发中的工程化实践展开,系统讲解 Monorepo 架构设计、包管理策略、模块复用机制以及服务端与前端统一类型系统的构建方法。通过真实项目案例,帮助开发者提升大型全栈项目的可维护性与协作效率。

678

2026.06.16

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

549

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1698

2024.03.01

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1818

2023.08.03

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

40

2026.10.28

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.3万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习

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

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