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

Question

有时候，当我更新快照时，我得到了一个属性ngContext，为了解决这个问题，我需要清理和安装ngContext来“修复”这个问题。每次需要更新快照时，我都要这样做。我已经搜索过多个解决方案了，但都没有效果。

snapshotSerializers: \[

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

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

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

\],

有人能帮我一下吗？

这是一张图片

我已经更新了搞笑版本，也更新了玩笑-现在-角度，但没有发挥作用。我只想有一个解决方案，不让我每次安装node_modules

Answer 1

这确实是令人讨厌的，特别是因为它在升级角形版本后会发生变化。由于这种差异，我的快照现在也失败了:-/。

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

因此，在查看jest配置之后，快照序列化程序将从‘jest-预设-角’模块加载。

这里的相关插件是'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',
  ],

这种解决方案的缺点是，您必须维护插件，尽管只有一行已经更改。

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

这只会为原始实现创建一个包装器。这样做的目的是在__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);
};

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