From ed4d41676ebb286468b7fec336187d485887f8ed Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 9 May 2022 23:17:26 +0800 Subject: [PATCH] chore(deps-dev): upgrade to jest 28 (#35334) https://jestjs.io/zh-Hans/docs/upgrading-to-jest28 --- .github/workflows/preview-build.yml | 2 +- .github/workflows/site-deploy.yml | 2 +- .github/workflows/test.yml | 2 +- .github/workflows/ui.yml | 2 +- .jest.js | 18 ++-- package.json | 13 +-- tests/setup.js | 13 +++ tests/shared/imageTest.tsx | 2 +- typings/jest-image-snapshot.d.ts | 145 ++++++++++++++++++++++++++++ 9 files changed, 180 insertions(+), 19 deletions(-) create mode 100644 typings/jest-image-snapshot.d.ts diff --git a/.github/workflows/preview-build.yml b/.github/workflows/preview-build.yml index 0af77d36c4..19a3a7397c 100644 --- a/.github/workflows/preview-build.yml +++ b/.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: | diff --git a/.github/workflows/site-deploy.yml b/.github/workflows/site-deploy.yml index f358c15171..030faa4bda 100644 --- a/.github/workflows/site-deploy.yml +++ b/.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: | diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index a263110e3e..760f34640a 100644 --- a/.github/workflows/test.yml +++ b/.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: | diff --git a/.github/workflows/ui.yml b/.github/workflows/ui.yml index be7cdf6d24..1bd7251ea6 100644 --- a/.github/workflows/ui.yml +++ b/.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: | diff --git a/.jest.js b/.jest.js index 07b70daa3d..1e96c6f9ab 100644 --- a/.jest.js +++ b/.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', + }, }; diff --git a/package.json b/package.json index edd1374946..6fd2de6e95 100644 --- a/package.json +++ b/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", diff --git a/tests/setup.js b/tests/setup.js index 28c0ac9e0c..0e356c1f11 100644 --- a/tests/setup.js +++ b/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'); diff --git a/tests/shared/imageTest.tsx b/tests/shared/imageTest.tsx index 0471a5ad8b..a1c9345101 100644 --- a/tests/shared/imageTest.tsx +++ b/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'; diff --git a/typings/jest-image-snapshot.d.ts b/typings/jest-image-snapshot.d.ts new file mode 100644 index 0000000000..9016c3c9f7 --- /dev/null +++ b/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 +// erbridge +// Piotr Błażejewicz +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 3.8 + +/// + +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 | 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( + originalSnapshotState: TObject, + partialSnapshotState: TPartial, + ): TObject & TPartial; + + declare global { + namespace jest { + interface Matchers { + toMatchImageSnapshot(options?: MatchImageSnapshotOptions): R; + } + } + } +}