如何使用外部模块设置 Angular 测试

Question

我想将来自外部的模块包含到我的 Angular 6（带有 cli）测试环境中，但出现错误：

TypeError: Cannot read property 'injector' of null
at TestBed.push.../node_modules/@angular/core/fesm5/testing.js.TestBed._createCompilerAndModule (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/testing.js:1030:1)
at TestBed.push.../node_modules/@angular/core/fesm5/testing.js.TestBed.compileComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/testing.js:945:1)
at Function.push.../node_modules/@angular/core/fesm5/testing.js.TestBed.compileComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/testing.js:805:46)
at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/tested/components/tested.component.spec.ts:11:8)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:388:1)
at AsyncTestZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.AsyncTestZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:713:1)
at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:285:1)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:387:1)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runGuarded (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:151:1)
at runInTestZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:841:1)

和

TypeError: Cannot read property 'getComponentFromError' of null
at TestBed.push.../node_modules/@angular/core/fesm5/testing.js.TestBed._initIfNeeded (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/testing.js:962:1)
at TestBed.push.../node_modules/@angular/core/fesm5/testing.js.TestBed.createComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/testing.js:1155:1)
at Function.push.../node_modules/@angular/core/fesm5/testing.js.TestBed.createComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/testing.js:849:1)
at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/tested/components/tested.component.spec.ts:15:29)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:388:1)
at AsyncTestZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.AsyncTestZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:713:1)
at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:285:1)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:387:1)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runGuarded (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:151:1)
at runInTestZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:841:1)

我包含外部模块的设置如下所示：

test.ts

// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
const contextExternal = require.context('./../../src/', true, /\.spec\.ts$/); // new

// And load the modules.
context.keys().map(context);
contextExternal.keys().map(contextExternal); // new

tsconfig.spec.json

"include": [
    "../../src/**/*.spec.ts", // new
    "**/*.spec.ts",
    "**/*.d.ts"
  ]

它引入外部模块和组件并运行测试，但在外部测试失败。

我也尝试过这样的事情，但没有运气：

test.ts

// First, initialize the Angular testing environment.
getTestBed().resetTestEnvironment(); // new
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);

环境

├── @angular-devkit/build-angular@0.6.8
├── @angular/animations@6.0.9
├── @angular/cli@6.0.8
├── @angular/common@6.0.9
├── @angular/compiler@6.0.9
├── @angular/compiler-cli@6.0.9
├── @angular/core@6.0.9
├── @angular/forms@6.0.9
├── @angular/http@6.0.9
├── @angular/language-service@6.0.9
├── @angular/platform-browser@6.0.9
├── @angular/platform-browser-dynamic@6.0.9

Answer 1

解决方法是在外层模块的每次测试中重置TestEnvironment

describe('TestedComponent', () => {

  beforeEach(async(() => {

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

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

  }));

  it('should create TestedComponent', async(() => {
    const fixture = TestBed.createComponent(TestedComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

});