如何解决 Angular 单元测试错误：“AfterAll 中抛出了错误 [对象 ErrorEvent] 抛出”

Question

当我在我的角度项目中运行

ng test

命令时出现错误，它会给出这样的错误

10% building modules 1/1 modules 0 active04 12 2018 11:29:43.408:WARN [karma]: No captured browser, open http://localhost:9876/
04 12 2018 11:29:43.414:INFO [karma]: Karma v2.0.0 server started at http://0.0.0.0:9876/
04 12 2018 11:29:43.414:INFO [launcher]: Launching browser Chrome with unlimited concurrency
04 12 2018 11:29:43.418:INFO [launcher]: Starting browser Chrome
04 12 2018 11:29:53.540:WARN [karma]: No captured browser, open http://localhost:9876/    
04 12 2018 11:29:53.777:INFO [Chrome 70.0.3538 (Mac OS X 10.14.1)]: Connected on socket SKF3rI13kIK0WCqqAAAA with id 32081204
Chrome 70.0.3538 (Mac OS X 10.14.1): Executed 95 of 191 SUCCESS (0 secs / 0.131 secs)
Chrome 70.0.3538 (Mac OS X 10.14.1) ERROR
  {
    "message": "An error was thrown in afterAll\n[object ErrorEvent] thrown",
    "str": "An error was thrown in afterAll\n[object ErrorEvent] thrown"
  }
Chrome 70.0.3538 (Mac OS X 10.14.1): Executed 96 of 191 ERROR (0 secs / 0.826 secs)
Chrome 70.0.3538 (Mac OS X 10.14.1) ERROR
  {
    "message": "An error was thrown in afterAll\n[object ErrorEvent] thrown",
    "str": "An error was thrown in afterAll\n[object ErrorEvent] thrown"
Chrome 70.0.3538 (Mac OS X 10.14.1): Executed 96 of 191 ERROR (1.386 secs / 0.826 secs)

这就是业果，每一个考验都通过了。

我的package.json内容

"devDependencies": {
    "@angular/cli": "~1.7.0",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  },

谢谢你。

Answer 1

我找到了解决方案，就我而言，

  afterAll(() => {
    TestBed.resetTestingModule();
  });

所有错误消失的方法，下面有示例代码

describe('Component', () => {

  let component: Component;

  beforeEach((() => {

    TestBed.configureTestingModule({
      declarations: [Component]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    const fixture = TestBed.createComponent(Component);
    component = fixture.componentInstance;
  });

  it('should have a defined component', () => {
    expect(component).toBeDefined();
  });

  afterAll(() => {
    TestBed.resetTestingModule();
  });

});

Answer 2

afterEach(() => {
    TestBed.resetTestingModule();
});

这为我清除了错误。

Answer 3

静态模板字符串！

对我来说是个问题。我之前的代码：

export class MyClass {
  static NAME = "Cool-Name";
  static DESC = `This is ${MyClass.NAME}!`;
}

固定代码：

export class MyClass {
  static NAME = "Cool-Name";
  static get DESC() { return `This is ${MyClass.NAME}!`; }
}

说明： 此问题是由于 JavaScript 中静态字段的初始化方式造成的。当定义DESC时，NAME可能尚未初始化，从而导致错误。然而，有趣的是，在测试之外我从未发生过这个错误。