使用 jasmine 和 karma 进行单元测试时发生 CUSTOM_ELEMENTS_SCHEMA 错误

Question

我正在使用 jasmine 和 karma 进行单元测试。我可以在简单的应用程序中运行测试，但是当我测试具有其他组件的页面的方法时，它会显示如下错误

如果 'custom-component' 是 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 配置中声明。对于简单的组件，您总是可以在测试夹具内声明组件，一切都应该正常工作。

Angular 团队建议创建 stub components 以更好地测试父组件和子组件之间的交互。

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

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

然后提供给测试台：

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

如果子组件是仅查看且没有逻辑，我只会跳过创建存根。如果这是您的场景，您可以通过将 custom-component 添加到 TestBed 的声明列表中来跳过添加存根组件，如下所示：

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