Angular测试:如何正确配置依赖InjectorToken的组件测试环境?
解决Angular测试中Injector获取自定义InjectionToken的NullInjectorError问题
你遇到的问题根源在于:组件构造函数中注入的Injector是TestBed自动创建的根注入器,而你手动创建的Injector是完全独立的另一个实例,组件根本不会用到它。下面给你两种可行的解决方案,根据你的测试场景选择:
方案一:直接在TestBed中提供目标InjectionToken(推荐)
这是最简洁的常规解决方案,既然组件需要从Injector中获取TOKEN,那直接把TOKEN的提供者添加到TestBed的配置里即可,TestBed的根注入器会自动包含这个提供者:
// 注意要导入你定义的TOKEN,不要重新创建新的InjectionToken实例! import { TOKEN } from './test.component'; TestBed.configureTestingModule({ declarations: [ TestComponent ], providers: [ { provide: TOKEN, useValue: 'your-test-value' } // 直接提供你的自定义Token ] });
这样配置后,组件构造函数里的injector.get(TOKEN)就能从TestBed的注入器中成功获取到值,不会再抛出NullInjectorError。
方案二:手动指定组件使用自定义Injector(特殊场景)
如果你确实需要测试组件使用自定义Injector实例的场景(比如组件依赖一个特定的注入器配置),那不能直接在TestBed的根providers里替换Injector,而是要通过overrideComponent方法给组件本身指定Injector提供者:
import { TOKEN } from './test.component'; TestBed.configureTestingModule({ declarations: [ TestComponent ] }).overrideComponent(TestComponent, { set: { providers: [ { provide: Injector, useValue: Injector.create({ providers: [ { provide: TOKEN, useValue: 'your-test-value' } ] }) } ] } });
这个方法会覆盖组件自身的providers配置,让组件构造函数注入的是你手动创建的Injector实例,里面包含了TOKEN的提供者。
注意:不要重新创建新的
InjectionToken实例!一定要导入组件里定义的那个TOKEN,否则Angular会把它当成两个不同的Token,依然找不到提供者。
内容的提问来源于stack exchange,提问作者Christoph
相关产品推荐
相关产品推荐

