使用 Jasmine 和 Karma 进行角度单元测试时出错

Question

我已经在我的 spec.ts 中导入了角度材料，但是在尝试运行该特定组件的 ng 测试时出现以下错误：

错误：模板解析错误：

'mat-form-field' 不是已知元素： 1. 如果 'mat-form-field' 是 Angular 组件，则验证它是否是该模块的一部分。 2. 如果“mat-form-field”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。 ("

[错误->] ][dataSource]="parts" matSort class="mat-elevation-z8"> "): ng:///DynamicTestModule/PartViewComponent.html@6:23 找不到管道“uuidAbbrev”（“eader-cell *matHeaderCellDef mat-sort-header>Uuid {{[错误 ->]row.uuid|uuidAbbrev}} "): ng:///DynamicTestModule/PartViewComponent.html@10:44 无法绑定到“matHeaderRowDef”，因为它不是“tr”的已知属性。 (" ]matHeaderRowDef="displayedProps"> [错误->] ]*matRowDef="让行；列：displayedProps；"> "): ng:///DynamicTestModule/PartViewComponent.html@24:35 嵌入式模板上的任何指令均未使用属性绑定 matRowDefColumns。确保属性名称拼写正确，并且所有指令都列在“@NgModule.declarations”中。 (" [错误->] http://localhost:9876/_karma_webpack_/vendor.js:36418:17) 在 TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (http://localhost:9876/_karma_webpack_/vendor.js:54593:19) 在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (http://localhost:9876/_karma_webpack_/vendor.js:60159:37) 在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/vendor.js:60146:23) 在http://localhost:9876/_karma_webpack_/vendor.js:60089:62 在 Set.forEach() 在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/vendor.js:60089:19) 在http://localhost:9876/_karma_webpack_/vendor.js:60007:19 在 Object.then (http://localhost:9876/_karma_webpack_/vendor.js:36409:77) 在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/vendor.js:60005:26) ```

Answer 1

有几点：

为避免直接从 Angular Material 导入模块，您需要创建一个单独的 Angular 模块。这是一个很好的做法，你应该坚持下去:)

第二， 您需要导入刚刚在 TestBed 中创建的 Angular Material 模块：

  beforeEach(async(() => {
            TestBed.configureTestingModule({
              imports: [MaterialModule],
              declarations: [PartViewComponent],
              providers: [PartService]
            })
            .compileComponents();
          }));

我的 MaterialModule 示例：

import { NgModule } from '@angular/core';
import {
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatExpansionModule,
  MatFormFieldModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule
} from '@angular/material';

@NgModule({
  imports: [
    MatSidenavModule,
    MatToolbarModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatIconModule,
    MatListModule,
    MatCardModule,
    MatDialogModule,
    MatSelectModule,
    MatInputModule,
    MatFormFieldModule,
    MatAutocompleteModule,
    MatInputModule,
    MatTableModule,
    MatSlideToggleModule,
    MatRadioModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatSnackBarModule,
    MatTooltipModule,
    MatTabsModule,
    MatRippleModule,
    MatGridListModule,
    MatStepperModule,
    MatCheckboxModule,
    MatMenuModule,
    MatChipsModule,
    MatExpansionModule
  ],
  exports: [
    MatSidenavModule,
    MatToolbarModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatIconModule,
    MatListModule,
    MatCardModule,
    MatDialogModule,
    MatSelectModule,
    MatInputModule,
    MatFormFieldModule,
    MatAutocompleteModule,
    MatTableModule,
    MatSlideToggleModule,
    MatRadioModule,
    MatDatepickerModule,
    MatSnackBarModule,
    MatTooltipModule,
    MatTabsModule,
    MatRippleModule,
    MatGridListModule,
    MatStepperModule,
    MatMenuModule,
    MatCheckboxModule,
    MatChipsModule,
    MatExpansionModule
  ],
  declarations: []
})
export class MaterialModule {}

最后但同样重要的是，您可能会收到另一个与管道 uuidAbbrev 相关的错误，请确保将其添加到您的 declarations 数组中的 TestBed.configureTestingModule