应该将 Snapshot 笑话单元测试与 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)

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();
  });
});

我可以看到 .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_]}