Unable to override provider in angular 9

Question

When trying to override provider in test case using, Testbed.overrideProvider it doesn't actualy override anything.

It used to work fine angular 9 with jasmine, not sure what has changed in angular 9 which has broke it.

Any help will be appriciated. in my app html component I am removing .bg-image when layout$ contains 'mobile'.

Here is what I have:

app.component.spec.ts

    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
      ],
      providers: [
        {
          provide: BreakpointService,
          useValue: {
            layout$: of('web')
          }
        }
      ],
      declarations: [AppComponent]
    }).compileComponents();

and in my one of test cases it(), I am doing

    TestBed.overrideProvider(BreakpointService, {
      useValue: { layout$: of('mobile') }
    });
    fixture.detectChanges();
    const imageElem = fixture.debugElement.query(By.css('.bg-image'));
    expect(imageElem).toBeFalsy();

I used to overrideProvider like this with angular 6 and hadn't been using angular for a while now. Today I started working on a new project with angular 9 and even tho it has these same methods mocking with overrideProvider doesn't work anymore. I know there is actually lot changed since angular 6, like default test framework has changed from jasmine to jest and new ivy render and many more. But my question remains, I am not sure if this is a bug, or I am just being dumb. I just wanted to ask someone with more experience here before I go ahead and open an issue in repo.