Angular 7 TestBed.overrideProvider 不适用于 ActivateRoute

标签 angular jestjs angular7

我正在使用带有 Jest 的 Angular 7 并且正在模拟组件的提供者。很多时候我需要更改在 TestBed 之后注入(inject)到组件中的内容。已编译,并且使用此代码执行此操作没有任何问题:

TestBed.configureTestingModule({...});
await TestBed.compileComponents();

... some code
TestBed.overrideProvider(SecurityService, {useValue: mockSecurityService});
fixture = TestBed.createComponent(LoginComponent);
fixture.detectChanges()

当我这样做时,新的 mockSecurityService 包含在我的组件中,正如我所期望的那样。但是……这真的很奇怪……无论我做什么,这种方法都不适用于 ActivatedRoute。因此,如果我更改 mockActivatedRoute 并添加以下代码行:
TestBed.overrideProvider(ActivatedRoute, {useValue: mockActivatedRoute});
TestBed.overrideProvider(SecurityService, {useValue: mockSecurityService});
fixture = TestBed.createComponent(LoginComponent);
fixture.detectChanges()

该组件使用它获得的第一个 mockActivatedRoute 类进行实例化,无论之后调用 overrideProvider 多少次,第一个对象都会获得。

这真的很奇怪,因为完全相同的代码路径适用于我的 mockSecurityService 以及 Angular Router 服务的模拟。 ActivatedRoute 类是否存在导致 TestBed 忽略覆盖的内容?我单步执行代码,看不出有什么区别;据我所知, overrideProviderMap 正在获取 ActivatedRoute 覆盖,但组件实例化仍然忽略它。

最佳答案

作为替代解决方案,您可以尝试 ng-mocks和它的 MockRender .
然后,在测试中,您可以执行以下操作:

it('test', () => {
  const fixture = MockRender(LoginComponent, null, {
    providers: [
      {
        provide: ActivatedRoute,
        useValue: mockActivatedRoute,
      },
    ],
  });
  // the rest of the test.
});

关于Angular 7 TestBed.overrideProvider 不适用于 ActivateRoute,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53462019/

相关文章:

javascript - 如何比较对象数组和嵌套对象数组?

angular - Firestore 事件文档快照监听器中断排序

javascript - 如何获取 Angular 2中的第一个父scrollTop元素?

angular - ngIf 单行 if 语句 | Angular 6

reactjs - 如何测试使用自定义 TypeScript React Hook 的组件?

react-native - 无法让 Jest expo 应用程序与 react-navigation 一起使用

angular - 在 Angular 7 中使用 keycloak 时如何保持 session 事件?

angular - 如何访问 Angular 模板中可能具有多种数据类型的对象

javascript - 如何检查多个 Jest spy 调用的多个参数?

angular - 在组件之间共享数据(Angular 7)