Angular 使用jasmine和karma进行单元测试时发生自定义元素模式错误

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

如果“自定义组件”是Web组件，则添加 将“自定义元素\u架构”添加到此组件的“@NgModule.schemas” 要抑制此消息，请执行以下操作：

自定义组件.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>

<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.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>

<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>

签入规范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 }

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);
    }
}

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);
    });
});

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

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

---

有人能帮我解决这个问题吗？

当您配置

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

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

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

@组件({
选择器：“自定义组件”，
模板：“”
})
导出类CustomComponentStub{//此处有一些代码}

然后将其提供给试验台：

声明：[MyApp、CheckinPage、RoatedDateComponent、CustomComponentStub]，

只有当子组件是仅视图且没有逻辑时，我才会跳过创建存根。如果这是您的场景，您可以通过将
自定义组件添加到
测试床的声明列表中来跳过添加存根组件，如下所示：

声明：[MyApp、CheckinPage、RoatedDateComponent、CustomComponent]，
通常不建议跳过存根，原因与当初推荐存根组件的原因完全相同。这只会阻止应用程序被正确测试。我向声明部分添加了自定义组件，上面的错误得到了解决，但由于我的页面也使用了服务，它会给我这样的错误：“错误：EmployeeService没有提供程序！”当我将EmployeeService添加到我的测试床提供程序时，它显示0个测试已完成@这就是为什么您应该使用存根而不是实际的组件。存根没有依赖关系，允许您编写帮助器方法来访问有关子组件的信息，并从子组件发出数据，然后被测试的组件使用这些数据。