Jest.js 有时,当我更新快照时,我会得到一个属性__ngContext__

z0qdvdin  于 2022-12-08  发布在  Jest
关注(0)|答案(1)|浏览(164)

有时当我更新快照时,我会得到一个属性ngContext,为了解决这个问题,我必须清理并安装我的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

wwtsj6pe

wwtsj6pe1#

这确实很烦人,尤其是因为升级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/40 b769 b8 eba 0 b82913827793 b6 d9 fe 06 d41808 d9/src/serializers/ng-snapshot.ts#L 69):

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.用 Package 程序替换插件(首选解决方案
这只是为原始实现创建了一个 Package 器。其想法是在__ngContext__移动到插件链之前删除它。然而,原始插件的逻辑用于fixture序列化。

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);
};

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

相关问题