使用Angular CLI+PhantomJS执行Karma测试遇JSON循环结构序列化错误

我之前也碰到过一模一样的问题，PhantomJS 2.1.1确实太老旧了，它对现代JavaScript特性的支持远不如Chrome这类主流浏览器——尤其是处理带循环引用的对象时，JSON.stringify很容易抛出你看到的TypeError: JSON.stringify cannot serialize cyclic structures错误，而Chrome的V8引擎早就修复了这类场景的兼容问题，所以在Chrome里测试全过。

下面给你几个可行的解决思路，按推荐程度排序：

方案一：替换PhantomJS为Headless Chrome（强烈推荐） #

PhantomJS已经停止维护好几年了，Angular官方现在也默认推荐用Headless Chrome来跑无头测试，配置起来非常简单：

1. 打开项目根目录下的karma.conf.js文件，找到browsers配置项，改成：

   browsers: ['ChromeHeadless'],
   

2. 如果你的项目还没安装Chrome启动器依赖，执行以下命令安装：

   npm install karma-chrome-launcher --save-dev
   

3. 最后用你原来的命令重新跑测试：

   ng test --code-coverage --single-run
   

这个方案一劳永逸，不仅能解决当前的循环引用序列化问题，还能避免PhantomJS带来的其他ES6+特性兼容问题。

方案二：修复测试代码中的循环引用 #

如果你暂时必须保留PhantomJS，那得定位并修复测试里的循环引用问题：

• 先排查失败的测试用例（比如你提到的AppService should be created），看看对应的服务/组件里有没有对象互相引用的情况（比如Service实例里的属性指向了某个组件，而组件又引用了这个Service）。
• 如果确实存在循环引用，你可以给JSON.stringify自定义一个replacer函数来处理循环结构，示例代码如下：

  // 定义一个处理循环引用的replacer
  const seen = new WeakSet();
  const cycleReplacer = (key, value) => {
    if (typeof value === 'object' && value !== null) {
      if (seen.has(value)) {
        return '[Cyclic Reference]';
      }
      seen.add(value);
    }
    return value;
  };
  
  // 在需要序列化的地方使用这个replacer
  JSON.stringify(yourCyclicObject, cycleReplacer);
  

• 另外，也可以检查项目的polyfills配置，看看是不是polyfill里的JSON.stringify实现有兼容问题，尝试更新polyfills版本或者调整相关配置。

方案三：升级PhantomJS（不推荐） #

虽然PhantomJS官方已经停更，但你可以尝试升级到社区维护的phantomjs-prebuilt最新版本，不过这个方案治标不治本，后续还是会遇到其他现代JS特性的兼容问题，所以不太推荐。

内容的提问来源于stack exchange，提问作者florentine