Should Match Snapshot jest unit testing with Angular

Question

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

Answer 1

I faced it too.

Checking the Angular codebase, an assertion has been added on EventEmitter :

export const EventEmitter: {
  new (isAsync?: boolean): EventEmitter<any>; new<T>(isAsync?: boolean): EventEmitter<T>;
  readonly prototype: EventEmitter<any>;
} = EventEmitter_ as any;

It is justifed by the commit message : "to retain behaviour of pre TypeScript 3.9"

That's why your jest reports changes on the EventEmitter type as in Angular there is an added underscore character :

-   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_]}