Angular shallow rendering snapshots in unit tests fails with strange behavior

Viewed 90

I'm currently facing a strange behavior on my Angular (14) shallow rendering snapshots in unit tests (Jest 28).

Sometimes my snapshot tests are failing, depending if I run them individually or as bundle. The reason of failure is the difference between __ngContext__={[Function Number]} and __ngContext__="0".

Besides the fact, that I'm using the default snapshot-serializer shipped by "jest-preset-angular", "ng-mocks" is used to provide the module in a mocked way to render only shallow DOM snapshots.

Does anyone know how to remove the __ngContext__ from the mock-render, to avoid the differences while running the test standalone or in a bundle.

My test looks as follow:


import { MockBuilder, MockRender } from 'ng-mocks';


  describe('Snapshot Tests', () => {
    beforeEach(() =>
      MockBuilder(MyComponent, [
        MyModule
      ])
    );

    it('should create', () => {
      const fixture = MockRender(MyComponent, {});
      expect(fixture).toMatchSnapshot();
    });
  });
// Jest Snapshot v1

exports[`MyComponent Snapshot Tests should create`] = `
<mock-render
  __ngContext__={[Function Number]}
>
  <my-component>
    <h1>Test</h1>
  </my-component>
</mock-render>

and sometimes (if I run the test individually)

// Jest Snapshot v1

exports[`MyComponent Snapshot Tests should create`] = `
<mock-render
  __ngContext__="0"
>
  <my-component>
    <h1>Test</h1>
  </my-component>
</mock-render>

Package information

> npx envinfo --npmPackages 
@angular/core: ^14.0.2 => 14.0.2  
ng-mocks: ^14.0.1 => 14.0.1
jest: ^28.1.1 => 28.1.1 
jest-preset-angular: ^12.1.0 => 12.1.0 
ts-jest: ^28.0.5 => 28.0.5
...
0 Answers
Related