Angular + (Jasmine/Karma) - Error: Illegal state: Could not load the summary for directive

Question

我真的在努力解决这个错误，但互联网上目前没有任何帮助...

lr-categories.component.spec.ts:

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();
    }));
  });
}

错误：

ERROR: 'Unhandled Promise rejection:', 'Illegal state: Could not load the summary for directive LrCategoriesComponent.'

采纳任何建议！我现在很绝望！

Answer 1

我找到了一个解决方案，我将向您介绍它 （解决方案是第 3 点）:

1.我将初始化 的东西从 .compileComponents().then(() => {...}); 移到了 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();
    }));
  });
}

这给了我以下错误：

Error: This test module uses the component ToolBarComponent which is using a "templateUrl" or "styleUrls", but they were never compiled.

此错误是因为 SharedModule 中声明的组件之一在编译时出现问题（实际上，SharedModule 的 declarations[] 中的任何组件都会出现这种情况）。

所以，我开始寻找在导入 SharedModule（或其他重模块）时解决规范文件设置的方法。

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 秒 vs 之前的 20 秒），这种方法有一个主要缺点：每个describe()而不是每个测试创建一次依赖关系。这意味着 您从之前的测试用例 继承了状态。我们不希望那样！

3. 我回到第一个问题，试图理解和应用更智能的异步逻辑...:[=63=]

- 解决方案 -

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 我确保在尝试编译 [=45] 之前正确配置了模块 =]组件.

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

Answer 2

有同样的问题，我所要做的就是 return beforeEach 的承诺如下

beforeEach(() => {  

  return TestBed.configureTestingModule({
        .... setup code
     }).compileComponents().then(() => {
        ...initialization....
    });
  });

});

Angular + (Jasmine/Karma) - Error: Illegal state: Could not load the summary for directive

Angular + (Jasmine/Karma) - Error: Illegal state: Could not load the summary for directive

jasmine

karma-runner

angular