chore: Introduce customer jest match to support matchRenderedSnapshot (#22947)

* Introduce customer jest match to support matchRenderedSnapshot

* lint:tsc stop emiting

.jest.js

@@ -10,6 +10,7 @@ const transformIgnorePatterns = [
 module.exports = {
   verbose: true,
   setupFiles: ['./tests/setup.js'],
+  setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'],
   modulePathIgnorePatterns: ['/_site/'],
   moduleNameMapper: {

.jest.node.js

@@ -3,6 +3,7 @@ const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');
 // jest config for server render environment
 module.exports = {
   setupFiles: ['./tests/setup.js'],
+  setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'md'],
   moduleNameMapper,
   transform: {

components/button/__tests__/index.test.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { render, mount } from 'enzyme';
+import { mount } from 'enzyme';
 import renderer from 'react-test-renderer';
 import { SearchOutlined } from '@ant-design/icons';
 import Button from '..';
@@ -26,8 +26,7 @@ describe('Button', () => {
   rtlTest(() => <Button.Group size="middle" />);
 
   it('renders correctly', () => {
-    const wrapper = render(<Button>Follow</Button>);
+    expect(<Button>Follow</Button>).toMatchRenderedSnapshot();
-    expect(wrapper).toMatchSnapshot();
   });
 
   it('mount correctly', () => {
@@ -45,40 +44,33 @@ describe('Button', () => {
   });
 
   it('renders Chinese characters correctly', () => {
-    const wrapper = render(<Button>按钮</Button>);
+    expect(<Button>按钮</Button>).toMatchRenderedSnapshot();
-    expect(wrapper).toMatchSnapshot();
     // should not insert space when there is icon
-    const wrapper1 = render(<Button icon={<SearchOutlined />}>按钮</Button>);
+    expect(<Button icon={<SearchOutlined />}>按钮</Button>).toMatchRenderedSnapshot();
-    expect(wrapper1).toMatchSnapshot();
     // should not insert space when there is icon
-    const wrapper2 = render(
+    expect(
       <Button>
         <SearchOutlined />
         按钮
       </Button>,
-    );
+    ).toMatchRenderedSnapshot();
-    expect(wrapper2).toMatchSnapshot();
     // should not insert space when there is icon
-    const wrapper3 = render(<Button icon={<SearchOutlined />}>按钮</Button>);
+    expect(<Button icon={<SearchOutlined />}>按钮</Button>).toMatchRenderedSnapshot();
-    expect(wrapper3).toMatchSnapshot();
     // should not insert space when there is icon while loading
-    const wrapper4 = render(
+    expect(
       <Button icon={<SearchOutlined />} loading>
         按钮
       </Button>,
-    );
+    ).toMatchRenderedSnapshot();
-    expect(wrapper4).toMatchSnapshot();
     // should insert space while loading
-    const wrapper5 = render(<Button loading>按钮</Button>);
+    expect(<Button loading>按钮</Button>).toMatchRenderedSnapshot();
-    expect(wrapper5).toMatchSnapshot();
 
     // should insert space while only one nested element
-    const wrapper6 = render(
+    expect(
       <Button>
         <span>按钮</span>
       </Button>,
-    );
+    ).toMatchRenderedSnapshot();
-    expect(wrapper6).toMatchSnapshot();
   });
 
   it('renders Chinese characters correctly in HOC', () => {
@@ -103,8 +95,7 @@ describe('Button', () => {
 
   // https://github.com/ant-design/ant-design/issues/18118
   it('should not insert space to link button', () => {
-    const wrapper = render(<Button type="link">按钮</Button>);
+    expect(<Button type="link">按钮</Button>).toMatchRenderedSnapshot();
-    expect(wrapper).toMatchSnapshot();
   });
 
   it('should render empty button without errors', () => {
@@ -191,12 +182,9 @@ describe('Button', () => {
   });
 
   it('fixbug renders {0} , 0 and {false}', () => {
-    const wrapper = render(<Button>{0}</Button>);
+    expect(<Button>{0}</Button>).toMatchRenderedSnapshot();
-    expect(wrapper).toMatchSnapshot();
+    expect(<Button>0</Button>).toMatchRenderedSnapshot();
-    const wrapper1 = render(<Button>0</Button>);
+    expect(<Button>{false}</Button>).toMatchRenderedSnapshot();
-    expect(wrapper1).toMatchSnapshot();
-    const wrapper2 = render(<Button>{false}</Button>);
-    expect(wrapper2).toMatchSnapshot();
   });
 
   it('should has click wave effect', async () => {

package.json

@@ -65,7 +65,7 @@
     "lint:md": "remark components/",
     "lint:script": "eslint . --ext '.js,.jsx,.ts,.tsx'",
     "lint:style": "stylelint '{site,components}/**/*.less' --syntax less",
-    "lint:tsc": "npm run tsc",
+    "lint:tsc": "npm run tsc -- --noEmit",
     "pre-publish": "npm run check-commit && npm run test-all",
     "prettier": "prettier -c --write '**/*'",
     "pretty-quick": "pretty-quick",
@@ -148,6 +148,7 @@
     "@qixian.cs/github-contributors-list": "^1.0.3",
     "@stackblitz/sdk": "^1.3.0",
     "@types/classnames": "^2.2.8",
+    "@types/enzyme": "^3.10.5",
     "@types/gtag.js": "^0.0.3",
     "@types/jest": "^25.1.0",
     "@types/lodash": "^4.14.139",

tests/matchers/rendered-snapshot.ts

@@ -0,0 +1,21 @@
+import { render } from 'enzyme';
+import { ReactElement } from 'react';
+
+export default function toMatchRenderedSnapshot(
+  this: jest.MatcherUtils,
+  jsx: ReactElement<unknown>,
+): { message(): string; pass: boolean } {
+  try {
+    expect(render(jsx)).toMatchSnapshot();
+
+    return {
+      message: () => 'expected JSX not to match snapshot',
+      pass: true,
+    };
+  } catch (e) {
+    return {
+      message: () => `expected JSX to match snapshot: ${e.message}`,
+      pass: false,
+    };
+  }
+}

tests/setupAfterEnv.ts

@@ -0,0 +1,5 @@
+import toMatchRenderedSnapshot from './matchers/rendered-snapshot';
+
+expect.extend({
+  toMatchRenderedSnapshot,
+});

tests/shared/rtlTest.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Moment from 'moment';
 import MockDate from 'mockdate';
-import { render, mount } from 'enzyme';
+import { mount } from 'enzyme';
 import ConfigProvider from '../../components/config-provider';
 
 // eslint-disable-next-line jest/no-export
@@ -16,7 +16,7 @@ export default function rtlTest(Component, mockDate) {
           <Component />
         </ConfigProvider>,
       );
-      expect(render(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchRenderedSnapshot();
       if (mockDate) {
         MockDate.reset();
       }

typings/jest.d.ts

@@ -0,0 +1,5 @@
+declare namespace jest {
+  interface Matchers<R> {
+    toMatchRenderedSnapshot(): R;
+  }
+}