Jasmine测试中的模板解析错误，但不是实际的应用程序 [英] Template parse error in Jasmine test but not actual app
本文介绍了Jasmine测试中的模板解析错误，但不是实际的应用程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我开发了一个Jasmine规范来测试角度2分量 MiddleRowComponent 。当我运行jasmine测试时，它会出现此错误：
I've developed a Jasmine spec to test an angular 2 component MiddleRowComponent. When I run the jasmine test, it gives this error:
zone.js:388 Unhandled Promise rejection: Template parse errors:
'circles' is not a known element:
1. If 'circles' is an Angular component, then verify that it is part of this module.
2. If 'circles' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("</div>
<div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div">
[ERROR ->]<circles (onWordChanged)="onWordChanged($event)"></circles>
</div>
<div class="col-md-10 "): MiddleRowComponent@9:9
'custom-button' is not a known element:
但是如果我只是像浏览器一样在浏览器中运行我的网络应用程序，则不会发生错误。 circles 确实是模块的一部分。自定义按钮是导入的共享模块的一部分。这是module.ts：
However if i just run my web app in the browser like normal, the error does not occur. circles is indeed a part of the module. And custom-button is part of a shared module that is imported. Here is the module.ts:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import * as LandingPage from './index';
@NgModule({
imports: [ CommonModule, SharedModule ],
declarations: [
LandingPage.MiddleRowComponent,
LandingPage.LandingPageComponent,
LandingPage.CirclesComponent
],
exports: [ LandingPage.LandingPageComponent ],
})
export class LandingPageModule { }
一切都是导入并声明应该是，并且在运行应用程序时无需测试。我使用 done 来使beforeEach工作，因为它是从单独的模板文件中获取组件模板的异步性质。我用jasmine spec runner html文件测试了。为什么 MiddleRowComponent 使用的组件不是茉莉花测试中的已知元素，而是在正常运行应用程序时？
Everything is imported and declared as it should be and works when running the app without testing it. I use a done to make the beforeEach work given it's async nature of getting the component template from a seperate template file. I ru the test with a jasmine spec runner html file. How come my components that MiddleRowComponent uses are not known elements in the jasmine test but are when running the app normally?
这是茉莉花规格：
import 'zone.js/dist/long-stack-trace-zone.js';
import 'zone.js/dist/async-test.js';
import 'zone.js/dist/fake-async-test.js';
import 'zone.js/dist/sync-test.js';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/jasmine-patch.js';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { MiddleRowComponent } from './middle-row.component';
let comp: MiddleRowComponent;
let fixture: ComponentFixture<MiddleRowComponent>;
let de: DebugElement;
let el: HTMLElement;
describe('MiddleRowComponent', () => {
var fixture: any;
var comp: any;
beforeAll(() => {
TestBed.resetTestEnvironment();
TestBed.initTestEnvironment(BrowserDynamicTestingModule,
platformBrowserDynamicTesting());
});
beforeEach((done) => {
TestBed.configureTestingModule({
declarations: [MiddleRowComponent], // declare the test component
}).compileComponents().then(() => {
fixture = TestBed.createComponent(MiddleRowComponent);
comp = fixture.componentInstance; // MiddleRowComponent test instance
// query for the title <h1> by CSS element selector
de = fixture.debugElement.query(By.css('h1'));
el = de.nativeElement;
done();
});
});
it('should display original title', () => {
fixture.detectChanges();
expect(el.textContent).toContain(comp.word);
});
it('should display a different test title', () => {
comp.word = 'Test Title';
fixture.detectChanges();
expect(el.textContent).toContain('Test Title');
});
});
完整错误：
zone.js:388 Unhandled Promise rejection: Template parse errors:
'circles' is not a known element:
1. If 'circles' is an Angular component, then verify that it is part of this module.
2. If 'circles' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("</div>
<div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div">
[ERROR ->]<circles (onWordChanged)="onWordChanged($event)"></circles>
</div>
<div class="col-md-10 "): MiddleRowComponent@9:9
'custom-button' is not a known element:
1. If 'custom-button' is an Angular component, then verify that it is part of this module.
2. If 'custom-button' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
</div>
<div class="col-md-10 offset-md-1 flex-xs-middle" id="try-now-div">
[ERROR ->]<custom-button buttonName="try now" (click)="tryNowClick()"></custom-button>
</div>
</div>
"): MiddleRowComponent@12:9 ; Zone: ProxyZone ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
'circles' is not a known element:
1. If 'circles' is an Angular component, then verify that it is part of this module.
2. If 'circles' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("</div>
<div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div">
[ERROR ->]<circles (onWordChanged)="onWordChanged($event)"></circles>
</div>
<div class="col-md-10 "): MiddleRowComponent@9:9
'custom-button' is not a known element:
1. If 'custom-button' is an Angular component, then verify that it is part of this module.
2. If 'custom-button' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
</div>
<div class="col-md-10 offset-md-1 flex-xs-middle" id="try-now-div">
[ERROR ->]<custom-button buttonName="try now" (click)="tryNowClick()"></custom-button>
</div>
</div>
"): MiddleRowComponent@12:9
at TemplateParser.parse (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:7730:21)
at RuntimeCompiler._compileTemplate (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17573:53)
at eval (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17493:64)
at Set.forEach (native)
at RuntimeCompiler._compileComponents (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17493:21)
at createResult (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17404:21)
at ZoneDelegate.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:232:26)
at ProxyZoneSpec.onInvoke (http://localhost:3002/node_modules/zone.js/dist/proxy.js:79:39)
at ZoneDelegate.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:231:32)
at Zone.run (http://localhost:3002/node_modules/zone.js/dist/zone.js:114:43)consoleError @ zone.js:388_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339
zone.js:390 Error: Uncaught (in promise): Error: Template parse errors:(…)
推荐答案
嗯，测试模块只声明了MiddleRowComponent。所以它不知道CircleComponent：
Well, the module of your test only has MiddleRowComponent declared. So it doesn't know about CircleComponent:
TestBed.configureTestingModule({
declarations: [MiddleRowComponent], // declare the test component
})
在测试声明中添加所有必要的组件模块，或者将 LandingPageModule 添加到测试模块的导入中。
Add all the necessary components in the declarations of the testing module, or add LandingPageModule to the imports of the testing module.
这篇关于Jasmine测试中的模板解析错误，但不是实际的应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
