Angular 13 running jest error "Unexpected value 'MatTimepickerModule' imported by the module 'DynamicTestModule'. Please add an #NgModule annotati." - npm

Question

I am getting the below error when running karma from angular using the command :
npm run test-headless
FAIL src/app/req-form-body/req-form-body.component.spec.ts (26.126 s)
● ReqFormBodyComponent › should create
**Unexpected value 'MatTimepickerModule' imported by the module 'DynamicTestModule'. Please add an #NgModule annotation.**
49 |
50 | beforeEach(() => {
> 51 | fixture = TestBed.createComponent(ReqFormBodyComponent);
| ^
52 | component = fixture.componentInstance;
53 | fixture.detectChanges();
54 | });
at verifySemanticsOfNgModuleDef (node_modules/#angular/core/fesm2015/core.mjs:23854:19)
at node_modules/#angular/core/fesm2015/core.mjs:23865:9
at Array.forEach (<anonymous>)
at verifySemanticsOfNgModuleDef (node_modules/#angular/core/fesm2015/core.mjs:23863:60)
at Function.get (node_modules/#angular/core/fesm2015/core.mjs:23825:21)
at R3TestBedCompiler.applyProviderOverridesToModule (node_modules/#angular/core/fesm2015/testing.mjs:1067:29)
at R3TestBedCompiler.compileTestModule (node_modules/#angular/core/fesm2015/testing.mjs:1315:14)
at R3TestBedCompiler.finalize (node_modules/#angular/core/fesm2015/testing.mjs:921:14)
at TestBedRender3.get testModuleRef [as testModuleRef] (node_modules/#angular/core/fesm2015/testing.mjs:1796:49)
at TestBedRender3.inject (node_modules/#angular/core/fesm2015/testing.mjs:1719:29)
at TestBedRender3.createComponent (node_modules/#angular/core/fesm2015/testing.mjs:1759:44)
at Function.createComponent (node_modules/#angular/core/fesm2015/testing.mjs:1617:37)
at src/app/req-form-body/req-form-body.component.spec.ts:51:23
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:409:30)
at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3803:43)
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:408:56)
at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:169:47)
at Object.wrappedFunc (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4288:34)
//and here is my ReqFormBodyComponent.spec.ts file .
enter code hereimport { ComponentFixture, TestBed } from '#angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { FormBuilder, FormControl, FormGroup, Validators } from '#angular/forms';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { MaterialModule } from './../../app/shared/material';
import { ReqFormBodyComponent } from './req-form-body.component';
import { MatTimepickerModule } from 'mat-timepicker';
import _moment from 'moment';
import { default as _rollupMoment } from 'moment';
const moment = _rollupMoment || _moment;
export const DATE_FORMATS = {
parse: {
dateInput: 'LL',
},
display: {
dateInput: 'DD-MMM-YYYY',
monthYearLabel: 'YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'YYYY',
},
};
describe('ReqFormBodyComponent', () => {
let component: ReqFormBodyComponent;
let fixture: ComponentFixture<ReqFormBodyComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [FormsModule, ReactiveFormsModule, MaterialModule, BrowserAnimationsModule, MatTimepickerModule],
declarations: [],
providers: [FormBuilder],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ReqFormBodyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
//corresponding component file (ReqFormBodyComponent.ts)
import { StepperSelectionEvent } from '#angular/cdk/stepper';
import { AfterViewInit, ChangeDetectionStrategy, Component,
ElementRef, OnInit, ViewChild } from '#angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from
'#angular/forms';
import { MatStepper } from '#angular/material/stepper';
import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '#angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '#angular/material/core';
import _moment from 'moment';
import { default as _rollupMoment } from 'moment';
const moment = _rollupMoment || _moment;
export const DATE_FORMATS = {
parse: {
dateInput: 'LL',
},
display: {
dateInput: 'DD-MMM-YYYY',
monthYearLabel: 'YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'YYYY',
},
};
#Component({
selector: 'ereq-req-form-body',
templateUrl: './req-form-body.component.html',
styleUrls: ['./req-form-body.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
// `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
// application's root module. We provide it at the component level here, due to limitations of
// our example generation script.
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS] },
{ provide: MAT_DATE_FORMATS, useValue: DATE_FORMATS },
],
})
export class ReqFormBodyComponent implements OnInit, AfterViewInit {
#ViewChild('stepper') public stepper: MatStepper;
public isLinear = false;
public totalStepCount: number;
public selectedStep: string;
public firstFormGroup: FormGroup;
public secondFormGroup: FormGroup;
public thirdFormGroup: FormGroup;
public fourthFormGroup: FormGroup;
public fifthFormGroup: FormGroup;
public sixthFormGroup: FormGroup;
public lastFormGroup: FormGroup;
public date = new FormControl(moment());
public defaultValue = { hour: 13, minute: 30 };
constructor(private formBuilder: FormBuilder) {}
public ngOnInit(): void {...

Answer 1

Your angular13 TestBed did not find an ivy compatible library to load by jest.
You can work around this by
Step: make sure you have the correct ngcc build in the package's
node_module folder.
Step: Add a moduleMapper for jest for the built
package