Happy DOM 中脚本加载行为的分析与解决方案

背景介绍

Happy DOM 是一个轻量级的浏览器环境模拟器，常用于前端测试中替代真实的浏览器环境。与 JSDOM 类似，它提供了一个虚拟的 DOM 实现，使得我们可以在 Node.js 环境中运行前端代码测试。

问题现象

在使用 Happy DOM 进行前端测试时，开发者发现当测试代码动态创建并添加 script 标签到文档中时，Happy DOM 会实际尝试去获取脚本资源，这与 JSDOM 的行为不同。具体表现为：

test('脚本标签创建测试', () => {
  const script = document.createElement('script');
  script.src = 'http://localhost/assets/script.js';
  script.async = true;
  document.head.appendChild(script);
});

执行上述测试代码时，Happy DOM 会尝试连接本地服务器获取脚本资源，如果资源不可用则会抛出 ECONNREFUSED 错误。

技术分析

Happy DOM 的这种行为源于其设计理念：尽可能真实地模拟浏览器行为。在真实浏览器中，当 script 标签被添加到文档时，浏览器会自动加载并执行指定的脚本资源。Happy DOM 默认也遵循这一行为模式。

这种设计在某些测试场景下可能带来不便，特别是当：

1. 测试环境没有网络连接
2. 测试不需要实际加载外部资源
3. 希望测试快速执行而不涉及网络请求

解决方案

Happy DOM 提供了灵活的配置选项来控制其行为。通过设置可以禁用文件加载行为：

"testEnvironmentOptions": {
  "settings": {
    "disableJavaScriptFileLoading": true,
    "disableCSSFileLoading": true,
    "handleDisabledFileLoadingAsSuccess": true
  }
}

这三个关键配置项的作用分别是：

1. disableJavaScriptFileLoading：禁用 JavaScript 文件加载
2. disableCSSFileLoading：禁用 CSS 文件加载
3. handleDisabledFileLoadingAsSuccess：将禁用的文件加载视为成功而非失败

最佳实践建议

1. 单元测试场景：建议禁用文件加载，使测试更快速且不依赖外部资源
2. 集成测试场景：可根据需要启用文件加载，配合 MSW 等工具模拟网络请求
3. 配置管理：将 Happy DOM 配置集中管理，便于不同测试场景切换

总结

Happy DOM 的默认文件加载行为虽然更接近真实浏览器，但在测试场景中可能带来不便。通过合理配置可以灵活控制这一行为，使测试更加高效可靠。理解这些配置选项有助于开发者更好地利用 Happy DOM 进行前端测试。