有时当我更新快照时，我得到一个属性 __ngContext__

Question

有时当我更新快照时，我得到了一个属性上下文为了解决这个问题，我必须清理并安装我的 node_modules 来“修复”这个问题。 每次我需要更新快照时，我都必须这样做。我已经搜索了多种解决方案，但没有任何效果。

snapshotSerializers: \[

'jest-preset-angular/build/serializers/no-ng-attributes',

'jest-preset-angular/build/serializers/ng-snapshot',

'jest-preset-angular/build/serializers/html-comment',

\],

有人可以帮我解决这个问题吗？

Here is an image

我已经更新了 jest 版本和 jest-present-angular，但是没有用。 我只想有一个不会让我每次都干净安装 node_modules 的解决方案

Answer 1

这确实很烦人，特别是因为它在升级 Angular 版本后往往会发生变化。由于这种差异，我的快照现在也失败了：-/。

-   __ngContext__={[Function LRootView]}
+   __ngContext__="0"

因此，查看 jest 配置后，快照序列化程序正在从“jest-preset-angular”模块加载。

这里的相关插件是'jest-preset-angular/build/serializers/ng-snapshot'。现在，它们是摆脱__ngContext__ 的两种方法。

1. 用修改后的副本完全替换插件

   在同一目录中创建该文件的副本并相应地对其进行调整（行https://github.com/thymikee/jest-preset-angular/blob/40b769b8eba0b82913827793b6d9fe06d41808d9/src/serializers/ng-snapshot.ts#L69）：

   const attributes = Object.keys(componentInstance).filter(key => key !== '__ngContext__');
   

   调整配置：

     snapshotSerializers: [
       'jest-preset-angular/build/serializers/no-ng-attributes',
       './custom-snapshot-serializer.ts',
       'jest-preset-angular/build/serializers/html-comment',
     ],
   

   此解决方案的缺点是您必须维护插件，尽管只更改了一行。

   2. 用包装器替换插件（首选解决方案)

   这只是为原始实现创建了一个包装器。这个想法是在 __ngContext__ 沿着插件链向下移动之前删除它。但是，原始插件的逻辑用于夹具序列化。

   import type { ComponentRef, DebugNode, Type, ɵCssSelectorList } from '@angular/core';
   import type { ComponentFixture } from '@angular/core/testing';
   import type { Colors } from 'pretty-format';
   import { test as origTest, print as origPrint } from 'jest-preset-angular/build/serializers/ng-snapshot';
   
   /**
    * The follow interfaces are customized heavily inspired by @angular/core/core.d.ts
    */
   interface ComponentDef {
     selectors: ɵCssSelectorList;
   }
   interface IvyComponentType extends Type<unknown> {
     ɵcmp: ComponentDef;
   }
   interface NgComponentRef extends ComponentRef<unknown> {
     componentType: IvyComponentType;
     _elDef: any; // eslint-disable-line @typescript-eslint/no-explicit-any
     _view: any; // eslint-disable-line @typescript-eslint/no-explicit-any
   }
   interface NgComponentFixture extends ComponentFixture<unknown> {
     componentRef: NgComponentRef;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     componentInstance: Record<string, any>;
   }
   
   /**
    * The following types haven't been exported by jest so temporarily we copy typings from 'pretty-format'
    */
   interface PluginOptions {
     edgeSpacing: string;
     min: boolean;
     spacing: string;
   }
   type Indent = (indentSpaces: string) => string;
   type Printer = (elementToSerialize: unknown) => string;
   
   export const print = (fixture: any, print: Printer, indent: Indent, opts: PluginOptions, colors: Colors): any => {
     const componentInstance = (fixture as NgComponentFixture).componentInstance;
     const instance = { ...componentInstance };
     delete instance.__ngContext__;
     const modifiedFixture = { ...fixture, componentInstance: { ...instance } };
     return origPrint(modifiedFixture, print, indent, opts, colors);
   };
   
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
   export const test = (val: any): boolean => {
     return origTest(val);
   };
   

   配置的调整方式与以前相同。