PrettyFormatPluginError: Cannot read property 'element' of undefinedTypeError: Cannot read property 'element' of undefined

[wachri]

Describe the Bug

After running ngcc tests are failing with the error message:

PrettyFormatPluginError: Cannot read property 'element' of undefinedTypeError: Cannot read property 'element' of undefined

      19 |
      20 |   it(`should match snapshot`, () => {
    > 21 |     expect(fixture).toMatchSnapshot();
         |                     ^
      22 |   });
      23 | });
      24 |

      at Object.print (node_modules/jest-preset-angular/build/AngularSnapshotSerializer.js:21:49)
      at it (src/app/match-test/match-test.component.spec.ts:21:21)

Minimal Reproduction

https://github.com/wachri/jest-preset-angular-9-ngcc-bug

Expected Behavior

Tests should run successfully after running ngcc

More details

I debugged it a little bit and for me it looks like that the old ViewEngine is used instead of ivy.
Before the running ngcc var componentName = val.componentRef._elDef.element.name is available (https://github.com/thymikee/jest-preset-angular/blob/master/src/AngularSnapshotSerializer.js#L26)

When i do console.warn(val.componentRef); it looks like:

ComponentRef_ {
      _view:
       { def:
          { factory: [Function],
            nodeFlags: 33669121,
            rootNodeFlags: 33554433,
            nodeMatchedQueries: 0,
            flags: 0,
            nodes: [Array],
            updateDirectives: [Function],
            updateRenderer: [Function: NOOP],
            handleEvent: [Function: handleEvent],
            bindingCount: 0,
            outputCount: 0,
            lastRenderRootNode: [Object] },
//...

After running ngcc it looks like

ComponentRef {
      location:
       ElementRef {
         nativeElement:
          HTMLDivElement {
            __ngContext__: [LRootView],
            __ng_debug__: [DebugElement__POST_R3__] } },
      _rootLView:
       LRootView [
         null,
         TView {
           type: 0,
           id: -1,
           blueprint: [LViewBlueprint],
           template: null,
           queries: null,
           viewQuery: null,
           node: [TNode],
//...

Originally posted by @wachri in #347 (comment)

Originally posted by @wachri in #347 (comment)

[ahnpnl]

related to Ivy compatibility for serializers in jest-preset-angular

[virtualdevs]

Same here...

Angular 9
"jest": "^25.1.0",
"jest-preset-angular": "^8.0.0",

[Dixit199213bafna]

I have enabled ivy but I am using Angular version 10 and still i get the issue as PrettyFormatPluginError: Cannot read property 'element' of undefined

[ahnpnl]

• Make sure you are using latest version.
• Make sure you run ngcc before running tests.