使用 Jasmine 和 Karma 進行角度單元測試時出錯

Question

我已經在我的 spec.ts 中導入了角度材料，但是在嘗試運行這個特定組件的 ng 測試時出現以下錯誤：

錯誤：模板解析錯誤：

'mat-form-field' 不是已知元素： 1. 如果 'mat-form-field' 是一個 Angular 組件，則驗證它是否是該模塊的一部分。 2. 如果'mat-form-field' 是一個Web 組件，則將'CUSTOM_ELEMENTS_SCHEMA' 添加到該組件的'@NgModule.schemas' 以抑制此消息。 ("

[ERROR ->] ][dataSource]="parts" matSort class="mat-elevation-z8"> "): ng:///DynamicTestModule/PartViewComponent.html@6:23 找不到管道“uuidAbbrev” ("eader-cell *matHeaderCellDef mat-sort-header>Uuid {{[ERROR ->]row.uuid|uuidAbbrev}}"): ng:///DynamicTestModule/PartViewComponent.html@10:44 無法綁定到'matHeaderRowDef' 因為它不是 'tr' 的已知屬性。(" ] matHeaderRowDef="displayedProps"> [ERROR ->] ]*matRowDef="let row; columns: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相關的錯誤，請確保將其添加到TestBed.configureTestingModule聲明數組中