角度测试:“非法状态:无法加载指令摘要"；对于空组件 [英] Angular testing: "Illegal state: Could not load the summary for directive" for an empty component

问题描述

我的组件都没有通过单元测试，所以我在项目中创建了一个新组件来尝试诊断.

None of my components were passing unit tests, so I made a new one in the project to try and diagnose.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-thing',
  templateUrl: './thing.component.html',
  styleUrls: ['./thing.component.scss']
})
export class ThingComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

还有一个thing.component.spec.ts文件如下

describe('ThingComponent', () => {
  let component: ThingComponent;
  let fixture: ComponentFixture<ThingComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ThingComponent ]
    })
    .compileComponents();
  }));

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

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

测试失败错误:非法状态:无法加载指令 ThingComponent 的摘要.我已经用 xit 关闭了所有其他测试，所以这是唯一一个正在运行的测试.

The test fails with Error: Illegal state: Could not load the summary for directive ThingComponent. I have turned off all other tests with xit, so this is the only one running.

我已尝试将 app.module.ts 中的所有内容(提供程序、导入等)移动到文件中，这仍然提供相同的结果.

I have tried to move in everything (providers, imports, etc) from my app.module.ts into the file, which still provides the same result.

当我删除 TestBed 配置时，只有一个

When I remove the TestBed configuration, and just have a

const comp = new ThingComponent();
expect(comp).toBeTruthy();

这就过去了.然而，对于实际组件来说，这不是一个长期的解决方案.

this passes. However, that's not a long term solution for actual components.

事物的版本:

"@angular/cli": "^1.7.2",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-jasmine": "^1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
...
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",

任何帮助将不胜感激，谢谢

Any help at all would be appreciated, thanks

更新我什至将测试更改为 expect(true).toBeTruthy() 并且它仍然得到相同的错误.我没有更改 ng g component 提供的代码中的任何其他内容.

Update I even changed the test to expect(true).toBeTruthy() and it still gets the same error. I've changed nothing else in the code that was provided by ng g component.

此外，我在单独的目录中创建了一个新的 angular 项目，并且测试通过了这个新的空白项目.

Additionally, I made a new angular project in a separate directory, and the tests pass on this new blank project.

推荐答案

已修复.我有一个具有 spec.ts 文件的管道，如下所示:

Fixed it. I had a pipe which had a spec.ts file as follows:

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [SafeHtmlPipe],
    providers: [DomSanitizer]
  })
  .compileComponents();
}));

describe('SafeHtmlPipe', () => {
  let pipe;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [DomSanitizer]
    });
  });

  beforeEach(inject([DomSanitizer], p => {
    pipe = p;
  }));

  xit('create an instance', () => {
    expect(pipe).toBeTruthy();
  });
});

注意如何使用 xit 关闭测试.尽管如此，尽管被测组件没有使用这个管道，尽管我在组件中导入/声明了它，但这还是导致了问题.

Note how the test is turned off with xit. Despite this, and despite that the component under test was not using this pipe, and despite that I imported/declared it in the component anyway, this was causing the issue.

我不记得写过这个，所以它可能是自动生成的，因为它正在测试的管道在构造函数中有一个 DomSanitizer.

I don't remember writing this, so maybe it was automatically generated, as the pipe it is testing has a DomSanitizer in the constructor.

删除文件就能解决问题.

Removing the file did the trick.

这篇关于角度测试:“非法状态:无法加载指令摘要"；对于空组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！