错误:请在测试前调用“TestBed.compileComponents”

时间:2016-11-04 22:45:22

标签: angular jasmine webpack karma-jasmine angular2-template

我收到了这个错误:

  

错误:此测试模块使用正在使用“templateUrl”的组件MessagesComponent,但它们从未编译过。请在测试前调用“TestBed.compileComponents”。

当试图运行这个简单的测试Angular 2&茉莉花测试:

  let comp:    MessagesComponent;
let fixture: ComponentFixture<MessagesComponent>;

describe('MessagesComponent', () => {
    beforeEach(() => {


        TestBed.configureTestingModule({
            declarations: [ MessagesComponent ],
            providers:    [ {provide: DataService, useValue: {} } ]

        })
            .compileComponents(); // compile template and css

        fixture = TestBed.createComponent(MessagesComponent);
        comp = fixture.componentInstance;

    });

    it('example', () => {
        expect("true").toEqual("true");
    });
});

我认为这可能是由于我的webpack测试配置的原因:

'use strict';

const path = require('path');
const webpack = require('webpack');

module.exports = {
    devtool: 'inline-source-map',
    module: {
        loaders: [
            { loader: 'raw', test: /\.(css|html)$/ },
            { exclude: /node_modules/, loader: 'ts', test: /\.ts$/ }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.ts'],
        modulesDirectories: ['node_modules'],
        root: path.resolve('.', 'src')
    },
    tslint: {
        emitErrors: true
    }
};

2 个答案:

答案 0 :(得分:21)

当您的模板未内联到组件中时,模板提取是异步的,因此您需要告诉Jasmine。变化

beforeEach(() => {
    TestBed.configureTestingModule({ ... })
        .compileComponents();
    fixture = TestBed.createComponent(MessagesComponent);
    comp = fixture.componentInstance;
});

beforeEach(async(() => {
    TestBed.configureTestingModule({ ... })
        .compileComponents()
        .then(() => {
            fixture = TestBed.createComponent(MessagesComponent);
            comp = fixture.componentInstance;
        });
}));

答案 1 :(得分:1)

由于您已经在使用webpack,理论上您不必根据官方文档here调用compileComponents()函数,因为webpack将模板和css内联为在运行测试之前的自动构建过程的一部分。

您的模板/ css未内联的一个可能原因是IDE(VisualStudio/WebStorm/IntelliJ)自动将您的ts编译为js,并且针对js/ts文件的webpack加载器正试图应用于已编译的js 文件而不是源ts文件。