Angular 5 Jasmine测试报错：DynamicTestModule提供者无效

这个错误的核心原因很明确：你在配置测试用的DynamicTestModule时，declarations或providers数组里混入了不符合Angular要求的内容——Angular只接受Provider实例或者类（Type），但你的数组里不仅有格式不对的对象，还存在未定义（undefined）的项（报错里的?[object Object]?就是最明显的线索）。

下面给你一步步的排查和修复方案：

1. 先检查测试模块的基础配置 #

打开你的组件测试文件，找到TestBed.configureTestingModule这段代码，仔细核对里面的declarations和providers数组：

• 别把组件实例（比如new AlertModaldataComponent()）放进declarations，这里只能放组件/指令/管道的类本身
• 检查providers里的对象格式是否合规，比如正确的提供者写法是{ provide: 目标服务, useClass: 替代服务 }，或者直接写服务类；不要有语法错误，也不要引用不存在的变量

举个错误配置的反例（你大概率是犯了类似的错）：

// 错误示例！不要这么写
TestBed.configureTestingModule({
  declarations: [new AlertModaldataComponent()], // 错用了实例，应该用类
  providers: [AlertModaldataComponent, undefined] // 组件不该放providers，还有undefined项
});

2. 排查数组里的undefined项 #

报错里的?[object Object]?说明数组里有无法被识别的元素，90%的概率是某个项是undefined。你可以在测试前先打印数组内容，定位问题：

const testDeclarations = [AlertModaldataComponent, /* 其他你加的项 */];
const testProviders = [/* 你的提供者 */];
console.log('当前声明的组件:', testDeclarations);
console.log('当前配置的提供者:', testProviders);

TestBed.configureTestingModule({
  declarations: testDeclarations,
  providers: testProviders
});

运行测试后看控制台，找到那个undefined的项，然后检查对应的导入语句或者变量定义——大概率是你漏了导入某个类，或者变量名写错了。

3. 特殊情况：弹窗组件要配置entryComponents #

如果AlertModaldataComponent是弹窗类的组件（比如通过ComponentFactoryResolver动态创建的），别把它放进providers里！正确的做法是加到entryComponents数组中：

// 正确的弹窗组件测试配置
TestBed.configureTestingModule({
  declarations: [AlertModaldataComponent],
  entryComponents: [AlertModaldataComponent], // 动态组件必须加这里
  providers: [
    { provide: SomeService, useClass: MockSomeService } // 正确的提供者格式
  ]
}).compileComponents();

最后给你一个完整的正确示例 #

import { TestBed, async } from '@angular/core/testing';
import { AlertModaldataComponent } from './alert-modaldata.component';
import { ModalService } from '../services/modal.service';
import { MockModalService } from '../mocks/mock-modal.service';

describe('AlertModaldataComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [AlertModaldataComponent],
      entryComponents: [AlertModaldataComponent], // 如果是动态弹窗组件
      providers: [
        { provide: ModalService, useClass: MockModalService }
      ]
    }).compileComponents();
  }));

  it('应该能正常创建组件', () => {
    const fixture = TestBed.createComponent(AlertModaldataComponent);
    const component = fixture.componentInstance;
    expect(component).toBeTruthy();
  });
});

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