没有将“ exportAs”设置为“ cdkStep”的指令

时间:2019-05-08 07:43:41

标签: angular unit-testing jasmine karma-jasmine angular-cdk

我在spec.ts中从业力/茉莉花中得到了这个错误:

  

没有将“ exportAs”设置为“ cdkStep”的指令

<!-- Step 1 -->
<cdk-step [ERROR ->]#step1="cdkStep">
    <ng-template cdkStepLabel>
        <div class="step-content">
<!-- Step 2 -->
<cdk-step [ERROR ->]#step2="cdkStep">
    <ng-template cdkStepLabel>
        <div class="step-content">
<!-- Step 3 -->
<cdk-step [ERROR ->]#step3="cdkStep">
    <ng-template cdkStepLabel>
        <div class="step-content">
<!-- Step 4 -->

我在组件中声明了这个

@ViewChild('step1') private step1: CdkStep;
@ViewChild('step2') private step2: CdkStep;

这是TestBed配置:

    TestBed.configureTestingModule({
        declarations: [ StepsComponent ],
        schemas: [CUSTOM_ELEMENTS_SCHEMA]
    }).compileComponents();

总体而言,我的代码与以下Stackblitz示例非常相似:
https://stackblitz.com/edit/angular-cdk-stepper-demo

我知道这个问题已经在SO上被问过多次了,但没有一个关于'cdkStep'的。
有人知道我所缺少的吗?该组件工作正常-只是我无法简单地expect(component).toBeTruthy();才能成功。

1 个答案:

答案 0 :(得分:2)

您的组件取决于cdk-step组件,一旦您将TestBed 导入 ,它就会在您的CdkStepperModule中可用。

因为不是这种情况,Angular在遇到CdkStep标记时不会创建cdk-step的实例,因为未注册关联。因此,您将无法将这些模板变量绑定到CdkStep的实例,因为这样的实例根本不存在。

通常,每当遇到未知/自定义标签时,Angular都会通过抛出典型的some-component is not an angular component进行投诉,但是由于您使用的是CUSTOM_ELEMENTS_SCHEMA,因此跳过了该检查。

要向CdkStep选择器注册cdk-step,您需要将设置重构为:

import { CdkStepperModule} from '@angular/cdk/stepper';
...
TestBed.configureTestingModule({
    imports: [CdkStepperModule],
    declarations: [StepsComponent]
}).compileComponents();