Should Match Snapshot jest unit testing with Angular

Trying to do the Snapshot test with Jest in angular 10 and test application is failed

expect(received).toMatchSnapshot()

Snapshot name: `DestinationComponent Should Match Snapshot 1`

- Snapshot - 5
+ Received + 5

@@ -12,15 +12,15 @@
formGroupDirective={[Function FormGroupDirective]}
index="0"
listSvg={[Function Object]}
loading={[Function Boolean]}
ngForm={[Function ElementRef]}
- onCancelled={[Function EventEmitter]}
- onLoaded={[Function EventEmitter]}
- onServerError={[Function EventEmitter]}
- onSubmitted={[Function EventEmitter]}
- onValidationError={[Function EventEmitter]}
+ onCancelled={[Function EventEmitter_]}
+ onLoaded={[Function EventEmitter_]}
+ onServerError={[Function EventEmitter_]}
+ onSubmitted={[Function EventEmitter_]}
+ onValidationError={[Function EventEmitter_]}
prefilledActions={[Function Object]}
router={[Function Router]}
sessionMapApi={[Function Object]}
sub={[Function Subscriber]}
submitted="false"

73 |
74 | it('Should Match Snapshot', async () => {
> 75 | (expect(fixture) as any).toMatchSnapshot();
| ^
76 | });
77 | });
78 |

at src/app/pages/destination/destination.component.spec.ts:75:30
at node_modules/tslib/tslib.js:114:75
at new ZoneAwarePromise (node_modules/zone.js/dist/zone.js:913:33)
at Object.__awaiter (node_modules/tslib/tslib.js:110:16)
at src/app/pages/destination/destination.component.spec.ts:74:42
at ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:386:30)
at ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:117:43)
at ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:385:36)
at Zone.run (node_modules/zone.js/dist/zone.js:143:47)


date-selection.component.spec.ts

describe('DateSelectionComponent', () => {
let component: DateSelectionComponent;
let fixture: ComponentFixture<DateSelectionComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [DateSelectionComponent, SafePipe],
imports: [
SharedModule,
NgReduxTestingModule,
RouterTestingModule.withRoutes([])
],
providers: [
{
provide: PageAPIActions, useValue: { setPageState() { } }
}
]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(DateSelectionComponent);
component = fixture.componentInstance;
Object.defineProperties(component, {
page$: {
value: of('value'),
writable: true
},
page: {
value: { destination: 'value' },
writable: true
},
startDate: {
value: new NgbDate(2019, 2, 27),
writable: true
},
minDate: {
value: new NgbDate(2019, 2, 27),
writable: true
}
});
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});

it('Should Match Snapshot', async () => {
(expect(fixture) as any).toMatchSnapshot();
});
});


I can see the .snap file is created, I am new to the jest unit testing, can anyone please help me what I am doing wrong, not able to find out the mistake

Continue reading...