JavaScript如何编写可测试代码【教程】

本文深入探讨了JavaScript中编写真正可测试代码的核心原则与实践技巧，强调可测试性不依赖于测试框架的选择，而在于代码自身是否职责清晰、依赖显式、副作用可控；通过将fetch、DOM操作、时间获取等副作用抽离为参数或回调，避免顶层执行和隐式状态，优先使用纯函数而非带this或闭包的复杂结构，并采用具名导出替代默认对象导出，不仅能大幅提升单元测试的稳定性、隔离性和断言能力，还能兼顾Tree-shaking性能优化与模块化开发体验——让代码从“抗拒被测”变为“乐于被测”，从根本上提升工程健壮性与长期可维护性。

JavaScript 代码是否“可测试”，不取决于用了什么测试框架，而取决于它是否容易被隔离、被控制、被断言——核心是函数职责清晰、依赖显式、副作用可控。

把副作用抽离到参数或回调里

测试最怕遇到隐式副作用：比如直接调用 fetch、修改全局变量、操作 document。这类代码一跑就发请求或改页面，单元测试根本没法稳定执行。

实操建议：

• 把外部调用（如 API 请求）抽象成函数参数，例如：loadUser(fetchFn) 而不是硬编码 fetch('/api/user')
• DOM 操作封装成独立函数，并通过参数接收目标节点，避免内部直接写 document.getElementById
• 时间相关逻辑（如 new Date()）用参数传入时间戳，方便在测试中固定时间点

示例：

function formatTimestamp(timestamp, now = Date.now()) {
  return now - timestamp 
测试时可传入固定值：formatTimestamp(1710000000000, 1710000060000)，结果确定，无需 mock。
避免在模块顶层执行逻辑
Node.js 或 ES 模块加载时，顶层代码会立即运行。如果这里包含初始化、定时器、网络请求，模块一引入就触发副作用，测试文件还没开始跑，环境可能已被污染。
常见错误现象：

• 测试报错 TypeError: fetch is not defined（因为顶层用了未 mock 的 fetch）
• 多个测试用例之间状态串扰（比如共享的 let cache = {} 在顶层）

正确做法：

• 所有业务逻辑封装进函数或类方法，模块只做导出，不主动执行
• 初始化逻辑放到明确的 init() 函数里，由使用者按需调用
• 配置对象用 const config = {...} 声明，但不要在顶层调用 loadConfigFromServer()

用纯函数优先，减少 this 和闭包依赖

带 this 的方法（尤其 class 内部）和强依赖闭包状态的函数，测试时需要构造完整上下文，mock 成本高、易出错。

实操建议：

• 优先写无状态、无 this 的普通函数，输入决定输出，比如：calculateTotal(items, taxRate)
• 如果必须用 class，把核心计算逻辑拆成静态方法或独立函数，便于单独测试
• 避免在闭包里缓存状态（如 let count = 0; const inc = () => ++count），测试难以重置

对比：

// ❌ 难测：闭包状态 + 无参数
const createCounter = () => {
  let count = 0;
  return () => ++count;
};
// ✅ 可测：状态外置，行为纯化
const increment = (count) => count + 1;

导出具体函数，别只导出默认对象

很多项目习惯只导出一个默认对象：export default { init(), start(), stop() }。这会让测试无法 import 单个函数，只能整块 mock，丧失细粒度控制能力。

性能与兼容性影响：

• Tree-shaking 效果差：即使只用 init，整个对象仍可能被打包进去
• ESM 动态 import('./module.js') 返回的是命名空间对象，取属性不如直接 import 名称直观

正确写法：

export function init() { ... }
export function start() { ... }
export function stop() { ... }
// 不要 export default { init, start, stop }

测试时可精准导入：import { init } from './app.js'，不污染其他导出，也方便 jest.mock 局部替换。

真正难的不是写 test 文件，而是让被测代码不抗拒被测——它得愿意交出控制权，而不是把 fetch、Date、localStorage 全锁死在自己身体里。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript如何编写可测试代码【教程】》文章吧，也可关注golang学习网公众号了解相关技术文章。