Angular用Spectator+Jest测试含routerLink组件报循环结构转JSON错误

错误根源 #

该错误是Jest worker进程在将测试执行过程中的输出序列化回主进程时触发的：你代码中的console.log打印了spectator.query('form')返回的DOM元素，该元素关联了Angular注入器实例，新增routerLink指令后，注入器中新增了RouterLink相关的provider，刚好形成循环引用结构，JSON序列化失败。

修复方案 #

• 首先删除测试用例中的console.log('do we have a form yet', spectator.query('form'));代码，如果需要确认元素是否存在，仅打印简单类型的结果即可，比如：

  console.log('form是否存在', !!spectator.query('form'));
  

• 如果删除日志后仍报错，可按以下顺序排查：
  1. 确认Jest配置中已经配置了Angular专用的序列化器，在jest.config.js中添加如下配置：

  module.exports = {
    snapshotSerializers: [
      'jest-preset-angular/build/serializers/ng-snapshot',
      'jest-preset-angular/build/serializers/html-comment'
    ]
  }
  

  2. 检查你传入的imports数组，不要重复引入RouterTestingModule，createRoutingFactory已经默认内置了该模块，重复引入会导致注入器实例重复，触发循环引用。
  3. 如果你不需要测试routerLink的实际跳转逻辑，可以在配置中mock RouterLink指令，避免注入真实的路由依赖：

  let defaultComponentSettings = {
    component: LoginComponent,
    // 新增mock RouterLinkWithHref指令
    componentMocks: [SessionQuery, RouterLinkWithHref],
    // 其余原有配置不变
  }
  

内容的提问来源于stack exchange，提问作者Ramiro Jr. Franco