JS 中单元测试核心精讲怎么复习掌握-js教程-PHP中文网

掌握js单元测试关键在于理解其存在意义及如何自然融入代码，需锚定被测单元边界、依赖隔离方式、断言意图三大支点。

js 中单元测试核心精讲怎么复习掌握

掌握 JS 单元测试，关键不在背概念，而在理解它“为什么存在”以及“怎么自然地长进代码里”。复习时别从框架 API 开始，先锚定三个底层支点：被测单元的边界、依赖的隔离方式、断言背后的意图。

明确“单元”到底指什么

JS 里没有统一标准，但实践中有清晰共识：

函数级：纯函数（无副作用、输入确定输出）是最理想的单元，比如 sum(a, b)、formatDate(date)
模块级：一个 ES 模块导出的多个相关函数，可一起测，但每个测试仍聚焦单个行为
组件级（如 React/Vue）：测渲染输出、事件响应、props 变化后的状态更新，不测 DOM 渲染细节或样式
避开陷阱：不要测 fetch 调用本身、不测第三方库逻辑、不测浏览器 API（如 localStorage）——这些要 mock

学会隔离外部依赖

单元测试的核心是“可控”，而 JS 天然容易耦合。复习时重点练这几种隔离手段：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

函数参数注入：把依赖（如 API 客户端、时间工具）作为参数传入，测试时传 mock 函数
ES 模块 mock：用 Jest 的 jest.mock() 或 Vitest 的 vi.mock() 替换整个模块导出
全局 API 替换：对 Date.now、setTimeout 等，用 jest.useFakeTimers() 或手动覆盖再恢复
避免直接修改 globalThis 或原型链——测试污染会导致用例间相互干扰

写断言要问“我到底在保护什么”

别只写 expect(result).toBe(42)。每个断言都该对应一个明确的契约：

返回值类型与结构：比如函数应返回对象且含 id 和 name 字段
边界行为：空数组输入是否返回空数组？null 输入是否抛错？负数是否被拒绝？
副作用验证：调用了几次 mock 函数？传了什么参数？有没有按顺序触发？
不测“实现细节”：比如内部用了 for 还是 map，变量名是什么——这些改了不该让测试挂

从一个真实小函数开始动手练

选一段你写过的业务逻辑，比如表单校验函数：

function validateEmail(email) {
  if (!email) return { valid: false, message: '邮箱不能为空' };
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    return { valid: false, message: '邮箱格式不正确' };
  }
  return { valid: true };
}

围绕它写 4–5 个测试用例：空字符串、null、非法格式、合法格式、带空格的合法格式。不引入框架也行，用原生 console.assert 搭配简单描述就能起步。熟练后再迁移到 Jest/Vitest。