Web Test Runner 中冻结对象断言导致测试卡死问题分析

问题现象

在使用 Web Test Runner（简称 WTR）进行前端测试时，开发者发现当测试代码中对被 Object.freeze() 冻结的对象进行断言时，测试用例会无法正常完成。具体表现为测试进程卡住，无法继续执行后续测试或退出。

问题复现

通过一个简单的测试用例可以稳定复现该问题：

import { expect } from '@open-wc/testing';

describe('readonly', () => {
  it('gets stuck when throwing readonly array of objects', () => {
    const obj = [{}];
    const frozenObj = Object.freeze(obj);
    expect(frozenObj).to.be.empty;
  });
});

问题根源分析

经过深入排查，发现问题出在 Web Test Runner 的错误处理机制中。当测试失败时，WTR 会尝试将错误信息通过 WebSocket 发送给命令行界面进行显示。在这个过程中，系统需要对错误对象进行序列化处理，包括处理可能的循环引用结构。

关键问题点在于：

1. 序列化过程中使用了 JSON.stringify() 方法
2. 对于冻结对象，该方法无法正常工作
3. 错误处理流程中没有对冻结对象的特殊处理

技术背景

Object.freeze 的特性

Object.freeze() 方法可以冻结一个对象，使其不能被修改。冻结后：

• 不能添加新属性
• 不能删除已有属性
• 不能修改已有属性的可枚举性、可配置性、可写性
• 不能修改已有属性的值

JSON.stringify 的限制

JSON.stringify() 在处理冻结对象时存在一些限制：

1. 无法修改冻结对象的属性描述符
2. 在尝试检测循环引用时可能会失败
3. 某些浏览器实现中可能抛出异常

解决方案

针对这一问题，社区提出了几种可行的解决方案：

1. 使用结构化克隆

在序列化前先对对象进行深拷贝：

const clonedError = structuredClone(error);
JSON.stringify(clonedError);

这种方法可以避免直接操作冻结对象，但需要注意浏览器兼容性。

2. 修改错误处理逻辑

在 Web Test Runner 的错误处理流程中增加对冻结对象的检测：

function safeStringify(error) {
  try {
    return JSON.stringify(error);
  } catch (e) {
    try {
      return JSON.stringify({ 
        message: error.message,
        stack: error.stack 
      });
    } catch (e) {
      return '{}';
    }
  }
}

3. 测试代码最佳实践

在编写测试时，可以避免直接断言冻结对象：

// 不推荐
expect(Object.freeze(obj)).to.be.empty;

// 推荐
const result = Object.freeze(obj);
expect(result.length).to.equal(0);

影响范围

该问题主要影响：

1. 使用 Web Test Runner 进行前端测试的项目
2. 测试中涉及冻结对象的断言
3. 使用 Puppeteer 或 Playwright 作为测试运行器的场景

预防措施

为避免类似问题，开发者可以：

1. 在测试中谨慎使用 Object.freeze()
2. 对复杂对象断言时使用更具体的断言方式
3. 保持测试框架和依赖库的最新版本
4. 编写测试时考虑边界情况和异常处理

总结

Web Test Runner 在处理冻结对象断言时出现的问题，揭示了测试工具在错误处理和对象序列化方面的潜在缺陷。通过理解问题的技术背景和解决方案，开发者可以更好地编写健壮的测试代码，同时也能为测试工具的改进提供有价值的参考。