角度karma测试失败,自定义标记不是已知元素

时间:2017-07-02 04:41:30

标签: angular karma-jasmine

我正在学习角度,我的第一次业力测试会抛出下面的错误。

AppComponent should create component
Error: Template parse errors:
'ereturn-form' is not a known element:
1. If 'ereturn-form' is an Angular component, then verify that it is part of this module.
2. If 'ereturn-form' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ereturn-form></ereturn-form>"): ng:///DynamicTestModule/AppComponent.html@0:0

这是我的模块和组件

app.module.ts

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { ReactiveFormsModule }    from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { EreturnService } from './ereturn.service';

import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';

import { AppComponent }         from './app.component';
import { EreturnFormComponent}  from './ereturn-form.component';

@NgModule({
  imports:      [ BrowserModule, ReactiveFormsModule, HttpModule, JsonpModule,
  InMemoryWebApiModule.forRoot(InMemoryDataService)],
  declarations: [ AppComponent, EreturnFormComponent ],
  bootstrap:    [ AppComponent ],
  providers:    [ EreturnService ]
})

export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<ereturn-form></ereturn-form>',
})
export class AppComponent  { }

ereturn-form.component.ts

import { Component, OnInit, Input, OnChanges } from '@angular/core';

import { Ereturn } from './ereturn';
import { EreturnService } from './ereturn.service';
import { FormBuilder, FormGroup, Validators } from "@angular/forms";

@Component({
  selector: 'ereturn-form',
  templateUrl: './ereturn-form.component.html'
})

export class EreturnFormComponent implements OnInit {
...
}

这是我的规格文件

describe('1st tests', () => {
  it('true is true', () => expect(true).toBe(true));
});

为什么业力抱怨自定义html标签?角度编译并运行得很好。

非常感谢

1 个答案:

答案 0 :(得分:2)

如果您的元素是自定义组件,则应将其作为声明的一部分添加到测试中。

&#13;
&#13;
import { CustomElement } from '...your path here';

describe('AppComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      schemas: [ ],
      declarations: [CustomElement],
      imports: [RouterTestingModule]
    });
    TestBed.compileComponents();
  });
&#13;
&#13;
&#13;

如果要忽略该特定元素,可以通过将CUSTOM_ELEMENTS_SCHEMA添加到架构数组来忽略它:

&#13;
&#13;
beforeEach(() => {
    TestBed.configureTestingModule({
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
      declarations: [],
      imports: []
    });
&#13;
&#13;
&#13;

最后,如果它来自另一个库,你应该将它的模块添加到你的测试中:

&#13;
&#13;
import { CustomeModule } from 'module name here';

describe('AppComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      schemas: [  ],
      declarations: [],
      imports: [CustomeModule]
    });
    TestBed.compileComponents();
  });
&#13;
&#13;
&#13;