Angular(Jasmine / Karma) – 错误：非法状态：无法加载指令的摘要

export function main() {
  describe('LrCategoriesComponent',() => {
    let fixture: ComponentFixture<LrCategoriesComponent>;
    let component: LrCategoriesComponent;
    let de: DebugElement;
    let glservice: GeneralLedgeservice;
    let lrservice: Lrservice;
    let spy: jasmine.Spy;

    beforeEach(async(() => {
      TESTBed.configureTesTingModule({
        declarations: [
          LrComponent,LrMappingsComponent,LrCategoriesComponent,],imports: [
          CommonModule,SharedModule,LrRoutIngModule,AgGridModule.withComponents(
            [
              ButtonComponent,columnHeaderComponent,TypeaheadEditorComponent,ButtonGroupComponent
            ]
          )
        ],providers: [
          Lrservice,{ provide: GeneralLedgeservice,useClass: mockGeneralLedgeservice },Completerservice,]
      }).compileComponents().then(() => {
        // initialization
        fixture = TESTBed.createComponent(LrCategoriesComponent);
        component = fixture.componenTinstance;
        de = fixture.debugElement;

        // service getters
        glservice = de.injector.get(GeneralLedgeservicE);
        lrservice = de.injector.get(LrservicE);
      });
    }));

    // beforeEach(() => {
    //   // initialization
    //   fixture = TESTBed.createComponent(LrCategoriesComponent);
    //   component = fixture.componenTinstance;
    //   de = fixture.debugElement;
    //
    //   // service getters
    //   glservice = de.injector.get(GeneralLedgeservicE);
    //   lrservice = de.injector.get(LrservicE);
    // });

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

我找到了一个解决方案,我将引导您完成它(解决方案是第3点)：

1.我从.compileComponents()移动了初始化内容.然后(()=> {…}); to beforeEach(()=> {…});.
(你可以看到它被评论)

export function main() {
  describe('LrCategoriesComponent',() => {
    let fixture: ComponentFixture<LrCategoriesComponent>;
    let component: LrCategoriesComponent;
    let de: DebugElement;
    let glservice: GeneralLedgeservice;
    let lrservice: Lrservice;
    let spy: jasmine.Spy;

    beforeEach(async(() => {
      TESTBed.configureTesTingModule({
        // Module's stuff here
      }).compileComponents();
    }));

    beforeEach(() => {
      // initialization
      fixture = TESTBed.createComponent(LrCategoriesComponent);
      component = fixture.componenTinstance;
      de = fixture.debugElement;

      // service getters
      glservice = de.injector.get(GeneralLedgeservicE);
      lrservice = de.injector.get(LrservicE);
    });

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

这给了我以下@L_616_1@：

此@L_616_1@是因为在SharedModule中声明的其中一个组件在编译时遇到了问题(实际上,这发生在SharedModule声明[]中的任何组件上).

因此,我开始寻找在导入SharedModule(或其他重型模块)时解决spec文件设置的方法.

2.我发现了一种新方法here：

const oldResetTesTingModule = TESTBed.resetTesTingModule;
    beforeAll(done => (async () => {
      TESTBed.resetTesTingModule();
      TESTBed.configureTesTingModule({
       // Module's stuff here
      });
      await TESTBed.compileComponents();

      // prevent Angular from resetTing tesTing module
      TESTBed.resetTesTingModule = () => TESTBed;
    })().then(donE).catch(done.fail));

    afterAll(() => {
      // reinstate resetTesTingModule method
      TESTBed.resetTesTingModule = oldResetTesTingModule;
      TESTBed.resetTesTingModule();
    });

即使它最终以惊人的速度(5秒对20秒)完成所有工作,但这种方法有一个主要的缺点：每个describe()创建一次依赖关系,而不是每次测试.这意味着您从先前的测试用例继承了状态.我们不希望这样！

3.我回到原点,尝试理解并应用更智能的异步逻辑……：

– 解决方案 –

beforeEach(done => (async () => {
      TESTBed.configureTesTingModule({
        // Module's stuff here,including SharedModule
      });
      await TESTBed.compileComponents();
    })().then(donE).catch(done.fail));

    beforeEach(() => {
      // initialization
      fixture = TESTBed.createComponent(LrCategoriesComponent);
      component = fixture.componenTinstance;
      de = fixture.debugElement;

      // service getters
      glservice = de.injector.get(GeneralLedgeservicE);
      lrservice = de.injector.get(LrservicE);
    });

通过使用async / await来确保在尝试编译Component之前正确配置了Module.

有了这个,我设法编译组件并有一个干净,新鲜的实例来测试每个测试用例场景！