Question

我尝试在使用了一些基本组件的组件上编写我的第一个单元测试。

当我运行“ ng test”时，出现此错误：

Chrome 63.0.3239 (Linux 0.0.0) HeaderComponent should create FAILED
    1. If 'p-dropdown' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
    2. If 'p-dropdown' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("header-text">
            <p-dropdown [options]="languages" (onChange)="onDropdownChange($event.value)" [ERROR ->][(ngModel)]="selectedLanguage"></p-dropdown>
        </div>

不确定我需要做什么？我需要注入或嘲笑任何东西吗？

这是我的单元测试（基本上是生成的测试）：

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [],
      declarations: [HeaderComponent]

    })
      .compileComponents();
  }));

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

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

Thx

Answer 1

在模式中添加NO_ERRORS_SCHEMA，这是在单元测试时忽略子组件的一种方式。

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [DropdownModule],
    declarations: [ HeaderComponent ],
    schemas: [NO_ERRORS_SCHEMA]   // <-- Add This Line. (make sure to import NO_ERRORS_SCHEMA)
  })
  .compileComponents();
}));

Answer 2

当然，您可以在模式错误时翻转一个标志，以使组件依赖性无关紧要。或者，您可以使用 ngMocks 对其进行模拟，并能够对其输入进行断言或在输出上进行断言以产生副作用。

可以通过npm添加

ngMocks：npm i ng-mocks

例如，模拟p-slider组件看起来像这样：

import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {MockComponent} from 'ng-mocks'; //step 1: add mock util function
import {Slider, SliderModule} from 'primeng/slider'; // setp 2: Mocked component and it's module

import {DateRangePickerComponent} from './date-range-picker.component';

describe('DateRangePickerComponent', () => {
    let component: DateRangePickerComponent;
    let fixture: ComponentFixture<DateRangePickerComponent>;

    beforeEach(
        async(() => {
            TestBed.configureTestingModule({
                imports: [SliderModule], // add mocked comp's module
                declarations: [
                DateRangePickerComponent, 
                MockComponent(Slider) //actual mocking 
                ]  
            }).compileComponents();
        })
    );

    beforeEach(() => {
        fixture = TestBed.createComponent(DateRangePickerComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

Answer 3

尝试将模块导入测试平台：

import { DropdownModule } from 'primeng/primeng';
describe('HeaderComponent', () => {
  let component: HeaderComponent;
  let fixture: ComponentFixture<HeaderComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [DropdownModule],
      declarations: [HeaderComponent]

    })
      .compileComponents();
  }));

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

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

Primeng的单元测试

3 个答案: