angular度茉莉花testingHTML注入失败

我无法注入我的HTML模板到我的茉莉花testing。 我该如何解决这个错误？

错误：此testing模块使用使用“templateUrl”或“styleUrls”的组件FooDetailComponent，但它们从未编译过。 testing前请打“TestBed.compileComponents”。

我的testing显然调用compileComponents() ，并且还设置了templateUrl ，所以我不清楚如何进行。

foo-detail.component.ts定义：

 @Component({ selector: 'my-selector', templateUrl: './foo-detail.component.html' }) export class FooDetailComponent implements OnInit, OnDestroy { ... } 

FOO-detail.component.spec.ts：

 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 

堆栈：

• angular2.4.4
• 打字稿2.1.5
• 茉莉花芯2.5.2
• 节点：“> = 7.5.0”
• JHipster 4.5.2

Answer 1

我可能是错的，但我认为你做了不必要的工作。 如果我正确地阅读你的testingconfiguration，你声明你想testing的组件，但是你用自己的模板和样式表覆盖它。

这个链接有一个很好的例子，解释你为什么要重写模板或样式。 如果您使用的是.overrideComponent并且只是将样式和模板设置为已经设置为在其@Component装饰器中使用的文件，则对.overrideComponent的整个调用是不必要的。

为了解决夹具抱怨你的组件没有编译的问题，我看到你错过了一个.compileComponents()调用.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()中的第二个内容，因为这是不必要的。

Answer 2

解决这个感谢@DBosley和@AluanHaddad。 以下是我所做的：

1. 重构我的代码以使用@DBosleybuild议的then模式。

2. 在overrideComponent重新启用templateUrl 。

3. 更新我的karma.conf.js根据Github上发现的修改 ，这产生更多的描述性堆栈跟踪：

    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 

4. 通过在我的TestBed.configureTestingModule的providers部分添加mock修复缺less的N个依赖关系：

    (first time) Failed: Uncaught (in promise): Error: No provider for JhiAlertErrorComponent! (Nth time) Failed: Uncaught (in promise): Error: No provider for BarService!