Unit testing 使用templateUrl时出现Angular2测试错误

我正在根据文档为Angular2应用程序编写一些测试，但我遇到了一个似乎无法解决的问题。尝试启动等级库运行程序时，出现以下错误：

Failed: This test module uses the component CategoriesComponent which is using a "templateUrl", but they were never compiled. Please call "TestBed.compileComponents" before your test.

我理解这种情况，因为我在组件中使用单独的模板文件作为模板，但我尝试了似乎不起作用的multilpe解决方案

下面是我正在测试的组件：

import { Component } from "@angular/core";

@Component({
    selector: 'categories-component',
    templateUrl: '/app/views/catalog/categories/categories-dashboard.html',
    moduleId: module.id
})

export class CategoriesComponent {
    title: 'Categories;
}

categories-dashboard.html文件：

<h1>{{ title }}</h1>

{{title}

以及我的组件测试模块：

import {TestBed, ComponentFixture, ComponentFixtureAutoDetect, async} from "@angular/core/testing";
import { By} from "@angular/platform-browser";
import { CategoriesComponent } from "../../../../components/catalog/categories/CategoriesComponent";
import { DebugElement } from "@angular/core";

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

describe('BannerComponent', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ CategoriesComponent ],
            providers: [
                { provide: ComponentFixtureAutoDetect, useValue: true }
            ]
        });

        TestBed.compileComponents();

        fixture = TestBed.createComponent(CategoriesComponent);

        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;

    }));

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

import{TestBed，ComponentFixture，ComponentFixtureAutoDetect，async}来自“@angular/core/testing”；
从“@angular/platform browser”导入{By}”；
从“../../../../components/catalog/categories/CategoriesComponent”导入{CategoriesComponent}”；
从“@angular/core”导入{DebugElement}；
let comp:CategoriesComponent；
let夹具：组件夹具；
设de:DebugElement；
让el:HTMLElement；
描述（'BannerComponent'，（）=>{
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[类别组件]，
供应商：[
{提供：ComponentFixtureAutoDetect，useValue:true}
]
});
TestBed.compileComponents（）；
fixture=TestBed.createComponent（CategoriesComponent）；
comp=fixture.componentInstance；//BannerComponent测试实例
//按CSS元素选择器查询标题
de=fixture.debugElement.query（By.css（'h1'）；
el=自然元素；
}));
它（'应显示原始标题'，（）=>{
expect（el.textContent）.toContain（comp.title）；
});
});

我曾尝试将TestBed.compileComponents（）实现到该组件中，但无论我放在哪里，它似乎都不起作用

有人能看到为什么会发生这个错误，或者告诉我解决方案的方向吗

---

谢谢

compileComponents

异步解析（因为它为模板生成XHR），所以它返回一个承诺。您应该在

然后
承诺回调中处理任何需要承诺解决的问题

TestBed.compileComponents().then(() =>{
    fixture = TestBed.createComponent(CategoriesComponent);

    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;
});

TestBed.compileComponents（）。然后（（）=>{
fixture=TestBed.createComponent（CategoriesComponent）；
comp=fixture.componentInstance；//BannerComponent测试实例
//按CSS元素选择器查询标题
de=fixture.debugElement.query（By.css（'h1'）；
el=自然元素；
});
太好了。这解决了我的问题，但又提出了一个新的问题！错误：超时-在jasmine.DEFAULT\u Timeout\u INTERVAL指定的超时内未调用异步回调。我会调查的