我无法将我的HTML模板注入我的Jasmine测试中。如何解决此错误？
错误：此测试模块使用组件FooDetailComponent，该组件正在使用＆＃34; templateUrl＆＃34;或＆＃34; styleUrls＆＃34;，但它们从未被编译过。请致电＆＃34; TestBed.compileComponents＆＃34;在你的考试之前。
我的测试明确调用了compileComponents()，并设置了templateUrl，因此我不清楚如何继续。
foo-detail.component.ts定义：@Component({
selector: 'my-selector',
templateUrl: './foo-detail.component.html'
})
export class FooDetailComponent implements OnInit, OnDestroy { ... }
describe('Component Tests', () => {
describe('Foo Management Detail Component', () => {
let comp: FooDetailComponent;
let fixture: ComponentFixture<FooDetailComponent>;
let service: FooService;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [FooDetailComponent],
providers: [
MockBackend,
BaseRequestOptions,
{
provide: Router,
useClass: class { navigate = jasmine.createSpy("navigate"); }
},
FooService
]
}).overrideComponent(FooDetailComponent, {
set: {
// This line, when uncommmented, allows the test to run, but
// doesn't recognize a template:
// template: ''
// This line, when uncommented, induces the error:
templateUrl : '../../../../../../main/webapp/app/entities/foo/foo-detail.component.html',
styleUrls: ['../../../../../../main/webapp/app/entities/foo/foo-create.scss']
}
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FooDetailComponent);
comp = fixture.componentInstance;
service = fixture.debugElement.injector.get(FooService);
});
describe('OnInit', () => {
it('Should call load all on init', () => {
// GIVEN
spyOn(service, 'find');
// WHEN
comp.ngOnInit();
// THEN
service.find("testidentifier");
expect(service.find).toHaveBeenCalledWith("testidentifier");
});
});
});
});
Failed: Uncaught (in promise): Failed to load %3Cdiv%20id=%22%7B%7Bid%7D%7D <entire htmlenoded template>
resolvePromise@spec/entry.ts:110657:78
resolvePromise@spec/entry.ts:110627:31
spec/entry.ts:110704:31
invokeTask@spec/entry.ts:110310:36
onInvokeTask@spec/entry.ts:109806:49
invokeTask@spec/entry.ts:110309:48
runTask@spec/entry.ts:110077:57
drainMicroTaskQueue@spec/entry.ts:110470:42
run@spec/entry.ts:133028:29
spec/entry.ts:133041:31
flush@spec/entry.ts:59106:11
Error: This test module uses the component FooCreateComponent which is using a "templateUrl" or "styleUrls", but they were never compiled. Please call "TestBed.compileComponents" before your test. in spec/entry.ts (line 10169)
_initIfNeeded@spec/entry.ts:10169:91
createComponent@spec/entry.ts:10247:31
createComponent@spec/entry.ts:10076:48
spec/entry.ts:85022:56
invoke@spec/entry.ts:110277:31
onInvoke@spec/entry.ts:109782:45
invoke@spec/entry.ts:110276:40
run@spec/entry.ts:110027:49
spec/entry.ts:109481:37
spec/entry.ts:9456:34
spec/entry.ts:9503:33
invoke@spec/entry.ts:110277:31
onInvoke@spec/entry.ts:109020:45
onInvoke@spec/entry.ts:109779:47
invoke@spec/entry.ts:110276:40
run@spec/entry.ts:110027:49
spec/entry.ts:9498:32
onHandleError@spec/entry.ts:109030:31
onHandleError@spec/entry.ts:109787:52
handleError@spec/entry.ts:110281:50
runGuarded@spec/entry.ts:110043:55
_loop_1@spec/entry.ts:110539:57
microtaskDrainDone@spec/entry.ts:110548:24
drainMicroTaskQueue@spec/entry.ts:110478:36
run@spec/entry.ts:133028:29
spec/entry.ts:133041:31
flush@spec/entry.ts:59106:11
Error: <spyOn> : could not find an object to spy upon for create()
Usage: spyOn(<object>, <methodName>) in /myHomeDir/portal-frontend/node_modules/jasmine-core/lib/jasmine-core/jasmine.js (line 2067)
spec/entry.ts:85032:22
invoke@spec/entry.ts:110277:31
onInvoke@spec/entry.ts:109782:45
invoke@spec/entry.ts:110276:40
run@spec/entry.ts:110027:49
spec/entry.ts:109481:37
spec/entry.ts:9456:34
spec/entry.ts:9503:33
invoke@spec/entry.ts:110277:31
onInvoke@spec/entry.ts:109020:45
onInvoke@spec/entry.ts:109779:47
invoke@spec/entry.ts:110276:40
run@spec/entry.ts:110027:49
spec/entry.ts:9498:32
onHandleError@spec/entry.ts:109030:31
onHandleError@spec/entry.ts:109787:52
handleError@spec/entry.ts:110281:50
runGuarded@spec/entry.ts:110043:55
_loop_1@spec/entry.ts:110539:57
microtaskDrainDone@spec/entry.ts:110548:24
drainMicroTaskQueue@spec/entry.ts:110478:36
run@spec/entry.ts:133028:29
spec/entry.ts:133041:31
flush@spec/entry.ts:59106:11
答案 0 :(得分：1)
感谢@DBosley和@AluanHaddad解决了这个问题。这就是我的所作所为：
重构我的代码以使用@DBosley建议的then模式。
在templateUrl内重新启用overrideComponent。
每this modification found on Github更新一次karma.conf.js，这会产生更多描述性的堆栈跟踪：
Failed: Uncaught (in promise): Error: Template parse errors:
'jhi-alert-error' is not a known element:
1. If 'jhi-alert-error' is an Angular component, then verify that it is
part of this module.
2. If 'jhi-alert-error' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA"
to the '@NgModule.schemas' of this component to suppress this message.
("</div>
<hr>
[ERROR ->]<jhi-alert-error></jhi-alert-error>
<dl class="row">
</dl>
"): FooComponent@4:4
Can't bind to 'routerLink' since it isn't a known property of 'button'. ("
<button type="button"
[ERROR ->][routerLink]="['/', { outlets: { ..."
"): FooComponent
通过在providers的{{1}}部分添加模拟来修复缺少的 N 依赖项：
TestBed.configureTestingModule答案 1 :(得分：0)
我可能错了，但我认为你正在做不必要的工作。如果我正确地阅读了您的测试配置，您就会声明要测试的组件，但是您将使用自己的模板和样式表覆盖它。
这个link有一个很好的例子，解释了为什么要覆盖模板或样式。如果您正在使用.overrideComponent，并且只是将样式和模板设置为已经设置为在其@Component装饰器中使用的文件，完全致电.overrideComponent是不必要的。
为了解决夹具抱怨您的组件未编译的问题，我发现您在.then()
.compileComponents()来电
基于该文档，我想你可能想要这样的东西：
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [FooDetailComponent],
providers: [
MockBackend,
BaseRequestOptions,
{
provide: Router,
useClass: class { navigate = jasmine.createSpy("navigate"); }
},
FooService
]
}).compileComponents().then(()=>{
fixture = TestBed.createComponent(FooDetailComponent);
comp = fixture.componentInstance;
service = fixture.debugElement.injector.get(FooService);
});
}));
如果您确实需要覆盖，只需复制/粘贴上述.then()来电的内容，然后删除您的第二个beforeEach()，因为这是不必要的。