Angular 7 TestBed.overrideProvider does not work for ActivateRoute

Question

I'm using Angular 7 w/ Jest and am mocking out providers to components. There are lots of times where I need to change what is injected into the components after the TestBed is compiled, and I've had no problems doing that with this code:

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

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

When I do this, the NEW mockSecurityService is included in my component, exactly as I would expect. But... and this is really weird... this method does NOT work for ActivatedRoute, no matter what I do. So if I change the mockActivatedRoute and add this line of code:

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

The component is instantiated with the first mockActivatedRoute class that it got, and no matter how many times overrideProvider is called afterward, the first object gets stands.

This is really weird because the exact same code path works for my mockSecurityService as well as a mock of the Angular Router service. Is there something about the ActivatedRoute class that is causing the TestBed to ignore overrides? I stepped through the code and can see no difference; as far as I can tell, the overrideProviderMap is getting the ActivatedRoute override, but the component instantiation is ignoring it nonetheless.

does the problem still remain if you chain on the same TestBed call? Testbed.overrideProvider(ActivatedRoute, {useValue: mockActivatedRoute}).overrideProvider(SecurityService, {useValue: mockSecurityService}); — Lucho, Nov 24 '18 at 22:11
You can override providers in TestBed.configureTestingModule part. — Oleksandr Poshtaruk, Nov 25 '18 at 11:32

score 0 · Answer 1 · answered Jul 11 '21 at 11:31

As an alternative solution, you might try ng-mocks and its MockRender.

Then, in a test you could do something like that:

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

Angular 7 TestBed.overrideProvider does not work for ActivateRoute

1 Answers1