Question

场景：我正在 Angular7 项目（https://stackblitz.com/edit/angular-efdcyc）上进行非常基本的测试，该项目还在'@ angular / cdk / scrolling'中使用了 ScrollingModule 。

问题：可以解决以下错误吗？我想念什么吗？

我的 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();
  });
});

错误：

错误：模板解析错误：因为它无法绑定到“ cdkVirtualForOf” 不是'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
嵌入式模板。确保属性名称拼写正确正确，所有指令均列在 “ @ 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”不是已知元素： 1.如果“ cdk-virtual-scroll-viewport”是Angular组件，则请验证它是否是此模块的一部分。 2.如果“ cdk-virtual-scroll-viewport”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas” 禁止显示此消息。（“
\[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）在JitCompiler.push ../ node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate中（http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:24570:1）在JitCompiler.push ../ node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate中（http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:24557:1）在http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:24500:48 在Set.forEach（）在JitCompiler.push ../ node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents （http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:24500:1）在http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:24418:1 在Object.then（http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:1012:33）在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上的Virtual Scroll而失败

1 个答案: