如何在angular4单元测试中忽略第3方组件的html标签?

我查看了文档,检查了SO,并尝试了不同的解决方案/解决方法,但似乎无法正常工作。我正在使用业力/茉莉花为angular4应用程序编写单元测试。它会测试使用第三方组件ckeditor(https://www.npmjs.com/package/ng2-ckeditor)的组件尽管在运行测试时出现此错误...

失败:未捕获(承诺):错误:模板解析错误:'ckeditor'不是已知元素:1.如果'ckeditor'是Angular组件,则验证它是否属于此模块。2.要允许任何元素,请在此组件的“ @ NgModule.schemas”中添加“ NO_ERRORS_SCHEMA”。(“ [错误->]

“):ng:///DynamicTestModule/CkEditorComponent.html@0:0错误:模板解析错误:'ckeditor'不是已知元素:1.如果'ckeditor'是Angular组件,则验证它是否属于Angular组件2.要允许任何元素,在此组件的'@ NgModule.schemas'中添加'NO_ERRORS_SCHEMA'(“ [ERROR->]”):ng:///DynamicTestModule/CkEditorComponent.html@0:0。 ..

我的单元测试文件如下所示

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { ManageInvanareLoginComponent } from './manage-invanare-login.component';
import {CreateDriftInfoComponent} from "../create-drift-info/create-drift-info.component";
import {CreateLoginTextComponent} from "../create-login-text/create-login-text.component";
import {MdInputContainer, MdInputModule} from "@angular/material";
import {CKEditorModule} from "ng2-ckeditor";
import {CkEditorComponent} from "../ck-editor/ck-editor.component";

describe('ManageInvanareLoginComponent', () => {
  let component: ManageInvanareLoginComponent;
  let fixture: ComponentFixture<ManageInvanareLoginComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        CkEditorComponent,
        CreateDriftInfoComponent,
        CreateLoginTextComponent,
        ManageInvanareLoginComponent,
        MdInputContainer
      ],
      providers:[
        CKEditorModule,
        MdInputModule
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ManageInvanareLoginComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

我的app.module.ts文件看起来像这样...

    ...
           import { NO_ERRORS_SCHEMA } from "@angular/core"; 
        import { CKEditorModule } from 'ng2-ckeditor';


            @NgModule({   declarations: [
                AppComponent,
                WelcomeComponent,
                DriftInfoDisplayComponent,
                LoginInfoComponent,
                SideBarComponent,
                CkEditorComponent,
                ManageInvanareLoginComponent,
                CreateDriftInfoComponent,
                CreateLoginTextComponent   ],   exports:[
                CkEditorComponent   ],   imports: [
                CKEditorModule,
                BrowserModule,
                FormsModule,
                HttpModule,
                AppRoutingModule,
                BrowserAnimationsModule,
                MdGridListModule,
                MdButtonModule,
                MdInputModule   ],   providers: [
                PathsService,
                DriftInfoDisplayComponent,
                DriftInfoService   
                ],   
            schemas:[NO_ERRORS_SCHEMA],   
            bootstrap: [AppComponent] }) 
            export class AppModule { }

我不希望测试ckeditor元素,但我确实想测试包含此债权人元素标记的组件中的其他功能。

有没有一种方法可以告诉测试我忽略该标签?

yurzui

您还应该添加schemas:[NO_ERRORS_SCHEMA]到测试配置中

TestBed.configureTestingModule({
  ...
  schemas:[NO_ERRORS_SCHEMA],
});

也可以看看

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在单元测试Angular中使材料组件与Karma配合使用

如何在Angular 2中对指令进行单元测试?

如何在Angular4中访问组件的nativeElement?

如何在Angular 1.5组件中对具有不同名称的绑定进行单元测试?

在angular2单元测试中按标签名称计算子组件的数量

如何忽略Pycharm 2017.1中的某些单元测试测试?

Angular-组件中订阅功能的单元测试

如何在Angular 4单元测试中模拟@ ngrx / store状态

如何在angular4中处理自动标签

如何对使用router.paramMap的Angular 4组件进行单元测试

如何在Angular单元测试中的子组件上执行方法

如何在Angular单元测试中建立Websocket连接?

如何在Angular 4中使用提供程序模拟组件?- 单元测试

Angular 7 Jasmine单元测试:如何获取组件NativeElement?

如何将值从Angular单元测试传递到动态HTML标签

如何在角度单元测试中模拟组件中的store.pipe

Angular 9单元测试:如何模拟测试组件的导入?

如何在Angular 9组件单元测试中调用伪函数

如何在单元测试中的功能性React组件中访问选择选项

如何在Angular单元测试中模拟/触发$ routeChangeSuccess?

如何在骆驼单元测试中模拟多个组件?

如何在Rails单元测试中测试ap标签中内容的长度

如何在Angular / Karma单元测试中忽略run.js?

在单元测试中模拟Angular 1.5组件

如何在Angular 1.5组件中对功能进行单元测试

如何在 React Router 4 下对组件进行单元测试

如何在 Angular 2 单元测试中测试共享组件的方法?

如何在单元测试时伪造子组件

如何在 Angular 中对 NGXS 进行单元测试?