Angular使用Jest做单元测试出现NullInjectorError如何解决？

你收到的NullInjectorError: No provider for adalConfig!错误，根因是你在TestBed中注册的SharepointService或CommonService内部依赖了名为adalConfig的注入令牌，但是测试模块的providers数组中没有提供该令牌对应的实现，导致依赖注入失败。

你当前的测试配置里还有两处冗余/错误配置，也会导致测试异常：

• 错误将ToolbarComponent作为服务注册到providers中，并且赋值为字符串test，组件只需要在declarations中声明即可，不需要额外作为服务提供
• 重复提供HttpClient，你已经导入了HttpClientTestingModule，该模块已经内置了测试场景下的HttpClient实现，手动提供会导致实现冲突

按照以下步骤修改测试代码即可：

1. 移除providers数组中错误的ToolbarComponent和HttpClient配置
2. 引入项目中定义的adalConfig注入令牌，在providers中添加mock配置
3. 如果BASE_URL也是服务依赖的注入令牌，同样需要补充mock提供

修改后的配置参考：

// 先引入你项目中定义的adalConfig注入令牌，路径根据你实际项目调整
import { adalConfig } from 'xxx/xxx/adal-config';

describe('ToolbarComponent', () => {
  let component: ToolbarComponent;
  let fixture: ComponentFixture<ToolbarComponent>;
  let sharepointService: jest.SpyInstance<SharepointService>;
  let commonService: jest.SpyInstance<CommonService>;

  beforeEach(async(() => {
    // 提前创建mock服务，不需要依赖真实服务的内部实现，测试更隔离
    const mockSharepointService = { 
      //  mock你组件用到的服务方法即可
      getList: jest.fn().mockReturnValue(Promise.resolve([])) 
    };
    const mockCommonService = { 
      getConfig: jest.fn().mockReturnValue({}) 
    };

    TestBed.configureTestingModule({
      imports: [
        ColorPickerModule,
        NgxImageZoomModule,
        UiSwitchModule,
        HttpClientTestingModule
      ],
      declarations: [ToolbarComponent],
      providers: [
        // 提供mock的adalConfig，值根据你实际的配置结构填写即可
        { provide: adalConfig, useValue: { tenant: 'test', clientId: 'test', 其他配置字段: 'mock值' } },
        { provide: SharepointService, useValue: mockSharepointService },
        { provide: CommonService, useValue: mockCommonService },
        // 如果BASE_URL也是依赖项，同样补充提供
        { provide: BASE_URL, useValue: 'http://mock.test.url' }
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ToolbarComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

    sharepointService = TestBed.inject(SharepointService);
    commonService = TestBed.inject(CommonService);
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

单元测试组件时，建议直接mock依赖的服务，而不是使用真实的服务实例，这样不需要处理服务内部的所有嵌套依赖，也能隔离组件逻辑和服务逻辑，测试更稳定。

内容的提问来源于stack exchange，提问作者Rahil