In my standalone component, I am using an Injection Token to set a path (the paths are not the same for all micro-frontends). However, I do not provide this token in the component itself because I need to override it using providers in my app-module.ts.
Here is the constructor of my component:
constructor(
@Inject(ICON_SVG_PATH) public iconSvgPath: string,
private readonly renderer: Renderer2
) {}
When using the component, I can simply import it and provide the token in the providers. For example, this is how I do it in storybook:
imports: [IconComponent],
providers: [
{
provide: ICON_SVG_PATH,
useValue: '/assets/icons',
},
],
The issue arises when trying to write tests for this component in my spec.ts file, resulting in the following error:
NullInjectorError: R3InjectorError(Standalone[IconComponent])[InjectionToken ICON_SVG_PATH -> InjectionToken ICON_SVG_PATH -> InjectionToken ICON_SVG_PATH]: NullInjectorError: No provider for InjectionToken ICON_SVG_PATH! error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'InjectionToken ICON_SVG_PATH', 'InjectionToken ICON_SVG_PATH', 'InjectionToken ICON_SVG_PATH' ] })
Initially, I attempted to provide the Token similar to its usage:
await TestBed.configureTestingModule({
imports: [IconComponent],
providers: [
{
provide: ICON_SVG_PATH,
useValue: '/assets/icons',
},
],
})
.overrideComponent(IconComponent, {
set: { changeDetection: ChangeDetectionStrategy.Default },
})
.compileComponents();
However, I encountered the same error.
I also tried providing it like this:
TestBed.overrideProvider(MY_INJECTION_TOKEN, { useValue: {} });
Yet, the outcome was unchanged.
Lastly, I attempted to provide it from the test.ts file with no success.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting([
{
provide: MY_INJECTION_TOKEN,
useValue: {},
},
])
);
Thank you.