Error while angular unit testing with Jasmine and Karma

Question

I have already imported the angular material in my spec.ts but I am getting the below error when trying to run the test that is ng test of this particular component:

Error: Template parse errors:

'mat-form-field' is not a known element: 1. If 'mat-form-field' is an Angular component, then verify that it is part of this module. 2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->] ][dataSource]="parts" matSort class="mat-elevation-z8"> "): ng:///DynamicTestModule/PartViewComponent.html@6:23 The pipe 'uuidAbbrev' could not be found ("eader-cell *matHeaderCellDef mat-sort-header>Uuid {{[ERROR ->]row.uuid|uuidAbbrev}} "): ng:///DynamicTestModule/PartViewComponent.html@10:44 Can't bind to 'matHeaderRowDef' since it isn't a known property of 'tr'. (" ]matHeaderRowDef="displayedProps"> [ERROR ->] ]*matRowDef="let row; columns: displayedProps;"> "): ng:///DynamicTestModule/PartViewComponent.html@24:35 Property binding matRowDefColumns 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". (" [ERROR ->] http://localhost:9876/_karma_webpack_/vendor.js:36418:17) at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (http://localhost:9876/_karma_webpack_/vendor.js:54593:19) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (http://localhost:9876/_karma_webpack_/vendor.js:60159:37) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/vendor.js:60146:23) at http://localhost:9876/_karma_webpack_/vendor.js:60089:62 at Set.forEach () at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/vendor.js:60089:19) at http://localhost:9876/_karma_webpack_/vendor.js:60007:19 at Object.then (http://localhost:9876/_karma_webpack_/vendor.js:36409:77) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/vendor.js:60005:26) ```

All the required details are added : 1. My test file (spec.ts) 2. The component.ts file which is to be tested 3. The error encountered when the test case is executed. — Jeet
I believe you need to add the material component modules to your imports array in TestBed.configureTestingModule() — Tanner
The test cases are still dailing. could you please help me with a valid test case for the above written .ts file? — Jeet

guzmanoj guzmanoj · Accepted Answer · 2020-02-14T16:07:28

A couple of things:

To avoid importing modules from Angular Material directly you need to create a separated Angular module. This is a good practice, and you should stick to it :)

Second, You need to import the Angular Material module you just create in your TestBed:

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

Example of my 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 {}

Last but not least, probably you'll get another error related to pipe uuidAbbrev, make sure to add it to your declarations array in the TestBed.configureTestingModule

Error while angular unit testing with Jasmine and Karma

1 Answers