ActivatedRoute Angular 7 的茉莉花测试

Question

我正在尝试为ActivatedRoute. 这是我的测试的样子。

it("should check if subscribes are called in init", () => {
    const subRouteSpy = spyOn(activatedRouteStub.paramMap, "subscribe");
    component.ngOnInit();
    expect(subRouteSpy).toHaveBeenCalled();
});

我的TestBed config：

const activatedRouteStub = {
  paramMap: {
    subscribe() {
      return of();
    }
  }
};

TestBed.configureTestingModule({
  declarations: [HomeFilterDrawerComponent],
  providers: [
    { provide: ActivatedRoute, useValue: activatedRouteStub }
  ],
  imports: [
    FormsModule,
    StoreModule.forRoot(appReducers),
    HttpClientTestingModule,
    RouterTestingModule
  ]
}).compileComponents();

测试一直失败让我Expected spy subscribe to have been called.不确定我在这里做错了什么。

ngOnInit组件内部的代码。

this.route.paramMap.subscribe(params => {
  if (params["params"].slug !== undefined) {
  }
});

Answer 1

角被克隆的activatedRouteStub对象，当你通过提供它useValue。因此，您正在监视原始存根对象，但您的组件会看到一个没有附加间谍的克隆对象。

这是指南中提到的

始终从注入器获取服务 不要在测试主体中引用提供给测试模块的 userServiceStub 对象。这是行不通的！注入到组件中的 userService 实例是一个完全不同的对象，是提供的 userServiceStub 的克隆。

要解决此问题，您需要使用以下方法获取对克隆对象的引用 TestBed.get

let activatedRoute;

const activatedRouteStub = {
  paramMap: {
    subscribe() {
      return of();
    }
  }
};

TestBed.configureTestingModule({
  declarations: [HomeFilterDrawerComponent],
  providers: [
    { provide: ActivatedRoute, useValue: activatedRouteStub }
  ],
  imports: [
    FormsModule,
    StoreModule.forRoot(appReducers),
    HttpClientTestingModule,
    RouterTestingModule
  ]
}).compileComponents();

beforeEach(() => {
  fixture = TestBed.createComponent(NewsComponent);
  component = fixture.componentInstance;

  // Get a reference to the injected value
  activatedRoute = TestBed.get(ActivatedRoute);
});

it("should check if subscribes are called in init", () => {
  // Spy on the injected value
  const subRouteSpy = spyOn(activatedRoute.paramMap, "subscribe");
  component.ngOnInit();
  expect(subRouteSpy).toHaveBeenCalled();
});

或者，您可以保持代码不变，但更改useValue为useFactory. 这将允许您绕过克隆行为：

providers: [{ provide: ActivatedRoute, useFactory: () => activatedRouteStub }]