Nx: Jest snapshot matcher doesn't work with fixture

[BuckyMaler]

Expected Behavior

I expect that toMatchSnapshot can be applied to an Angular fixture (i.e. return of TestBed.createComponent(AppComponent)).

Current Behavior

What is the current behavior?

The following is the AppComponent test suite with minimal changes after generating an Nx Workspace and app:

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent]
    }).compileComponents();
  }));

  it('should render self', () => {
    const fixture = TestBed.createComponent(AppComponent);
    expect(fixture).toMatchSnapshot();
  });
});

The above test suite results in the following:

Failure Information (for bugs)

Steps to Reproduce

1. create-nx-workspace myworkspacename
2. ng g app <name> --unit-test-runner jest
3. add snapshot test to app.component.spec.ts that generates a snapshot against the fixture

Other

I'll have a PR in shortly with an example repo.

This is related to an older comment.

[fvanwijk]

Changing our Angular CLI workspace with @angular-builders/jest into NX workspace with @nrwl/builders:jest crashes Jest with the following errors:

<--- Last few GCs --->

[189620:0000025C6535ED60]    25513 ms: Mark-sweep 1394.3 (1425.1) -> 1393.9 (1425.1) MB, 979.1 / 0.0 ms  (average mu = 0.10
7, current mu = 0.014) allocation failure scavenge might not succeed
[189620:0000025C6535ED60]    26621 ms: Mark-sweep 1394.6 (1425.1) -> 1394.2 (1425.6) MB, 1102.2 / 0.0 ms  (average mu = 0.0
54, current mu = 0.004) allocation failure scavenge might not succeed


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 00000255FADDC5C1]
    1: StubFrame [pc: 00000255FADCE17D]
Security context: 0x02fc5069e6e1 <JSObject>
    2: replace [000002470E5F07E1](this=0x03002b6a3fa9 <String[87]: C:\Projects\vi_ux_framework\implementation\vibes-ux\node
_modules\lodash\isObjectLike.js>,0x00bd063c97d1 <JSRegExp <String[4]: "|\\>>,0x02fc506dea79 <String[3]: \$&>)
    3: printBasicValue(aka printBasicValue) [0000010A1FB52B89] [C:\Projects\vi_ux_fra...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF7946F08AA v8::internal::GCIdleTimeHandler::GCIdleTimeHandler+4810
 2: 00007FF7946C9C46 node::MakeCallback+4518
 3: 00007FF7946CA630 node_module_register+2160
 4: 00007FF79495AA4E v8::internal::FatalProcessOutOfMemory+846
 5: 00007FF79495A97F v8::internal::FatalProcessOutOfMemory+639
 6: 00007FF794E98984 v8::internal::Heap::MaxHeapGrowingFactor+11476
 7: 00007FF794E8F0E7 v8::internal::ScavengeJob::operator=+25543
 8: 00007FF794E8D65C v8::internal::ScavengeJob::operator=+18748
 9: 00007FF794E965D7 v8::internal::Heap::MaxHeapGrowingFactor+2343
10: 00007FF794E96656 v8::internal::Heap::MaxHeapGrowingFactor+2470
11: 00007FF794A390DB v8::internal::Factory::AllocateRawWithImmortalMap+59

As workaround change the line

expect(fixture).toMatchSnapshot();

into

expect(fixture.nativeElement).toMatchSnapshot();

modifies the snapshot slightly, but at least the crashes are gone.

Update

Adding this to jest.config.js might be a better idea:

snapshotSerializers: [
  'jest-preset-angular/AngularSnapshotSerializer.js',
  'jest-preset-angular/HTMLCommentSerializer.js'
]