Angular 5测试Mock ActivatedRoute报错：Cannot read property 'params' of undefined

你遇到的TypeError: Cannot read property 'params' of undefined错误，根源很明确：你的组件构造函数里直接访问的是ActivatedRoute的snapshot.params，但你在测试配置里只Mock了params这个Observable，完全没提供snapshot对象，导致代码试图读取undefined的params属性。

正确的Mock方式 #

直接给ActivatedRoute的Mock对象加上snapshot结构，匹配组件里的访问路径：

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [TransactionSummaryComponent],
    providers: [
      { provide: MockClaim, useClass: MockClaim }, // 注意原代码的provide参数存在语法问题，需对应正确的注入token
      { 
        provide: ActivatedRoute, 
        useValue: { 
          snapshot: {
            params: { claimId: 1 }
          }
        } 
      }
    ]
  });
});

拓展：同时支持Observable和Snapshot的Mock #

如果之后你的组件可能会订阅route.params，可以同时Mock这两个部分，确保覆盖所有场景：

import { of } from 'rxjs';

// ...

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [TransactionSummaryComponent],
    providers: [
      { provide: MockClaim, useClass: MockClaim },
      { 
        provide: ActivatedRoute, 
        useValue: { 
          snapshot: {
            params: { claimId: 1 }
          },
          params: of({ claimId: 1 })
        } 
      }
    ]
  });
});

这样调整后，测试就能正确识别route.snapshot.params，不会再抛出undefined的错误了。

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