讲师中心 微信公众号

工具推荐

视频效率加速
updream

一键生成高质量推广成片

Seko
Seko

AI短剧一键生成成片

立刻MV
立刻MV

低成本歌曲 MV、视频生成

Laper
Laper

剧本策划到成片协作

如何测试JavaScript代码的可靠性_JavaScript单元测试框架有哪些选择

大宇吖_4935

大宇吖_4935

发布时间:2026-01-07 19:59:16

|

697人浏览过

|

来源于php中文网

原创

Jest 更适合中大型长期维护项目,Vitest 更适合新项目和 Vite 生态;两者均需正确配置以避免模块解析错误,可靠测试需覆盖边界、隔离副作用、验证行为而非实现细节。

如何测试javascript代码的可靠性_javascript单元测试框架有哪些选择

用 Jest 还是 Vitest 测 JavaScript 单元测试?

Jest 仍是当前最成熟的 JavaScript 单元测试框架,但 Vitest 正在快速成为更轻量、更快启动的替代选择。两者都支持 describe、it、expect 语法,但底层差异明显:Jest 自带模拟(mock)系统和快照机制,Vitest 则复用 Vite 的模块解析与 HMR,对现代前端项目(尤其含 ESM、TS、Vue/React)启动速度更快。

常见错误现象:Jest encountered a declaration exception 往往因 jest.config.js 中 transform 配置未覆盖 .ts 或 .jsx 文件;Vitest 报 Cannot find module 'vue' 多因未在 vitest.config.ts 中配置 resolve.alias。

  • Jest 更适合需要完整隔离环境、大量定时器/网络 mock、长期维护的中大型项目
  • Vitest 更适合新项目、Vite 生态、追求本地开发时秒级测试反馈的团队
  • 两者都不直接支持浏览器 DOM 操作测试——需搭配 @testing-library/dom 或 jsdom 环境

如何写一个真正可靠的 test 函数断言?

可靠不等于“能跑通”,而在于是否覆盖边界、是否隔离副作用、是否验证行为而非实现细节。比如测试一个 sum(a, b) 函数,只写 expect(sum(1, 2)).toBe(3) 是脆弱的;它没验证 null、undefined、NaN、大数溢出或非数字输入的行为。

实操建议:

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

  • 每个 it 只测一个明确行为,名称用 “should … when …” 句式,如 should return 0 when both args are null
  • 对函数参数做类型校验的,必须显式测试 sum(null, 1)、sum('1', 2) 等非法输入路径
  • 避免在测试中调用真实 API 或读写本地存储——用 jest.mock() 或 vi.mock() 替换依赖
  • 慎用 toBe 比较对象或数组,优先用 toEqual;对异步操作,必须 await 或返回 Promise

beforeEach 和 jest.resetModules() 为什么经常一起用?

因为 ES 模块默认单例缓存,多次 import 同一模块不会重新执行顶层代码——这会让 mock 失效或状态残留。例如你在测试中用 jest.mock('./api') 模拟了请求函数,但下一个测试仍可能拿到上一个测试里被修改过的模块实例。

cn-json-diff
cn-json-diff

比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现,无需 API 密钥。

下载

解决方法是每次测试前重置模块缓存:

beforeEach(() => {
  jest.resetModules();
});

it('calls api with correct token', () => {
  const mockFetch = jest.fn().mockResolvedValue({ json: () => ({ ok: true }) });
  jest.mock('./api', () => ({
    fetchUser: mockFetch
  }));

  // 此处 import 必须在 mock 之后、且在 beforeEach 重置后
  const { getUser } = require('./user-service');
  getUser('123');

  expect(mockFetch).toHaveBeenCalledWith('123', 'token-abc');
});

注意:require 动态导入 + jest.resetModules() 是关键组合;ESM 中若用 import 语句则无法在运行时控制加载时机,此时推荐改用 vi.mock()(Vitest)或提前在 setupFilesAfterEnv 中统一 mock。

测试覆盖率高 ≠ 代码可靠,哪些地方最容易被忽略?

行覆盖率(% lines)常掩盖逻辑漏洞。比如一个 if (a > 0 && b 条件,只测 <code>a=5, b=5 和 a=-1, b=5 能达到 100% 行覆盖,但漏掉了 a=5, b=15(第二个条件为 false)和 a=-1, b=15(两个都 false)——这就是分支覆盖率缺失。

容易被忽略的点:

  • 异步错误处理:比如 try/catch 块中 reject 是否被正确捕获,catch 分支是否真被执行
  • 事件监听器注册/销毁:组件卸载时是否清理了 addEventListener 或定时器,否则导致内存泄漏或误触发
  • 第三方库副作用:如调用 localStorage.setItem 后未清理,影响后续测试
  • 时序敏感逻辑:如 setTimeout、Promise.resolve().then(),需用 jest.useFakeTimers() 或 vi.runOnlyPendingTimers() 控制

真正影响可靠性的,往往不是“有没有测试”,而是“有没有测对路径”和“有没有切断外部干扰”。

热门AI工具

更多
Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

豆包大模型

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

二狗PPT
二狗PPT Hot

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

DeepSeek

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

PixTV
PixTV Hot

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

WorkBuddy

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

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

花生AI
花生AI Hot

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

讯飞绘文

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

相关专题

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

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

569

2023.09.22

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

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

1698

2024.03.01

require的用法
require的用法

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

1975

2023.11.27

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4936

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1435

2023.07.28

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

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

1918

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

10483

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

1060

2023.09.01

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

80

2026.11.06

热门下载

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

精品课程

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

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.5万人学习

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

共26课时 | 2.6万人学习

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

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