我收到了这个错误:
错误:此测试模块使用正在使用“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
}
};
答案 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文件。