chore(deps-dev): upgrade to jest 28 (#35334)

https://jestjs.io/zh-Hans/docs/upgrading-to-jest28

.github/workflows/preview-build.yml

@@ -30,7 +30,7 @@ jobs:
           key: lock-${{ github.sha }}
 
       - name: create package-lock.json
-        run: npm i --package-lock-only --ignore-scripts
+        run: npm i --package-lock-only --ignore-scripts --legacy-peer-deps
 
       - name: hack for single file
         run: |

.github/workflows/site-deploy.yml

@@ -22,7 +22,7 @@ jobs:
           key: lock-${{ github.sha }}
 
       - name: create package-lock.json
-        run: npm i --package-lock-only --ignore-scripts
+        run: npm i --package-lock-only --ignore-scripts --legacy-peer-deps
 
       - name: hack for single file
         run: |

.github/workflows/test.yml

@@ -26,7 +26,7 @@ jobs:
           key: lock-${{ github.sha }}
 
       - name: create package-lock.json
-        run: npm i --package-lock-only --ignore-scripts
+        run: npm i --package-lock-only --ignore-scripts --legacy-peer-deps
 
       - name: hack for single file
         run: |

.github/workflows/ui.yml

@@ -28,7 +28,7 @@ jobs:
           node-version: '16'
 
       - name: create package-lock.json
-        run: npm i --package-lock-only --ignore-scripts
+        run: npm i --package-lock-only --ignore-scripts --legacy-peer-deps
 
       - name: hack for single file
         run: |

.jest.js

@@ -20,13 +20,13 @@ module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'],
   modulePathIgnorePatterns: ['/_site/'],
   moduleNameMapper: {
-    '^dnd-core$': 'dnd-core/dist/cjs',
-    '^react-dnd$': 'react-dnd/dist/cjs',
-    '^react-dnd-html5-backend$': 'react-dnd-html5-backend/dist/cjs',
-    '^react-dnd-touch-backend$': 'react-dnd-touch-backend/dist/cjs',
-    '^react-dnd-test-backend$': 'react-dnd-test-backend/dist/cjs',
-    '^react-dnd-test-utils$': 'react-dnd-test-utils/dist/cjs',
-    '\\.(css|less)$': 'identity-obj-proxy',
+    '/^dnd-core$/': 'dnd-core/dist/cjs',
+    '/^react-dnd$/': 'react-dnd/dist/cjs',
+    '/^react-dnd-html5-backend$/': 'react-dnd-html5-backend/dist/cjs',
+    '/^react-dnd-touch-backend$/': 'react-dnd-touch-backend/dist/cjs',
+    '/^react-dnd-test-backend$/': 'react-dnd-test-backend/dist/cjs',
+    '/^react-dnd-test-utils$/': 'react-dnd-test-utils/dist/cjs',
+    '/\\.(css|less)$/': 'identity-obj-proxy',
   },
   testPathIgnorePatterns: ['/node_modules/', 'dekko', 'node', 'image.test.js', 'image.test.ts'],
   transform: {
@@ -52,5 +52,7 @@ module.exports = {
       tsConfig: './tsconfig.test.json',
     },
   },
-  testURL: 'http://localhost',
+  testEnvironmentOptions: {
+    url: 'http://localhost',
+  },
 };

package.json

@@ -159,9 +159,9 @@
     "scroll-into-view-if-needed": "^2.2.25"
   },
   "devDependencies": {
-    "@ant-design/bisheng-plugin": "^3.0.1",
+    "@ant-design/bisheng-plugin": "^3.2.0",
     "@ant-design/hitu": "^0.0.0-alpha.13",
-    "@ant-design/tools": "^14.0.2",
+    "@ant-design/tools": "^15.0.0",
     "@docsearch/css": "^3.0.0",
     "@qixian.cs/github-contributors-list": "^1.0.3",
     "@stackblitz/sdk": "^1.3.0",
@@ -187,7 +187,7 @@
     "antd-img-crop": "^4.0.0",
     "array-move": "^4.0.0",
     "babel-plugin-add-react-displayname": "^0.0.5",
-    "bisheng": "^3.3.0",
+    "bisheng": "^3.5.0",
     "bisheng-plugin-description": "^0.1.4",
     "bisheng-plugin-react": "^1.2.0",
     "bisheng-plugin-toc": "^0.4.4",
@@ -230,10 +230,11 @@
     "inquirer": "^8.0.0",
     "intersection-observer": "^0.12.0",
     "isomorphic-fetch": "^3.0.0",
-    "jest": "^27.0.3",
+    "jest": "^28.0.3",
     "jest-axe": "^6.0.0",
-    "jest-environment-node": "^27.4.4",
-    "jest-image-snapshot": "^4.5.1",
+    "jest-environment-jsdom": "^28.0.2",
+    "jest-environment-node": "^28.0.2",
+    "@ant-design/jest-image-snapshot": "^4.5.2",
     "jest-puppeteer": "^6.0.0",
     "jquery": "^3.4.1",
     "jsdom": "^19.0.0",

tests/setup.js

@@ -1,4 +1,6 @@
 const React = require('react');
+const util = require('util');
+
 const { _rs: onLibResize } = require('rc-resize-observer/lib/utils/observerUtil');
 const { _rs: onEsResize } = require('rc-resize-observer/es/utils/observerUtil');
 
@@ -34,6 +36,17 @@ if (typeof window !== 'undefined') {
   // https://github.com/yiminghe/css-animation/blob/a5986d73fd7dfce75665337f39b91483d63a4c8c/src/Event.js#L44
   window.AnimationEvent = window.AnimationEvent || window.Event;
   window.TransitionEvent = window.TransitionEvent || window.Event;
+
+  // ref: https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+  // ref: https://github.com/jsdom/jsdom/issues/2524
+  Object.defineProperty(window, 'TextEncoder', {
+    writable: true,
+    value: util.TextEncoder,
+  });
+  Object.defineProperty(window, 'TextDecoder', {
+    writable: true,
+    value: util.TextDecoder,
+  });
 }
 
 const Enzyme = require('enzyme');

tests/shared/imageTest.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 // Reference: https://github.com/ant-design/ant-design/pull/24003#discussion_r427267386
 // eslint-disable-next-line import/no-unresolved
-import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
+import { configureToMatchImageSnapshot } from '@ant-design/jest-image-snapshot';
 import ReactDOMServer from 'react-dom/server';
 import glob from 'glob';
 import MockDate from 'mockdate';

typings/jest-image-snapshot.d.ts

@@ -0,0 +1,145 @@
+// Type definitions for jest-image-snapshot 4.3
+// Project: https://github.com/americanexpress/jest-image-snapshot#readme
+// Definitions by: Janeene Beeforth <https://github.com/dawnmist>
+//                 erbridge <https://github.com/erbridge>
+//                 Piotr Błażejewicz <https://github.com/peterblazejewicz>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.8
+
+/// <reference types="jest" />
+
+declare module '@ant-design/jest-image-snapshot' {
+  import { PixelmatchOptions } from 'pixelmatch';
+  import { Options as SSIMOptions } from 'ssim.js';
+
+  export interface MatchImageSnapshotOptions {
+    /**
+     * If set to true, the build will not fail when the screenshots to compare have different sizes.
+     *
+     * @default false
+     */
+    allowSizeMismatch?: boolean | undefined;
+    /** Custom config passed to 'pixelmatch' or 'ssim' */
+    customDiffConfig?: PixelmatchOptions | Partial<SSIMOptions> | undefined;
+    /**
+     * The method by which images are compared. `pixelmatch` does a pixel by pixel comparison,
+     * whereas `ssim` does a structural similarity comparison.
+     *
+     * @default 'pixelmatch'
+     */
+    comparisonMethod?: 'pixelmatch' | 'ssim' | undefined;
+    /** Custom snapshots directory. Absolute path of a directory to keep the snapshot in. */
+    customSnapshotsDir?: string | undefined;
+    /** A custom absolute path of a directory to keep this diff in */
+    customDiffDir?: string | undefined;
+    /**
+     * A custom name to give this snapshot. If not provided, one is computed automatically. When a
+     * function is provided it is called with an object containing testPath, currentTestName,
+     * counter and defaultIdentifier as its first argument. The function must return an identifier
+     * to use for the snapshot.
+     */
+    customSnapshotIdentifier?:
+      | ((parameters: {
+          testPath: string;
+          currentTestName: string;
+          counter: number;
+          defaultIdentifier: string;
+        }) => string)
+      | string
+      | undefined;
+    /**
+     * Changes diff image layout direction.
+     *
+     * @default 'horizontal'
+     */
+    diffDirection?: 'horizontal' | 'vertical' | undefined;
+    /**
+     * Will output base64 string of a diff image to console in case of failed tests (in addition to
+     * creating a diff image). This string can be copy-pasted to a browser address string to preview
+     * the diff for a failed test.
+     *
+     * @default false
+     */
+    dumpDiffToConsole?: boolean | undefined;
+    /**
+     * Will output the image to the terminal using iTerm's Inline Images Protocol. If the term is
+     * not compatible, it does the same thing as `dumpDiffToConsole`.
+     *
+     * @default false
+     */
+    dumpInlineDiffToConsole?: boolean | undefined;
+    /**
+     * Removes coloring from the console output, useful if storing the results to a file.
+     *
+     * @default false
+     */
+    noColors?: boolean | undefined;
+    /**
+     * Sets the threshold that would trigger a test failure based on the failureThresholdType
+     * selected. This is different to the customDiffConfig.threshold above - the
+     * customDiffConfig.threshold is the per pixel failure threshold, whereas this is the failure
+     * threshold for the entire comparison.
+     *
+     * @default 0
+     */
+    failureThreshold?: number | undefined;
+    /**
+     * Sets the type of threshold that would trigger a failure.
+     *
+     * @default 'pixel'
+     */
+    failureThresholdType?: 'pixel' | 'percent' | undefined;
+    /**
+     * Updates a snapshot even if it passed the threshold against the existing one.
+     *
+     * @default false
+     */
+    updatePassedSnapshot?: boolean | undefined;
+    /**
+     * Applies Gaussian Blur on compared images, accepts radius in pixels as value. Useful when you
+     * have noise after scaling images per different resolutions on your target website, usually
+     * setting its value to 1-2 should be enough to solve that problem.
+     *
+     * @default 0
+     */
+    blur?: number | undefined;
+    /**
+     * Runs the diff in process without spawning a child process.
+     *
+     * @default false
+     */
+    runInProcess?: boolean | undefined;
+  }
+
+  /**
+   * Function to be passed to jest's expect.extend. Example: import { toMatchImageSnapshot } from
+   * 'jest-image-snapshot'; expect.extend({ toMatchImageSnapshot });
+   */
+  export function toMatchImageSnapshot(options?: MatchImageSnapshotOptions): {
+    message(): string;
+    pass: boolean;
+  };
+
+  /**
+   * Configurable function that can be passed to jest's expect.extend. Example: import {
+   * configureToMatchImageSnapshot } from 'jest-image-snapshot'; const toMatchImageSnapshot =
+   * configureToMatchImageSnapshot({ noColors: true }); expect.extend({ toMatchImageSnapshot });
+   */
+  export function configureToMatchImageSnapshot(
+    options: MatchImageSnapshotOptions,
+  ): () => { message(): string; pass: boolean };
+
+  /** Mutates original state with new state */
+  export function updateSnapshotState<TObject, TPartial>(
+    originalSnapshotState: TObject,
+    partialSnapshotState: TPartial,
+  ): TObject & TPartial;
+
+  declare global {
+    namespace jest {
+      interface Matchers<R, T> {
+        toMatchImageSnapshot(options?: MatchImageSnapshotOptions): R;
+      }
+    }
+  }
+}