Jasmine/karma test failing due to Virtual Scroll on Angular7

Question

Scenario: I am running a very basic test on Angular7 project (https://stackblitz.com/edit/angular-efdcyc) which also uses ScrollingModule within '@angular/cdk/scrolling'.

Question: Any way around the error below? am i missing anything?

The simple test in my spec.ts file

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:

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 the module in your testbed.

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

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

But then again, the documentation is there to explain that.