應該將 Snapshot jest 單元測試與 Angular 匹配

Question

嘗試在 angular 10 中使用 Jest 進行快照測試並且測試應用程序失敗

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)

日期選擇.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();
  });
});

我可以看到 .snap 文件已創建，我是 jest 單元測試的新手，任何人都可以幫助我我做錯了什么，無法找出錯誤

Answer 1

我也遇到過。

檢查 Angular 代碼庫，在EventEmitter添加了一個斷言：

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

提交消息證明了這一點：“保留 TypeScript 3.9 之前的行為”

這就是為什么你的笑話報告 EventEmitter 類型的變化，因為在 Angular 中有一個添加的下划線字符：

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