使用茉莉花和业力进行单元测试时会发生CUSTOM_ELEMENTS_SCHEMA错误

Question

我正在用茉莉花和业力做单元测试。我能够在简单的应用程序中运行测试，但是当我测试包含其他组件的页面时，它会显示如下错误

如果“自定义组件”是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中，以抑制此消息。

custom-component.html

<div class="data-container">
    <ion-row>
        <!-- Display week Day and Dates -->
        <ion-col class="no-padding" *ngFor="let days of weekDates">
            <div class="header-circle">
                <!-- Header-Circle for Day -->
                <p class="uppercase thick day-color">{{ days.day }}</p>
            </div>
            <div id="{{days.day_date}}" (click)="toggle(days)" class="{{days.iconClass}}">
                <!-- Circle for Date -->
                <p class="uppercase thick day-color">{{ days.date }}</p>
            </div>
        </ion-col>
        <!-- End of loop -->
    </ion-row>
</div>

custom-component.ts

import { Component, Input, Output, EventEmitter, ApplicationRef } from '@angular/core';

@Component({
    selector: 'custom-component',
    templateUrl: 'custom-component.html'
})
export class custom-component {//Some Code Here }

Checkin.html

<ion-header>
    <ion-navbar>
        <ion-title>{{ spaceName }}</ion-title>
        <!-- added spaceName as title  -->
    </ion-navbar>
</ion-header>
<ion-content class="checkin-content" no-bounce>
    <custom-component [inputDate]="selectedDate" (dateChanged)="dateChanged($event)"></custom-component>
</ion-content>

Checkin.ts

import { Component } from '@angular/core';
import { IonicPage, ModalController, NavParams, NavController, Events } from 'ionic-angular';
import { custom-component } from '../../components/custom-component/custom-component';

export class CheckinPage {

    public isNumberEven(num: number): boolean {
        return num % 2 === 0;
    }

    public isNumberOdd(num: number): boolean {
        return !this.isNumberEven(num);
    }
}

Checkin.spec.ts

import { TestBed, ComponentFixture, async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { MyApp } from '../../app/app.component';
import { CheckinPage } from './checkin';
import { NavController } from 'ionic-angular';
import { custom-component } from '../../components/custom-component/custom-component';

let comp: CheckinPage;
let fixture: ComponentFixture<CheckinPage>;
let de: DebugElement;
let el: HTMLElement;
let datepipe: DatePipe;

describe('Checkin Component', () => {

    beforeEach(async(() => {

        TestBed.configureTestingModule({

            declarations: [MyApp, CheckinPage, RoatedDateComponent],

            providers: [
                NavController
            ],

            imports: [
                IonicModule.forRoot(MyApp)
            ]

        }).compileComponents();

    }));

    beforeEach(() => {

        fixture = TestBed.createComponent(CheckinPage);
        comp = fixture.componentInstance;

    });

    afterEach(() => {
        fixture.destroy();
        comp = null;
        de = null;
        el = null;
    });

    it("should correctly classify numbers as odd", () => {
        expect(comp.isNumberOdd(1)).toBe(true);
        expect(comp.isNumberOdd(2)).toBe(false);
    });
});

checkin.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CheckinPage } from './checkin';

@NgModule({
    declarations: [
        CheckinPage,
    ],
    imports: [
        IonicPageModule.forChild(CheckinPage),
    ],
})
export class CheckinPageModule { }

有人能帮我这个忙吗？

Answer 1

配置TestBed时，这相当于创建一个新模块。模块不能使用尚未添加的组件。这是您正在遇到的场景。Checkin组件找不到对custom-component的引用，因为它没有在TestBed配置中声明。对于简单的组件，您总是可以在测试夹具中声明组件，并且一切都应该正常工作。

recommends建议创建存根组件以更好地测试父组件和子组件之间的交互。

若要创建存根，请创建一个新组件，该组件具有与您要保存的组件以及相同的选择器相同的@Input和@Output字段。run使用选择器来识别视图中的组件，因此只要选择器相同，应用程序就能够运行。

@Component({
    selector: 'custom-component',
    template: ' '
})
export class CustomComponentStub {//Some Code Here }

然后提供给实验台：

declarations: [MyApp, CheckinPage, RoatedDateComponent, CustomComponentStub],

只有当子组件是纯视图且没有逻辑时，我才会跳过创建存根。如果这是您的场景，您可以跳过添加存根组件，方法是将custom-component添加到TestBed的声明列表中，如下所示：

declarations: [MyApp, CheckinPage, RoatedDateComponent, CustomComponent],