How Fix NullInjectorError: No provider for ActivatedRoute, in Angular
Published on August 13, 2024
Last time we talked about how to test the injectQuery method in Tanstack Query, but for today let's talk about how to fix this classic error: NullInjectorError: No provider for ActivatedRoute.
payment-option.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PaymentOptionComponent } from './payment-option.component';
import { provideRouter } from '@angular/router';
import { homeRoutes } from '../../home.routes';
describe('PaymentOptionComponent', () => {
let component: PaymentOptionComponent;
let fixture: ComponentFixture<PaymentOptionComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [PaymentOptionComponent],
// Just add provideRouter, to your provider, you can provide an array of routes to the provideRouter as an argument
providers: [provideRouter([])],
}).compileComponents();
fixture = TestBed.createComponent(PaymentOptionComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
That is it, we are done.
Hey 👋, I believe you enjoyed this shortie (it serves as a note to my future self 😎) and learned something new and valuable. Learn about how to test Router.navigate in Angular here.
You can also follow me on Twitter (or instead X 😂) as I share more tips and tricks to make you improve as a better software engineer.
Until then, happy coding!