Angular ActivatedRoute单元测试读取undefined属性报错的解决方法

问题场景 #

测试如下Angular业务代码时出现报错：

constructor(
    private valuePairService: ValuePairService,
    private sanitizer: DomSanitizer,
    private service: Service,
    private router: Router,
    private route: ActivatedRoute
  ) {}

ngOnInit(): void {
    this.route.data.subscribe(({ result }) => {
      this.video =
        result.value === undefined
          ? '//player.vimeo.com/video/65498532'
          : result.value;
    });
  }

初始测试配置 #

beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule, HttpClientTestingModule],
      providers: [
        {
          provide: ActivatedRoute,
          useValue: { data: of({ value: 'test'}) }
        },
      ],
    }).compileComponents();
    router = TestBed.inject(Router);
  });

报错信息 #

TypeError: Cannot read property 'value' of undefined

根因分析 #

业务代码对route.data的返回值做了解构，只取其中的result字段，但测试配置中mock的data流返回的对象只有value字段，没有result字段，导致解构出来的result为undefined，后续读取result.value触发空指针报错。

修复方案 #

调整ActivatedRoute的mock配置，给data流返回符合业务代码预期结构的对象：

beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule, HttpClientTestingModule],
      providers: [
        {
          provide: ActivatedRoute,
          useValue: { data: of({ result: { value: 'test' } }) }
        },
      ],
    }).compileComponents();
    router = TestBed.inject(Router);
  });

注：需保证mock的result字段是包含value属性的对象，和业务代码的取值逻辑对齐，避免后续二次报错。

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