無法讀取空茉莉花角2

Question

在角2運行茉莉規範時，我得到這個錯誤的特性「噴油」：

無法讀取空茉莉的特性「噴油」角2

堆棧跟蹤：

TypeError: Cannot read property 'injector' of null 
    at TestBed._createCompilerAndModule (http://localhost:3002/node_modules/@angular/core/bundles/core-testing.umd.js:834:48) 
    at TestBed._initIfNeeded (http://localhost:3002/node_modules/@angular/core/bundles/core-testing.umd.js:800:43) 
    at TestBed.createComponent (http://localhost:3002/node_modules/@angular/core/bundles/core-testing.umd.js:884:18) 
    at Function.TestBed.createComponent (http://localhost:3002/node_modules/@angular/core/bundles/core-testing.umd.js:714:33) 
    at Object.eval (http://localhost:3002/js/app/landing-page/subcomponents/middle-row.component.spec.js:29:49) 
    at ZoneDelegate.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:232:26) 
    at ProxyZoneSpec.onInvoke (http://localhost:3002/node_modules/zone.js/dist/proxy.js:79:39) 
    at ZoneDelegate.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:231:32) 
    at Zone.run (http://localhost:3002/node_modules/zone.js/dist/zone.js:114:43) 
    at Object.eval (http://localhost:3002/node_modules/zone.js/dist/jasmine-patch.js:102:34) 

我從the official angular 2 testing docs複製該規範：

let comp: BannerComponent; 
let fixture: ComponentFixture<BannerComponent>; 
let de:  DebugElement; 
let el:  HTMLElement; 

describe('BannerComponent',() => { 
    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ BannerComponent ], // declare the test component 
    }); 

    fixture = TestBed.createComponent(BannerComponent); 

    comp = fixture.componentInstance; // BannerComponent test instance 

    // query for the title <h1> by CSS element selector 
    de = fixture.debugElement.query(By.css('h1')); 
    el = de.nativeElement; 

    }); 
}); 

，並適應它有一點點我的代碼工作：

import 'zone.js/dist/long-stack-trace-zone.js'; 
import 'zone.js/dist/async-test.js'; 
import 'zone.js/dist/fake-async-test.js'; 
import 'zone.js/dist/sync-test.js'; 
import 'zone.js/dist/proxy.js'; 
import 'zone.js/dist/jasmine-patch.js'; 

import { ComponentFixture, TestBed } from '@angular/core/testing'; 
import { By } from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 

import { MiddleRowComponent } from './middle-row.component'; 

let comp: MiddleRowComponent; 
let fixture: ComponentFixture<MiddleRowComponent>; 
let de: DebugElement; 
let el: HTMLElement; 

describe('MiddleRowComponent',() => { 
    beforeEach(() => { 
     TestBed.configureTestingModule({ 
     declarations: [MiddleRowComponent], // declare the test component 
     }); 

     fixture = TestBed.createComponent(MiddleRowComponent); 

     comp = fixture.componentInstance; // MiddleRowComponent test instance 

     // query for the title <h1> by CSS element selector 
     de = fixture.debugElement.query(By.css('h1')); 
     el = de.nativeElement; 
    }); 

    it('should display original title',() => { 
     fixture.detectChanges(); 
     expect(el.textContent).toContain(comp.word); 
    }); 

    it('should display a different test title',() => { 
     comp.word = 'Test Title'; 
     fixture.detectChanges(); 
     expect(el.textContent).toContain('Test Title'); 
    }); 
}); 

爲什麼會出現錯誤？沒有注入關鍵字，但我想TestBed可能會在幕後使用它。

Answer 1

在某個時刻（在執行任何測試之前），您需要通過調用TestBed.initTestEnvironment(...)來初始化測試環境。

您通常會在karma-test-shim文件中看到此操作，如angular quickstart（與測試文檔相同的快速入門）所示。但是如果你不使用這種技術，那麼你需要在測試文件中做到這一點。但initTestEnvironment應該只被調用一次，所以你還需要在每個測試文件中重置它

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

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