Jasmine/karma 由于 Angular7 上的虚拟滚动导致测试失败

Question

场景：我是运行对 Angular7 项目 (https://stackblitz.com/edit/angular-efdcyc) 的一个非常基本的测试，它也在 '@[= 中使用 ScrollingModule 42=]'.

问题：有什么办法解决下面的错误？我错过了什么吗？

我的spec.ts文件

中的简单测试

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
        ,countriesComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
});

错误：

Error: Template parse errors: Can't bind to 'cdkVirtualForOf' since it isn't a known property of 'div'. ("
<cdk-virtual-scroll-viewport itemSize="10" class="example-viewport">
        <div \[ERROR ->\]*cdkVirtualFor="let item of myList" class="example-item">{{item.name}} ({{item.code}})</div>
</c"): ng:///DynamicTestModule/countriesComponent.html@13:17 Property binding cdkVirtualForOf not used by any directive on an
embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
<cdk-virtual-scroll-viewport itemSize="10" class="example-viewport">
        \[ERROR ->\]<div *cdkVirtualFor="let item of myList" class="example-item">{{item.name}} ({{item.code}})</div>   "):
ng:///DynamicTestModule/countriesComponent.html@13:12 'cdk-virtual-scroll-viewport' is not a known element: 1. If 'cdk-virtual-scroll-viewport' is an Angular component, then verify that it is part of this module. 2. If 'cdk-virtual-scroll-viewport' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
\[ERROR ->\]<cdk-virtual-scroll-viewport itemSize="10" class="example-viewport">
        <div *cdkVirtualFor"): ng:///DynamicTestModule/countriesComponent.html@12:4
at syntaxError (http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:1021:1)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse
(http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:14851:1) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:24570:1) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:24557:1) at http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:24500:48 at Set.forEach () at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:24500:1) at http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:24418:1 at Object.then (http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:1012:33) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:24416:1)

Answer 1

在您的测试平台中导入模块。

import { ScrollDispatchModule } from '@angular/cdk/scrolling';

TestBed.configureTestingModule({
  declarations: [
    AppComponent
    ,countriesComponent
  ], imports: [ScrollDispatchModule]
}).compileComponents();

不过话又说回来，the documentation 是为了解释这一点。

Jasmine/karma 由于 Angular7 上的虚拟滚动导致测试失败

Jasmine/karma test failing due to Virtual Scroll on Angular7

jasmine

karma-runner

angular

virtualscroll