Angular shallow rendering snapshots in unit tests fails with strange behavior

Question

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
...

Answer 1

It looks like a bug in either Angular or jest.

ngContext is an internal property for angular needs. it can be an index (number) or an object. The number support was added to improve performance and to reduce the number of objects for the same context on different nodes.

The index of a context starts from 0, and it looks like there is code in either Angular or jest, which considers 0 as false, and 1+ as true. In case of true, there is conversion from a primitive to an object of its type.

And this is why the very first test in the suite has __ngContext__="0", whereas all others (1+) have __ngContext__={[Function Number]}

The right way is to report an issue to the related framework to fix it. But it might take quite a while, especially for jest.

That's why I've implemented a permanent fix in ng-mocks: https://github.com/help-me-mom/ng-mocks/pull/3830, it will be released today.