Question

我查看了文档，检查了SO，并尝试了不同的解决方案/解决方案，我似乎无法让这个工作。我正在为带有karma / jasmine的angular4应用程序编写单元测试。它测试使用第三方组件ckeditor（https://www.npmjs.com/package/ng2-ckeditor）的组件。虽然当我运行测试时我得到了这个错误......

失败：未捕获（承诺）：错误：模板解析错误：   ＆＃39; CKEditor的＆＃39;不是一个已知的元素：   1.如果＆＃39; ckeditor＆＃39;是一个Angular组件，然后验证它是否是此模块的一部分。   2.允许任何元素添加＆＃39; NO_ERRORS_SCHEMA＆＃39;到了＆＃39; @ NgModule.schemas＆＃39;这个组件。（＆＃34; [错误 - ＆gt;]


＆＃34;）：ng：///DynamicTestModule/CkEditorComponent.html@0：0错误：模板解析错误：＆＃39; ckeditor＆＃39;不是一个已知的元素：     1.如果＆＃39; ckeditor＆＃39;是一个Angular组件，然后验证它是否是此模块的一部分。     2.允许任何元素添加＆＃39; NO_ERRORS_SCHEMA＆＃39;到了＆＃39; @ NgModule.schemas＆＃39;这个组件。（＆＃34; [ERROR - ＆gt;]＆＃34;）：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元素，但我确实想测试包含此creditor元素标记的组件中的其他函数。

有没有办法告诉测试只是忽略这个标签？

Answer 1

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

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

另见

https://blog.nrwl.io/essential-angular-testing-192315f8be9b

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

1 个答案: