没有 "exportAs" 设置为 "cdkStep" 的指令

Question

我在 spec.ts 中从 karma/jasmin 收到此错误：

There is no directive with "exportAs" set to "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 上被问过多次，但是 none 其中 'cdkStep'.
有人知道我错过了什么吗？该组件工作正常 - 只是我无法通过简单的 expect(component).toBeTruthy(); 获得成功。

Answer 1

您的组件依赖于 cdk-step 组件，一旦您 将 CdkStepperModule 导入，它就会在您的 TestBed 中可用。

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

通常 angular 会在遇到 unknown/custom 标签时通过抛出典型的 some-component is not an angular component 来抱怨，但因为您使用的是 CUSTOM_ELEMENTS_SCHEMA ，所以会跳过此检查。

为了使用 cdk-step 选择器注册 CdkStep，您需要将设置重构为：

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

没有 "exportAs" 设置为 "cdkStep" 的指令

There is no directive with "exportAs" set to "cdkStep"

unit-testing

jasmine

karma-jasmine

angular

angular-cdk