Route level providers - how to provide them in test

I think there is no possibility to provide mock for any route level provided Services. Creation of test routes to override it has no sense when need to test on real routes.

@Injectable()
export class SomeService {
private http = inject(HttpClient);
}

export const resolverFn= (
route: ActivatedRouteSnapshot
): Observable<User> => {
const svc = inject(SomeService);
const id = Number(route.paramMap.get('userId'));
return svc.getUser(id);
};

export const routes: Routes = [
{
path: 'feature',
providers: [SomeService],
resolve: {
user: resolverFn
},
loadComponent: () =>
import('./feature/feature.component').then(m => m.FeatureComponent)
},
];


When try to provide them in test configuration, the real instance will be provided. TestBed.overrideProvider also does not work. There will be error no provider for HttpClient.

describe('UserMainComponent (with Jasmine mocks)', () => {
let harness: RouterTestingHarness;
let someServiceSpy: jasmine.SpyObj<SomeService>;

beforeEach(async () => {
someServiceSpy = jasmine.createSpyObj('SomeService', ['getNext']);
someServiceSpy.getNext.and.returnValue(99);

await TestBed.configureTestingModule({
providers: [
provideRouter(routes),
provideLocationMocks(),
{ provide: SomeService, useValue: someServiceSpy }
]
}).compileComponents();

harness = await RouterTestingHarness.create();
});

it('resolves user and injects into the component, and calls SomeService.getNext()', async () => {
const comp = await harness.navigateByUrl(
'feature',
UserMainComponent
);
});
});


Maybe .overrideComponent() is the case when service is used in the component (did not check that), but here service is used in resolver. How to handle this?

Continue reading...