单元测试中的角浅渲染快照以奇怪的行为失败。

Question

目前，在单元测试(Jest 28)中，我的角度(14)浅渲染快照面临着一种奇怪的行为。

有时，我的快照测试失败，这取决于我是单独运行还是作为包运行。失败的原因是__ngContext__={[Function Number]}和__ngContext__="0"的区别。

此外，我使用的默认快照序列化程序由“jest-预设-角”，“ng-模拟”是用来提供模块的模拟方式，只呈现浅的DOM快照。

是否有人知道如何从模拟呈现中删除__ngContext__，以避免在单独运行测试时或在包中运行时的差异。

我的测试结果如下：

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>

有时(如果我单独进行测试)

// Jest Snapshot v1

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

包装信息

> 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

它看起来像一只小虫子，不管是角的还是玩笑的。

ngContext是满足角度需要的内部属性。它可以是索引(数字)或对象。为了提高性能和减少不同节点上相同上下文的对象数量，添加了数字支持。

上下文的索引从0开始，看起来在角或jest中都有代码，其中0为false，1+为true。如果为true，则从原语到其类型的对象进行转换。

这就是为什么套件中的第一个测试有__ngContext__="0"，而其他所有测试(1+)都有__ngContext__={[Function Number]}。

正确的方法是向相关框架报告一个问题来解决它。但这可能需要相当长的时间，尤其是在开玩笑的时候。

这就是为什么我在ng-mocks：https://github.com/help-me-mom/ng-mocks/pull/3830中实现了一个永久修复，它将于今天发布。