Karma + Jasmine：无法读取属性“getComponentFromError”答案

【问题标题】：Karma + Jasmine: Cannot read property 'getComponentFromError'Karma + Jasmine：无法读取属性“getComponentFromError”
【发布时间】：2018-03-02 11:15:01
【问题描述】：

我正在关注本教程：https://angular.io/guide/testing#component-test-scenarios 用于 karma+jasmine 单元测试。这是我的代码：

import { AppComponent } from "./app.component";
import { ComponentFixture, TestBed } from "@angular/core/testing";

describe('AppComponent', () => {

let component: AppComponent;
let fixture:   ComponentFixture<AppComponent>;
let h1:        HTMLElement;

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [ AppComponent ],
  });
  fixture = TestBed.createComponent(AppComponent);
  component = fixture.componentInstance; 
  h1 = fixture.nativeElement.querySelector('h1');
});

it('should display original title', () => {
    expect(h1.textContent).toContain("Ciao");
  });

});

当我运行测试时，出现以下异常：

 TypeError: Cannot read property 'getComponentFromError' of null
    at TestBed._initIfNeeded (D:/Users/apwzp/AppData/Local/Temp/karma-typescript-bundle-11944DDd01l2f5Y0P.js:1020:52)
    at TestBed.createComponent (D:/Users/apwzp/AppData/Local/Temp/karma-typescript-bundle-11944DDd01l2f5Y0P.js:1174:14)
    at Function.TestBed.createComponent (D:/Users/apwzp/AppData/Local/Temp/karma-typescript-bundle-11944DDd01l2f5Y0P.js:876:29)
    at UserContext.<anonymous> (assets/app/app.component.spec.ts:14:20 <- assets/app/app.component.spec.js:13:37)
    at ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:388:26)
    at ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:79:39)
    at ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:387:32)
    at Zone.run (node_modules/zone.js/dist/zone.js:138:43)
    at UserContext.<anonymous> (node_modules/zone.js/dist/jasmine-patch.js:106:34)

有人知道怎么解决吗？

【问题讨论】：

标签： angular unit-testing jasmine karma-runner zone.js

【解决方案1】：

我遇到了类似的事情并在这里找到了答案：Cannot read property 'injector' of null jasmine angular 2。

我刚刚将它添加到我的 beforeEach() 方法中，它为我解决了这个错误（在我完全正常工作之前，我必须克服其他一些问题）。

 TestBed.resetTestEnvironment();
 TestBed.initTestEnvironment(BrowserDynamicTestingModule,
    platformBrowserDynamicTesting());

基本上只是改变这个问题：

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [ AppComponent ],
   });
  fixture = TestBed.createComponent(AppComponent);
  component = fixture.componentInstance; 
  h1 = fixture.nativeElement.querySelector('h1');
});

到

import { BrowserDynamicTestingModule,
platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

beforeEach(() => {
 TestBed.resetTestEnvironment();
 TestBed.initTestEnvironment(BrowserDynamicTestingModule,
    platformBrowserDynamicTesting());

  TestBed.configureTestingModule({
    declarations: [ AppComponent ],
   });
  fixture = TestBed.createComponent(AppComponent);
  component = fixture.componentInstance; 
  h1 = fixture.nativeElement.querySelector('h1');
});

【讨论】：

解决了它...但是为什么...？我已经在另一个文件中调用了TestBed.initTestEnvironment()，并确保在我的spec.ts 文件之前加载了该文件。为什么将初始化代码移动到.spec.ts 文件会修复此错误？
这里的关键是initTestEnvironment，每个角度文档都需要初始化编译器、平台引用和角度模块以进行测试。不确定是否必须移动文件。我发现这对我有用，只要它在每个文件中 beforeEach 或 beforeAll。
我已经有了initTestEnvironment，但它在不同的文件中。我什至确保该文件是在我的规范之前加载的。除了这个答案，没有任何效果。
我不完全确定我在回答你的问题，但是； initTestEnvironment 需要在每个 .spec 文件中的 beforeEach 或 beforeAll 中运行，以便准备 Angular 环境。您不能在规范加载之前只运行一次。
那么为什么我不能在我的规范加载之前运行一次呢？只有在beforeAll 内运行时它才起作用？这是我不明白的部分。

【解决方案2】：

如果您要升级到 jest-preset-angular 版本 >= 9，将 import 'jest-preset-angular'; 替换为 import 'jest-preset-angular/setup-jest'; 似乎可以解决问题，而无需在每个测试中添加 beforeAll。

见https://github.com/thymikee/jest-preset-angular/blob/a4251dd9776fe4d99af828b43acc3ea3a1bb5f90/CHANGELOG.md#breaking-changes

【讨论】：

【解决方案3】：

只需将其添加到根文件夹中的setupJest.ts：

import {TestBed} from '@angular/core/testing';
import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';

TestBed.resetTestEnvironment();
TestBed.initTestEnvironment(BrowserDynamicTestingModule,
  platformBrowserDynamicTesting());

然后将这个添加到 jest 配置中：

"setupFilesAfterEnv": [
  "<rootDir>/setupJest.ts"
],

【讨论】：