test: fix ci warnings (#33160)

components/alert/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,77 +1,238 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Alert action of Alert custom action 1`] = `
-<div
-  class="ant-alert ant-alert-success"
-  data-show="true"
-  role="alert"
->
-  <span
-    aria-label="check-circle"
-    class="anticon anticon-check-circle ant-alert-icon"
-    role="img"
-  >
-    <svg
-      aria-hidden="true"
-      data-icon="check-circle"
-      fill="currentColor"
-      focusable="false"
-      height="1em"
-      viewBox="64 64 896 896"
-      width="1em"
-    >
-      <path
-        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-      />
-    </svg>
-  </span>
-  <div
-    class="ant-alert-content"
-  >
-    <div
-      class="ant-alert-message"
-    >
-      Success Tips
-    </div>
-  </div>
-  <div
-    class="ant-alert-action"
-  >
-    <button
-      class="ant-btn ant-btn-text ant-btn-sm"
-      type="button"
+<Alert
+  action={
+    <Button
+      size="small"
+      type="text"
     >
-      <span>
-        UNDO
-      </span>
-    </button>
-  </div>
-  <button
-    class="ant-alert-close-icon"
-    tabindex="0"
-    type="button"
+      UNDO
+    </Button>
+  }
+  closable={true}
+  message="Success Tips"
+  showIcon={true}
+  type="success"
+>
+  <CSSMotion
+    motionAppear={false}
+    motionEnter={false}
+    motionName="ant-alert-motion"
+    onLeaveStart={[Function]}
+    visible={true}
   >
-    <span
-      aria-label="close"
-      class="anticon anticon-close"
-      role="img"
-    >
-      <svg
-        aria-hidden="true"
-        data-icon="close"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+    <DomWrapper>
+      <div
+        className="ant-alert ant-alert-success"
+        data-show={true}
+        role="alert"
+        style={Object {}}
       >
-        <path
-          d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-        />
-      </svg>
-    </span>
-  </button>
-</div>
+        <ForwardRef(CheckCircleFilled)
+          className="ant-alert-icon"
+        >
+          <AntdIcon
+            className="ant-alert-icon"
+            icon={
+              Object {
+                "icon": Object {
+                  "attrs": Object {
+                    "focusable": "false",
+                    "viewBox": "64 64 896 896",
+                  },
+                  "children": Array [
+                    Object {
+                      "attrs": Object {
+                        "d": "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z",
+                      },
+                      "tag": "path",
+                    },
+                  ],
+                  "tag": "svg",
+                },
+                "name": "check-circle",
+                "theme": "filled",
+              }
+            }
+          >
+            <span
+              aria-label="check-circle"
+              className="anticon anticon-check-circle ant-alert-icon"
+              role="img"
+            >
+              <IconReact
+                icon={
+                  Object {
+                    "icon": Object {
+                      "attrs": Object {
+                        "focusable": "false",
+                        "viewBox": "64 64 896 896",
+                      },
+                      "children": Array [
+                        Object {
+                          "attrs": Object {
+                            "d": "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z",
+                          },
+                          "tag": "path",
+                        },
+                      ],
+                      "tag": "svg",
+                    },
+                    "name": "check-circle",
+                    "theme": "filled",
+                  }
+                }
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="check-circle"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  key="svg-check-circle"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+                    key="svg-check-circle-svg-0"
+                  />
+                </svg>
+              </IconReact>
+            </span>
+          </AntdIcon>
+        </ForwardRef(CheckCircleFilled)>
+        <div
+          className="ant-alert-content"
+        >
+          <div
+            className="ant-alert-message"
+          >
+            Success Tips
+          </div>
+        </div>
+        <div
+          className="ant-alert-action"
+        >
+          <Button
+            size="small"
+            type="text"
+          >
+            <button
+              className="ant-btn ant-btn-text ant-btn-sm"
+              onClick={[Function]}
+              type="button"
+            >
+              <LoadingIcon
+                existIcon={false}
+                loading={false}
+                prefixCls="ant-btn"
+              >
+                <CSSMotion
+                  motionName="ant-btn-loading-icon-motion"
+                  onAppearActive={[Function]}
+                  onAppearStart={[Function]}
+                  onEnterActive={[Function]}
+                  onEnterStart={[Function]}
+                  onLeaveActive={[Function]}
+                  onLeaveStart={[Function]}
+                  removeOnLeave={true}
+                  visible={false}
+                >
+                  <DomWrapper />
+                </CSSMotion>
+              </LoadingIcon>
+              <span
+                key=".0"
+              >
+                UNDO
+              </span>
+            </button>
+          </Button>
+        </div>
+        <button
+          className="ant-alert-close-icon"
+          onClick={[Function]}
+          tabIndex={0}
+          type="button"
+        >
+          <ForwardRef(CloseOutlined)>
+            <AntdIcon
+              icon={
+                Object {
+                  "icon": Object {
+                    "attrs": Object {
+                      "focusable": "false",
+                      "viewBox": "64 64 896 896",
+                    },
+                    "children": Array [
+                      Object {
+                        "attrs": Object {
+                          "d": "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z",
+                        },
+                        "tag": "path",
+                      },
+                    ],
+                    "tag": "svg",
+                  },
+                  "name": "close",
+                  "theme": "outlined",
+                }
+              }
+            >
+              <span
+                aria-label="close"
+                className="anticon anticon-close"
+                role="img"
+              >
+                <IconReact
+                  icon={
+                    Object {
+                      "icon": Object {
+                        "attrs": Object {
+                          "focusable": "false",
+                          "viewBox": "64 64 896 896",
+                        },
+                        "children": Array [
+                          Object {
+                            "attrs": Object {
+                              "d": "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z",
+                            },
+                            "tag": "path",
+                          },
+                        ],
+                        "tag": "svg",
+                      },
+                      "name": "close",
+                      "theme": "outlined",
+                    }
+                  }
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    key="svg-close"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                      key="svg-close-svg-0"
+                    />
+                  </svg>
+                </IconReact>
+              </span>
+            </AntdIcon>
+          </ForwardRef(CloseOutlined)>
+        </button>
+      </div>
+    </DomWrapper>
+  </CSSMotion>
+</Alert>
 `;
 
 exports[`Alert could accept none react element icon 1`] = `

components/alert/__tests__/index.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { mount, render } from 'enzyme';
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import Alert from '..';
 import Button from '../../button';
 import Tooltip from '../../tooltip';
@@ -32,14 +33,18 @@ describe('Alert', () => {
         onClose={onClose}
       />,
     );
-    wrapper.find('.ant-alert-close-icon').simulate('click');
-    jest.runAllTimers();
+    act(() => {
+      jest.useFakeTimers();
+      wrapper.find('.ant-alert-close-icon').simulate('click');
+      jest.runAllTimers();
+      jest.useRealTimers();
+    });
     expect(onClose).toHaveBeenCalled();
   });
 
   describe('action of Alert', () => {
     it('custom action', () => {
-      const wrapper = render(
+      const wrapper = mount(
         <Alert
           message="Success Tips"
           type="success"
@@ -131,7 +136,7 @@ describe('Alert', () => {
 
   it('could accept none react element icon', () => {
     const wrapper = mount(<Alert message="Success Tips" type="success" showIcon icon="icon" />);
-    expect(wrapper).toMatchRenderedSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('should not render message div when no message', () => {

components/auto-complete/__tests__/__snapshots__/index.test.js.snap

@@ -11,14 +11,15 @@ exports[`AutoComplete legacy dataSource should accept react element option 1`] =
       class="ant-select-selection-search"
     >
       <input
-        aria-activedescendant="undefined_list_0"
+        aria-activedescendant="rc_select_TEST_OR_SSR_list_-1"
         aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_TEST_OR_SSR_list"
         aria-expanded="true"
         aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_TEST_OR_SSR_list"
         autocomplete="off"
         class="ant-select-selection-search-input"
+        id="rc_select_TEST_OR_SSR"
         role="combobox"
         type="search"
         value=""
@@ -30,19 +31,19 @@ exports[`AutoComplete legacy dataSource should accept react element option 1`] =
   </div>
   <div>
     <div
-      class="ant-select-dropdown"
-      style="opacity:0;pointer-events:none"
+      class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+      style="opacity: 0; pointer-events: none; min-width: 0; width: 0px;"
     >
       <div>
         <div
-          id="undefined_list"
+          id="rc_select_TEST_OR_SSR_list"
           role="listbox"
-          style="height:0;width:0;overflow:hidden"
+          style="height: 0px; width: 0px; overflow: hidden;"
         >
           <div
             aria-label="ReactNode"
             aria-selected="false"
-            id="undefined_list_0"
+            id="rc_select_TEST_OR_SSR_list_0"
             role="option"
           >
             key
@@ -50,20 +51,20 @@ exports[`AutoComplete legacy dataSource should accept react element option 1`] =
         </div>
         <div
           class="rc-virtual-list"
-          style="position:relative"
+          style="position: relative;"
         >
           <div
             class="rc-virtual-list-holder"
-            style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+            style="max-height: 256px; overflow-y: auto;"
           >
             <div>
               <div
                 class="rc-virtual-list-holder-inner"
-                style="display:flex;flex-direction:column"
+                style="display: flex; flex-direction: column;"
               >
                 <div
                   aria-selected="false"
-                  class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                  class="ant-select-item ant-select-item-option"
                   title="ReactNode"
                 >
                   <div
@@ -74,7 +75,7 @@ exports[`AutoComplete legacy dataSource should accept react element option 1`] =
                   <span
                     aria-hidden="true"
                     class="ant-select-item-option-state"
-                    style="user-select:none;-webkit-user-select:none"
+                    style="user-select: none;"
                     unselectable="on"
                   />
                 </div>
@@ -99,13 +100,14 @@ exports[`AutoComplete rtl render component should be rendered correctly in RTL d
       class="ant-select-selection-search"
     >
       <input
-        aria-activedescendant="undefined_list_0"
+        aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
         aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_TEST_OR_SSR_list"
         aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_TEST_OR_SSR_list"
         autocomplete="off"
         class="ant-select-selection-search-input"
+        id="rc_select_TEST_OR_SSR"
         role="combobox"
         type="search"
         value=""

components/auto-complete/__tests__/index.test.js

@@ -56,7 +56,7 @@ describe('AutoComplete', () => {
 
   it('legacy dataSource should accept react element option', () => {
     const wrapper = mount(<AutoComplete open dataSource={[<span key="key">ReactNode</span>]} />);
-    expect(wrapper).toMatchRenderedSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('legacy AutoComplete.Option should be compatiable', () => {

components/avatar/__tests__/Avatar.test.js

@@ -155,7 +155,7 @@ describe('Avatar Render', () => {
 
   it('support size is number', () => {
     const wrapper = mount(<Avatar size={100}>TestString</Avatar>);
-    expect(wrapper).toMatchRenderedSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   Object.entries(sizes).forEach(([key, value]) => {
@@ -189,7 +189,7 @@ describe('Avatar Render', () => {
     );
     wrapper.find('img').simulate('error');
     wrapper.update();
-    expect(wrapper).toMatchRenderedSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
     wrapper.detach();
     global.document.body.removeChild(div);
   });

components/avatar/__tests__/__snapshots__/Avatar.test.js.snap

@@ -86,11 +86,14 @@ exports[`Avatar Render adjusts component size to 100 when window size is xxl 1`]
 
 exports[`Avatar Render fallback 1`] = `
 <span
-  class="ant-avatar ant-avatar-circle ant-avatar-image"
+  class="ant-avatar ant-avatar-circle"
 >
-  <img
-    src="http://error.url"
-  />
+  <span
+    class="ant-avatar-string"
+    style="transform: scale(1) translateX(-50%);"
+  >
+    A
+  </span>
 </span>
 `;
 
@@ -100,7 +103,7 @@ exports[`Avatar Render rtl render component should be rendered correctly in RTL
 >
   <span
     class="ant-avatar-string"
-    style="opacity:0"
+    style="transform: scale(0.72) translateX(-50%);"
   />
 </span>
 `;
@@ -229,11 +232,11 @@ exports[`Avatar Render should show image on success after a failure state 2`] =
 exports[`Avatar Render support size is number 1`] = `
 <span
   class="ant-avatar ant-avatar-circle"
-  style="width:100px;height:100px;line-height:100px;font-size:18px"
+  style="width: 100px; height: 100px; line-height: 100px; font-size: 18px;"
 >
   <span
     class="ant-avatar-string"
-    style="opacity:0"
+    style="line-height: 100px; transform: scale(0.32) translateX(-50%);"
   >
     TestString
   </span>

components/badge/__tests__/__snapshots__/index.test.js.snap

@@ -173,12 +173,12 @@ exports[`Badge rtl render component should be rendered correctly in RTL directio
   <sup
     class="ant-scroll-number ant-badge-count"
     data-show="true"
-    style="margin-top:10px;left:10px"
+    style="margin-top: 10px; left: 10px;"
     title="5"
   >
     <span
       class="ant-scroll-number-only"
-      style="transition:none"
+      style="transition: none;"
     >
       <span
         class="ant-scroll-number-only-unit current"

components/button/__tests__/__snapshots__/index.test.tsx.snap

@@ -69,63 +69,18 @@ exports[`Button renders Chinese characters correctly 2`] = `
 `;
 
 exports[`Button renders Chinese characters correctly 3`] = `
-<button
-  class="ant-btn"
-  type="button"
->
-  <span
-    aria-label="search"
-    class="anticon anticon-search"
-    role="img"
-  >
-    <svg
-      aria-hidden="true"
-      data-icon="search"
-      fill="currentColor"
-      focusable="false"
-      height="1em"
-      viewBox="64 64 896 896"
-      width="1em"
-    >
-      <path
-        d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-      />
-    </svg>
-  </span>
-  <span>
-    按钮
-  </span>
-</button>
+<Button>
+  <ForwardRef(SearchOutlined) />
+  按钮
+</Button>
 `;
 
 exports[`Button renders Chinese characters correctly 4`] = `
-<button
-  class="ant-btn"
-  type="button"
+<Button
+  icon={<ForwardRef(SearchOutlined) />}
 >
-  <span
-    aria-label="search"
-    class="anticon anticon-search"
-    role="img"
-  >
-    <svg
-      aria-hidden="true"
-      data-icon="search"
-      fill="currentColor"
-      focusable="false"
-      height="1em"
-      viewBox="64 64 896 896"
-      width="1em"
-    >
-      <path
-        d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-      />
-    </svg>
-  </span>
-  <span>
-    按钮
-  </span>
-</button>
+  按钮
+</Button>
 `;
 
 exports[`Button renders Chinese characters correctly 5`] = `
@@ -169,10 +124,11 @@ exports[`Button renders Chinese characters correctly 6`] = `
 >
   <span
     class="ant-btn-loading-icon"
+    style="width: 0px; opacity: 0; transform: scale(0);"
   >
     <span
       aria-label="loading"
-      class="anticon anticon-loading anticon-spin"
+      class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
       role="img"
     >
       <svg

components/button/__tests__/index.test.tsx

@@ -28,7 +28,7 @@ describe('Button', () => {
   rtlTest(() => <Button.Group size="middle" />);
 
   it('renders correctly', () => {
-    expect(<Button>Follow</Button>).toMatchRenderedSnapshot();
+    expect(mount(<Button>Follow</Button>).render()).toMatchSnapshot();
   });
 
   it('mount correctly', () => {
@@ -47,33 +47,37 @@ describe('Button', () => {
   });
 
   it('renders Chinese characters correctly', () => {
-    expect(<Button>按钮</Button>).toMatchRenderedSnapshot();
+    expect(mount(<Button>按钮</Button>).render()).toMatchSnapshot();
     // should not insert space when there is icon
-    expect(<Button icon={<SearchOutlined />}>按钮</Button>).toMatchRenderedSnapshot();
+    expect(mount(<Button icon={<SearchOutlined />}>按钮</Button>).render()).toMatchSnapshot();
     // should not insert space when there is icon
     expect(
       <Button>
         <SearchOutlined />
         按钮
       </Button>,
-    ).toMatchRenderedSnapshot();
+    ).toMatchSnapshot();
     // should not insert space when there is icon
-    expect(<Button icon={<SearchOutlined />}>按钮</Button>).toMatchRenderedSnapshot();
+    expect(<Button icon={<SearchOutlined />}>按钮</Button>).toMatchSnapshot();
     // should not insert space when there is icon while loading
     expect(
-      <Button icon={<SearchOutlined />} loading>
-        按钮
-      </Button>,
-    ).toMatchRenderedSnapshot();
+      mount(
+        <Button icon={<SearchOutlined />} loading>
+          按钮
+        </Button>,
+      ).render(),
+    ).toMatchSnapshot();
     // should insert space while loading
-    expect(<Button loading>按钮</Button>).toMatchRenderedSnapshot();
+    expect(mount(<Button loading>按钮</Button>).render()).toMatchSnapshot();
 
     // should insert space while only one nested element
     expect(
-      <Button>
-        <span>按钮</span>
-      </Button>,
-    ).toMatchRenderedSnapshot();
+      mount(
+        <Button>
+          <span>按钮</span>
+        </Button>,
+      ).render(),
+    ).toMatchSnapshot();
   });
 
   it('renders Chinese characters correctly in HOC', () => {
@@ -206,9 +210,9 @@ describe('Button', () => {
   });
 
   it('fixbug renders {0} , 0 and {false}', () => {
-    expect(<Button>{0}</Button>).toMatchRenderedSnapshot();
-    expect(<Button>0</Button>).toMatchRenderedSnapshot();
-    expect(<Button>{false}</Button>).toMatchRenderedSnapshot();
+    expect(mount(<Button>{0}</Button>).render()).toMatchSnapshot();
+    expect(mount(<Button>0</Button>).render()).toMatchSnapshot();
+    expect(mount(<Button>{false}</Button>).render()).toMatchSnapshot();
   });
 
   it('should not render as link button when href is undefined', async () => {
@@ -320,6 +324,6 @@ describe('Button', () => {
         <>text</>
       </Button>,
     );
-    expect(wrapper).toMatchRenderedSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 });

components/calendar/__tests__/__snapshots__/index.test.js.snap

@@ -1905,16 +1905,17 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
           class="ant-select-selection-search"
         >
           <input
-            aria-activedescendant="undefined_list_0"
+            aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
             aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_TEST_OR_SSR_list"
             aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_TEST_OR_SSR_list"
             autocomplete="off"
             class="ant-select-selection-search-input"
+            id="rc_select_TEST_OR_SSR"
             readonly=""
             role="combobox"
-            style="opacity:0"
+            style="opacity: 0;"
             type="search"
             unselectable="on"
             value=""
@@ -1930,7 +1931,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
       <span
         aria-hidden="true"
         class="ant-select-arrow"
-        style="user-select:none;-webkit-user-select:none"
+        style="user-select: none;"
         unselectable="on"
       >
         <span
@@ -1964,16 +1965,17 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
           class="ant-select-selection-search"
         >
           <input
-            aria-activedescendant="undefined_list_0"
+            aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
             aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_TEST_OR_SSR_list"
             aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_TEST_OR_SSR_list"
             autocomplete="off"
             class="ant-select-selection-search-input"
+            id="rc_select_TEST_OR_SSR"
             readonly=""
             role="combobox"
-            style="opacity:0"
+            style="opacity: 0;"
             type="search"
             unselectable="on"
             value=""
@@ -1989,7 +1991,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
       <span
         aria-hidden="true"
         class="ant-select-arrow"
-        style="user-select:none;-webkit-user-select:none"
+        style="user-select: none;"
         unselectable="on"
       >
         <span

components/carousel/__tests__/__snapshots__/index.test.js.snap

@@ -12,7 +12,7 @@ exports[`Carousel rtl render component should be rendered correctly in RTL direc
     >
       <div
         class="slick-track"
-        style="width:0%;left:NaN%"
+        style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
       />
     </div>
   </div>

components/cascader/__tests__/__snapshots__/index.test.js.snap

@@ -1264,16 +1264,17 @@ exports[`Cascader rtl render component should be rendered correctly in RTL direc
       class="ant-select-selection-search"
     >
       <input
-        aria-activedescendant="undefined_list_0"
+        aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
         aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_TEST_OR_SSR_list"
         aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_TEST_OR_SSR_list"
         autocomplete="off"
         class="ant-select-selection-search-input"
+        id="rc_select_TEST_OR_SSR"
         readonly=""
         role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
         type="search"
         unselectable="on"
         value=""
@@ -1286,7 +1287,7 @@ exports[`Cascader rtl render component should be rendered correctly in RTL direc
   <span
     aria-hidden="true"
     class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
     unselectable="on"
   >
     <span

components/checkbox/__tests__/__snapshots__/checkbox.test.js.snap

@@ -10,6 +10,7 @@ exports[`Checkbox rtl render component should be rendered correctly in RTL direc
     <input
       class="ant-checkbox-input"
       type="checkbox"
+      value=""
     />
     <span
       class="ant-checkbox-inner"

components/comment/__tests__/index.test.js

@@ -23,6 +23,6 @@ describe('Comment', () => {
         datetime="YYYY-MM-DD HH:mm:ss"
       />,
     );
-    expect(wrapper).toMatchRenderedSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 });

components/config-provider/__tests__/form.test.js

@@ -88,7 +88,7 @@ describe('ConfigProvider.Form', () => {
         </ConfigProvider>,
       );
 
-      expect(wrapper).toMatchRenderedSnapshot();
+      expect(wrapper.render()).toMatchSnapshot();
     });
   });
 });

components/config-provider/__tests__/index.test.js

@@ -113,6 +113,6 @@ describe('ConfigProvider', () => {
       </ConfigProvider>,
     );
 
-    expect(wrapper).toMatchRenderedSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 });

components/date-picker/__tests__/RangePicker.test.js

@@ -87,7 +87,7 @@ describe('RangePicker', () => {
           open
         />,
       );
-      expect(wrapper).toMatchRenderedSnapshot();
+      expect(wrapper.render()).toMatchSnapshot();
     });
   });
 

components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap

@@ -118,7 +118,7 @@ Array [
     </div>
     <div
       class="ant-picker-active-bar"
-      style="left:0;width:0;position:absolute"
+      style="left: 0px; width: 0px; position: absolute;"
     />
     <span
       class="ant-picker-suffix"
@@ -146,20 +146,20 @@ Array [
   </div>,
   <div>
     <div
-      class="ant-picker-dropdown ant-picker-dropdown-range"
-      style="opacity:0;pointer-events:none"
+      class="ant-picker-dropdown ant-picker-dropdown-range ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+      style="opacity: 0; pointer-events: none;"
     >
       <div
         class="ant-picker-range-wrapper ant-picker-date-range-wrapper"
-        style="min-width:0"
+        style="min-width: 0;"
       >
         <div
           class="ant-picker-range-arrow"
-          style="left:0"
+          style="left: 0px;"
         />
         <div
           class="ant-picker-panel-container"
-          style="margin-left:0"
+          style="margin-left: 0px;"
         >
           <div
             class="ant-picker-panels"
@@ -212,7 +212,7 @@ Array [
                   </div>
                   <button
                     class="ant-picker-header-next-btn"
-                    style="visibility:hidden"
+                    style="visibility: hidden;"
                     tabindex="-1"
                     type="button"
                   >
@@ -222,7 +222,7 @@ Array [
                   </button>
                   <button
                     class="ant-picker-header-super-next-btn"
-                    style="visibility:hidden"
+                    style="visibility: hidden;"
                     tabindex="-1"
                     type="button"
                   >
@@ -712,7 +712,7 @@ Array [
                 >
                   <button
                     class="ant-picker-header-super-prev-btn"
-                    style="visibility:hidden"
+                    style="visibility: hidden;"
                     tabindex="-1"
                     type="button"
                   >
@@ -722,7 +722,7 @@ Array [
                   </button>
                   <button
                     class="ant-picker-header-prev-btn"
-                    style="visibility:hidden"
+                    style="visibility: hidden;"
                     tabindex="-1"
                     type="button"
                   >

components/date-picker/__tests__/__snapshots__/mount.test.js.snap

@@ -182,7 +182,7 @@ exports[`mount rtl render component should be rendered correctly in RTL directio
   </div>
   <div
     class="ant-picker-active-bar"
-    style="right:0;width:0;position:absolute"
+    style="right: 0px; width: 0px; position: absolute;"
   />
   <span
     class="ant-picker-suffix"

components/dropdown/__tests__/__snapshots__/index.test.js.snap

@@ -10,8 +10,8 @@ Array [
   </button>,
   <div>
     <div
-      class="ant-dropdown"
-      style="opacity:0;pointer-events:none"
+      class="ant-dropdown move-up-appear move-up-appear-prepare move-up"
+      style="opacity: 0; pointer-events: none;"
     >
       <div>
         menu
@@ -31,8 +31,8 @@ Array [
   </button>,
   <div>
     <div
-      class="ant-dropdown"
-      style="opacity:0;pointer-events:none"
+      class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+      style="opacity: 0; pointer-events: none;"
     >
       <span>
         string

components/dropdown/__tests__/index.test.js

@@ -25,7 +25,7 @@ describe('Dropdown', () => {
         <button type="button">button</button>
       </Dropdown>,
     );
-    expect(wrapper).toMatchRenderedSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('overlay is string', () => {
@@ -34,7 +34,7 @@ describe('Dropdown', () => {
         <button type="button">button</button>
       </Dropdown>,
     );
-    expect(wrapper).toMatchRenderedSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('support Menu expandIcon', async () => {

components/form/__tests__/index.test.js

@@ -796,7 +796,7 @@ describe('Form', () => {
           </Form.Item>
         </Form>,
       );
-      expect(wrapper).toMatchRenderedSnapshot();
+      expect(wrapper.render()).toMatchSnapshot();
     });
 
     it('noStyle should not work when hidden', () => {
@@ -807,7 +807,7 @@ describe('Form', () => {
           </Form.Item>
         </Form>,
       );
-      expect(wrapper).toMatchRenderedSnapshot();
+      expect(wrapper.render()).toMatchSnapshot();
     });
   });
 

components/layout/__tests__/__snapshots__/index.test.js.snap

@@ -28,7 +28,7 @@ exports[`Layout rtl render component should be rendered correctly in RTL directi
 exports[`Layout rtl render component should be rendered correctly in RTL direction 3`] = `
 <aside
   class="ant-layout-sider ant-layout-sider-dark"
-  style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+  style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"
 >
   <div
     class="ant-layout-sider-children"

components/menu/__tests__/__snapshots__/index.test.js.snap

@@ -173,6 +173,7 @@ Array [
   >
     <li
       class="ant-menu-item"
+      data-menu-id="rc-menu-uuid-test-tmp_key-0"
       role="menuitem"
       tabindex="-1"
     >
@@ -195,9 +196,11 @@ Array [
       role="none"
     >
       <div
+        aria-controls="rc-menu-uuid-test-tmp_key-2-popup"
         aria-expanded="false"
         aria-haspopup="true"
         class="ant-menu-submenu-title"
+        data-menu-id="rc-menu-uuid-test-tmp_key-2"
         role="menuitem"
         tabindex="-1"
       >
@@ -212,7 +215,7 @@ Array [
   </ul>,
   <div
     aria-hidden="true"
-    style="display:none"
+    style="display: none;"
   />,
 ]
 `;

components/progress/__tests__/__snapshots__/index.test.js.snap

@@ -727,7 +727,7 @@ exports[`Progress rtl render component should be rendered correctly in RTL direc
     >
       <div
         class="ant-progress-bg"
-        style="width:0%;height:8px;border-radius:"
+        style="width: 0%; height: 8px;"
       />
     </div>
   </div>
@@ -749,15 +749,15 @@ exports[`Progress should support steps 1`] = `
   >
     <div
       class="ant-progress-steps-item"
-      style="width:14px;height:8px"
+      style="width: 14px; height: 8px;"
     />
     <div
       class="ant-progress-steps-item"
-      style="width:14px;height:8px"
+      style="width: 14px; height: 8px;"
     />
     <div
       class="ant-progress-steps-item"
-      style="width:14px;height:8px"
+      style="width: 14px; height: 8px;"
     />
     <span
       class="ant-progress-text"

components/progress/__tests__/index.test.js

@@ -158,7 +158,7 @@ describe('Progress', () => {
 
   it('should support steps', () => {
     const wrapper = mount(<Progress steps={3} />);
-    expect(wrapper).toMatchRenderedSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('steps should be changable', () => {

components/radio/__tests__/__snapshots__/radio.test.js.snap

@@ -10,6 +10,7 @@ exports[`Radio rtl render component should be rendered correctly in RTL directio
     <input
       class="ant-radio-input"
       type="radio"
+      value=""
     />
     <span
       class="ant-radio-inner"
@@ -34,6 +35,7 @@ exports[`Radio rtl render component should be rendered correctly in RTL directio
     <input
       class="ant-radio-button-input"
       type="radio"
+      value=""
     />
     <span
       class="ant-radio-button-inner"

components/select/__tests__/__snapshots__/index.test.js.snap

@@ -132,16 +132,17 @@ exports[`Select rtl render component should be rendered correctly in RTL directi
       class="ant-select-selection-search"
     >
       <input
-        aria-activedescendant="undefined_list_0"
+        aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
         aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_TEST_OR_SSR_list"
         aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_TEST_OR_SSR_list"
         autocomplete="off"
         class="ant-select-selection-search-input"
+        id="rc_select_TEST_OR_SSR"
         readonly=""
         role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
         type="search"
         unselectable="on"
         value=""
@@ -154,7 +155,7 @@ exports[`Select rtl render component should be rendered correctly in RTL directi
   <span
     aria-hidden="true"
     class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
     unselectable="on"
   >
     <span

components/skeleton/__tests__/__snapshots__/index.test.js.snap

@@ -466,7 +466,7 @@ exports[`Skeleton rtl render component should be rendered correctly in RTL direc
   >
     <h3
       class="ant-skeleton-title"
-      style="width:38%"
+      style="width: 38%;"
     />
     <ul
       class="ant-skeleton-paragraph"
@@ -474,7 +474,7 @@ exports[`Skeleton rtl render component should be rendered correctly in RTL direc
       <li />
       <li />
       <li
-        style="width:61%"
+        style="width: 61%;"
       />
     </ul>
   </div>

components/slider/__tests__/__snapshots__/index.test.js.snap

@@ -9,7 +9,7 @@ exports[`Slider rtl render component should be rendered correctly in RTL directi
   />
   <div
     class="ant-slider-track"
-    style="right:0%;left:auto;width:0%"
+    style="right: 0%; width: 0%;"
   />
   <div
     class="ant-slider-step"
@@ -21,7 +21,7 @@ exports[`Slider rtl render component should be rendered correctly in RTL directi
     aria-valuenow="0"
     class="ant-slider-handle"
     role="slider"
-    style="right:0%;left:auto;transform:translateX(+50%)"
+    style="right: 0%; transform: translateX(+50%);"
     tabindex="0"
   />
   <div

components/steps/__tests__/__snapshots__/index.test.js.snap

@@ -2,6 +2,6 @@
 
 exports[`Steps rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
-  class="ant-steps ant-steps-horizontal ant-steps-rtl ant-steps-label-horizontal"
+  class="ant-steps ant-steps-vertical ant-steps-rtl"
 />
 `;

components/table/__tests__/__snapshots__/Table.test.js.snap

@@ -126,7 +126,7 @@ exports[`Table rtl render component should be rendered correctly in RTL directio
             class="ant-table-content"
           >
             <table
-              style="table-layout:auto"
+              style="table-layout: auto;"
             >
               <colgroup />
               <thead

components/tabs/__tests__/__snapshots__/index.test.js.snap

@@ -39,14 +39,16 @@ exports[`Tabs rtl render component should be rendered correctly in RTL direction
     >
       <div
         class="ant-tabs-nav-list"
-        style="transform:translate(0px, 0px)"
+        style="transform: translate(0px, 0px);"
       >
         <div
           class="ant-tabs-tab ant-tabs-tab-active"
         >
           <div
+            aria-controls="rc-tabs-test-panel-xx"
             aria-selected="true"
             class="ant-tabs-tab-btn"
+            id="rc-tabs-test-tab-xx"
             role="tab"
             tabindex="0"
           >
@@ -62,13 +64,13 @@ exports[`Tabs rtl render component should be rendered correctly in RTL direction
       class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
     >
       <button
-        aria-controls="null-more-popup"
+        aria-controls="rc-tabs-test-more-popup"
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-hidden="true"
         class="ant-tabs-nav-more"
-        id="null-more"
-        style="visibility:hidden;order:1"
+        id="rc-tabs-test-more"
+        style="visibility: hidden; order: 1;"
         tabindex="-1"
         type="button"
       >
@@ -102,7 +104,9 @@ exports[`Tabs rtl render component should be rendered correctly in RTL direction
     >
       <div
         aria-hidden="false"
+        aria-labelledby="rc-tabs-test-tab-xx"
         class="ant-tabs-tabpane ant-tabs-tabpane-active"
+        id="rc-tabs-test-panel-xx"
         role="tabpanel"
         tabindex="0"
       />
@@ -124,36 +128,42 @@ exports[`Tabs tabBarGutter should work 1`] = `
     >
       <div
         class="ant-tabs-nav-list"
-        style="transform:translate(0px, 0px)"
+        style="transform: translate(0px, 0px);"
       >
         <div
           class="ant-tabs-tab ant-tabs-tab-active"
         >
           <div
+            aria-controls="rc-tabs-test-panel-null"
             aria-selected="true"
             class="ant-tabs-tab-btn"
+            id="rc-tabs-test-tab-null"
             role="tab"
             tabindex="0"
           />
         </div>
         <div
           class="ant-tabs-tab ant-tabs-tab-active"
-          style="margin-left:0"
+          style="margin-left: 0px;"
         >
           <div
+            aria-controls="rc-tabs-test-panel-null"
             aria-selected="true"
             class="ant-tabs-tab-btn"
+            id="rc-tabs-test-tab-null"
             role="tab"
             tabindex="0"
           />
         </div>
         <div
           class="ant-tabs-tab ant-tabs-tab-active"
-          style="margin-left:0"
+          style="margin-left: 0px;"
         >
           <div
+            aria-controls="rc-tabs-test-panel-null"
             aria-selected="true"
             class="ant-tabs-tab-btn"
+            id="rc-tabs-test-tab-null"
             role="tab"
             tabindex="0"
           />
@@ -167,13 +177,13 @@ exports[`Tabs tabBarGutter should work 1`] = `
       class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
     >
       <button
-        aria-controls="null-more-popup"
+        aria-controls="rc-tabs-test-more-popup"
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-hidden="true"
         class="ant-tabs-nav-more"
-        id="null-more"
-        style="margin-left:0;visibility:hidden;order:1"
+        id="rc-tabs-test-more"
+        style="margin-left: 0px; visibility: hidden; order: 1;"
         tabindex="-1"
         type="button"
       >
@@ -207,19 +217,25 @@ exports[`Tabs tabBarGutter should work 1`] = `
     >
       <div
         aria-hidden="false"
+        aria-labelledby="rc-tabs-test-tab-null"
         class="ant-tabs-tabpane ant-tabs-tabpane-active"
+        id="rc-tabs-test-panel-null"
         role="tabpanel"
         tabindex="0"
       />
       <div
         aria-hidden="false"
+        aria-labelledby="rc-tabs-test-tab-null"
         class="ant-tabs-tabpane ant-tabs-tabpane-active"
+        id="rc-tabs-test-panel-null"
         role="tabpanel"
         tabindex="0"
       />
       <div
         aria-hidden="false"
+        aria-labelledby="rc-tabs-test-tab-null"
         class="ant-tabs-tabpane ant-tabs-tabpane-active"
+        id="rc-tabs-test-panel-null"
         role="tabpanel"
         tabindex="0"
       />
@@ -241,36 +257,42 @@ exports[`Tabs tabBarGutter should work 2`] = `
     >
       <div
         class="ant-tabs-nav-list"
-        style="transform:translate(0px, 0px)"
+        style="transform: translate(0px, 0px);"
       >
         <div
           class="ant-tabs-tab ant-tabs-tab-active"
         >
           <div
+            aria-controls="rc-tabs-test-panel-null"
             aria-selected="true"
             class="ant-tabs-tab-btn"
+            id="rc-tabs-test-tab-null"
             role="tab"
             tabindex="0"
           />
         </div>
         <div
           class="ant-tabs-tab ant-tabs-tab-active"
-          style="margin-top:0"
+          style="margin-top: 0px;"
         >
           <div
+            aria-controls="rc-tabs-test-panel-null"
             aria-selected="true"
             class="ant-tabs-tab-btn"
+            id="rc-tabs-test-tab-null"
             role="tab"
             tabindex="0"
           />
         </div>
         <div
           class="ant-tabs-tab ant-tabs-tab-active"
-          style="margin-top:0"
+          style="margin-top: 0px;"
         >
           <div
+            aria-controls="rc-tabs-test-panel-null"
             aria-selected="true"
             class="ant-tabs-tab-btn"
+            id="rc-tabs-test-tab-null"
             role="tab"
             tabindex="0"
           />
@@ -284,13 +306,13 @@ exports[`Tabs tabBarGutter should work 2`] = `
       class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
     >
       <button
-        aria-controls="null-more-popup"
+        aria-controls="rc-tabs-test-more-popup"
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-hidden="true"
         class="ant-tabs-nav-more"
-        id="null-more"
-        style="margin-left:0;visibility:hidden;order:1"
+        id="rc-tabs-test-more"
+        style="margin-left: 0px; visibility: hidden; order: 1;"
         tabindex="-1"
         type="button"
       >
@@ -324,19 +346,25 @@ exports[`Tabs tabBarGutter should work 2`] = `
     >
       <div
         aria-hidden="false"
+        aria-labelledby="rc-tabs-test-tab-null"
         class="ant-tabs-tabpane ant-tabs-tabpane-active"
+        id="rc-tabs-test-panel-null"
         role="tabpanel"
         tabindex="0"
       />
       <div
         aria-hidden="false"
+        aria-labelledby="rc-tabs-test-tab-null"
         class="ant-tabs-tabpane ant-tabs-tabpane-active"
+        id="rc-tabs-test-panel-null"
         role="tabpanel"
         tabindex="0"
       />
       <div
         aria-hidden="false"
+        aria-labelledby="rc-tabs-test-tab-null"
         class="ant-tabs-tabpane ant-tabs-tabpane-active"
+        id="rc-tabs-test-panel-null"
         role="tabpanel"
         tabindex="0"
       />

components/tabs/__tests__/index.test.js

@@ -87,9 +87,21 @@ describe('Tabs', () => {
   });
 
   it('tabBarGutter should work', () => {
-    const wrapper = mount(<Tabs tabBarGutter={0}><TabPane /><TabPane /><TabPane /></Tabs>);
-    expect(wrapper).toMatchRenderedSnapshot();
-    const wrapper2 = mount(<Tabs tabBarGutter={0} tabPosition="left"><TabPane /><TabPane /><TabPane /></Tabs>);
-    expect(wrapper2).toMatchRenderedSnapshot();
+    const wrapper = mount(
+      <Tabs tabBarGutter={0}>
+        <TabPane />
+        <TabPane />
+        <TabPane />
+      </Tabs>,
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+    const wrapper2 = mount(
+      <Tabs tabBarGutter={0} tabPosition="left">
+        <TabPane />
+        <TabPane />
+        <TabPane />
+      </Tabs>,
+    );
+    expect(wrapper2.render()).toMatchSnapshot();
   });
 });

components/transfer/__tests__/__snapshots__/index.test.js.snap

@@ -19,6 +19,7 @@ exports[`Transfer rtl render component should be rendered correctly in RTL direc
           <input
             class="ant-checkbox-input"
             type="checkbox"
+            value=""
           />
           <span
             class="ant-checkbox-inner"
@@ -177,6 +178,7 @@ exports[`Transfer rtl render component should be rendered correctly in RTL direc
           <input
             class="ant-checkbox-input"
             type="checkbox"
+            value=""
           />
           <span
             class="ant-checkbox-inner"
@@ -289,6 +291,7 @@ exports[`Transfer should render correctly 1`] = `
             checked=""
             class="ant-checkbox-input"
             type="checkbox"
+            value=""
           />
           <span
             class="ant-checkbox-inner"
@@ -342,6 +345,7 @@ exports[`Transfer should render correctly 1`] = `
                 checked=""
                 class="ant-checkbox-input"
                 type="checkbox"
+                value=""
               />
               <span
                 class="ant-checkbox-inner"
@@ -365,6 +369,7 @@ exports[`Transfer should render correctly 1`] = `
                 class="ant-checkbox-input"
                 disabled=""
                 type="checkbox"
+                value=""
               />
               <span
                 class="ant-checkbox-inner"
@@ -446,6 +451,7 @@ exports[`Transfer should render correctly 1`] = `
           <input
             class="ant-checkbox-input"
             type="checkbox"
+            value=""
           />
           <span
             class="ant-checkbox-inner"
@@ -498,6 +504,7 @@ exports[`Transfer should render correctly 1`] = `
               <input
                 class="ant-checkbox-input"
                 type="checkbox"
+                value=""
               />
               <span
                 class="ant-checkbox-inner"
@@ -533,6 +540,7 @@ exports[`Transfer should show sorted targetKey 1`] = `
           <input
             class="ant-checkbox-input"
             type="checkbox"
+            value=""
           />
           <span
             class="ant-checkbox-inner"
@@ -586,6 +594,7 @@ exports[`Transfer should show sorted targetKey 1`] = `
               <input
                 class="ant-checkbox-input"
                 type="checkbox"
+                value=""
               />
               <span
                 class="ant-checkbox-inner"
@@ -670,6 +679,7 @@ exports[`Transfer should show sorted targetKey 1`] = `
           <input
             class="ant-checkbox-input"
             type="checkbox"
+            value=""
           />
           <span
             class="ant-checkbox-inner"
@@ -723,6 +733,7 @@ exports[`Transfer should show sorted targetKey 1`] = `
               <input
                 class="ant-checkbox-input"
                 type="checkbox"
+                value=""
               />
               <span
                 class="ant-checkbox-inner"
@@ -748,6 +759,7 @@ exports[`Transfer should show sorted targetKey 1`] = `
               <input
                 class="ant-checkbox-input"
                 type="checkbox"
+                value=""
               />
               <span
                 class="ant-checkbox-inner"
@@ -785,6 +797,7 @@ exports[`Transfer should support render value and label in item 1`] = `
           <input
             class="ant-checkbox-input"
             type="checkbox"
+            value=""
           />
           <span
             class="ant-checkbox-inner"
@@ -838,6 +851,7 @@ exports[`Transfer should support render value and label in item 1`] = `
               <input
                 class="ant-checkbox-input"
                 type="checkbox"
+                value=""
               />
               <span
                 class="ant-checkbox-inner"
@@ -922,6 +936,7 @@ exports[`Transfer should support render value and label in item 1`] = `
           <input
             class="ant-checkbox-input"
             type="checkbox"
+            value=""
           />
           <span
             class="ant-checkbox-inner"
@@ -1033,6 +1048,7 @@ exports[`immutable data dataSource is frozen 1`] = `
           <input
             class="ant-checkbox-input"
             type="checkbox"
+            value=""
           />
           <span
             class="ant-checkbox-inner"
@@ -1085,6 +1101,7 @@ exports[`immutable data dataSource is frozen 1`] = `
               <input
                 class="ant-checkbox-input"
                 type="checkbox"
+                value=""
               />
               <span
                 class="ant-checkbox-inner"
@@ -1167,6 +1184,7 @@ exports[`immutable data dataSource is frozen 1`] = `
           <input
             class="ant-checkbox-input"
             type="checkbox"
+            value=""
           />
           <span
             class="ant-checkbox-inner"

components/transfer/__tests__/__snapshots__/list.test.js.snap

@@ -16,6 +16,7 @@ exports[`Transfer.List should render correctly 1`] = `
         <input
           class="ant-checkbox-input"
           type="checkbox"
+          value=""
         />
         <span
           class="ant-checkbox-inner"
@@ -69,6 +70,7 @@ exports[`Transfer.List should render correctly 1`] = `
               checked=""
               class="ant-checkbox-input"
               type="checkbox"
+              value=""
             />
             <span
               class="ant-checkbox-inner"
@@ -91,6 +93,7 @@ exports[`Transfer.List should render correctly 1`] = `
             <input
               class="ant-checkbox-input"
               type="checkbox"
+              value=""
             />
             <span
               class="ant-checkbox-inner"
@@ -114,6 +117,7 @@ exports[`Transfer.List should render correctly 1`] = `
               class="ant-checkbox-input"
               disabled=""
               type="checkbox"
+              value=""
             />
             <span
               class="ant-checkbox-inner"

components/transfer/__tests__/index.test.js

@@ -98,7 +98,7 @@ describe('Transfer', () => {
 
   it('should render correctly', () => {
     const wrapper = mount(<Transfer {...listCommonProps} />);
-    expect(wrapper).toMatchRenderedSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('should move selected keys to corresponding list', () => {
@@ -414,7 +414,7 @@ describe('Transfer', () => {
       lazy: false,
     };
     const wrapper = mount(<Transfer {...sortedTargetKeyProps} render={item => item.title} />);
-    expect(wrapper).toMatchRenderedSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('should add custom styles when their props are provided', () => {
@@ -488,7 +488,7 @@ describe('Transfer', () => {
         render={record => ({ value: `${record.title} value`, label: 'label' })}
       />,
     );
-    expect(component).toMatchRenderedSnapshot();
+    expect(component.render()).toMatchSnapshot();
   });
 
   it('should render correct checkbox label when checkboxLabel is defined', () => {
@@ -568,6 +568,6 @@ describe('immutable data', () => {
       }),
     ];
     const wrapper = mount(<Transfer rowKey={item => item.id} dataSource={mockData} />);
-    expect(wrapper).toMatchRenderedSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 });

components/transfer/__tests__/list.test.js

@@ -28,7 +28,7 @@ describe('Transfer.List', () => {
   it('should render correctly', () => {
     const wrapper = mount(<List {...listCommonProps} />);
     wrapper.update();
-    expect(wrapper).toMatchRenderedSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('should check top Checkbox while all available items are checked', () => {

components/transfer/__tests__/search.test.js

@@ -34,9 +34,9 @@ describe('Transfer.Search', () => {
 
   it('should show cross icon when input value exists', () => {
     const wrapper = mount(<Search value="" />);
-    expect(wrapper).toMatchRenderedSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
     wrapper.setProps({ value: 'a' });
-    expect(wrapper).toMatchRenderedSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('onSearch', () => {

components/tree-select/__tests__/__snapshots__/index.test.js.snap

@@ -263,16 +263,17 @@ exports[`TreeSelect rtl render component should be rendered correctly in RTL dir
       class="ant-select-selection-search"
     >
       <input
-        aria-activedescendant="undefined_list_0"
+        aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
         aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_TEST_OR_SSR_list"
         aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_TEST_OR_SSR_list"
         autocomplete="off"
         class="ant-select-selection-search-input"
+        id="rc_select_TEST_OR_SSR"
         readonly=""
         role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
         type="search"
         unselectable="on"
         value=""
@@ -285,7 +286,7 @@ exports[`TreeSelect rtl render component should be rendered correctly in RTL dir
   <span
     aria-hidden="true"
     class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
     unselectable="on"
   >
     <span

components/tree/__tests__/__snapshots__/directory.test.js.snap

@@ -3282,7 +3282,7 @@ exports[`Directory Tree rtl render component should be rendered correctly in RTL
   <div>
     <input
       aria-label="for screen reader"
-      style="width:0;height:0;display:flex;overflow:hidden;opacity:0;border:0;padding:0;margin:0"
+      style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
       tabindex="0"
       value=""
     />
@@ -3290,7 +3290,7 @@ exports[`Directory Tree rtl render component should be rendered correctly in RTL
   <div
     aria-hidden="true"
     class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
   >
     <div
       class="ant-tree-indent"
@@ -3302,7 +3302,7 @@ exports[`Directory Tree rtl render component should be rendered correctly in RTL
   </div>
   <div
     class="ant-tree-list"
-    style="position:relative"
+    style="position: relative;"
   >
     <div
       class="ant-tree-list-holder"
@@ -3310,7 +3310,7 @@ exports[`Directory Tree rtl render component should be rendered correctly in RTL
       <div>
         <div
           class="ant-tree-list-holder-inner"
-          style="display:flex;flex-direction:column"
+          style="display: flex; flex-direction: column;"
         />
       </div>
     </div>
@@ -3326,7 +3326,7 @@ exports[`Directory Tree rtl render component should be rendered correctly in RTL
   <div>
     <input
       aria-label="for screen reader"
-      style="width:0;height:0;display:flex;overflow:hidden;opacity:0;border:0;padding:0;margin:0"
+      style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
       tabindex="0"
       value=""
     />
@@ -3334,7 +3334,7 @@ exports[`Directory Tree rtl render component should be rendered correctly in RTL
   <div
     aria-hidden="true"
     class="ant-tree-treenode"
-    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+    style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
   >
     <div
       class="ant-tree-indent"
@@ -3346,7 +3346,7 @@ exports[`Directory Tree rtl render component should be rendered correctly in RTL
   </div>
   <div
     class="ant-tree-list"
-    style="position:relative"
+    style="position: relative;"
   >
     <div
       class="ant-tree-list-holder"
@@ -3354,7 +3354,7 @@ exports[`Directory Tree rtl render component should be rendered correctly in RTL
       <div>
         <div
           class="ant-tree-list-holder-inner"
-          style="display:flex;flex-direction:column"
+          style="display: flex; flex-direction: column;"
         />
       </div>
     </div>

components/upload/__tests__/__snapshots__/upload.test.js.snap

@@ -6,7 +6,7 @@ exports[`Upload rtl render component should be rendered correctly in RTL directi
 >
   <div
     class="ant-upload ant-upload-select ant-upload-select-text ant-upload-rtl"
-    style="display:none"
+    style="display: none;"
   >
     <span
       class="ant-upload"
@@ -15,7 +15,7 @@ exports[`Upload rtl render component should be rendered correctly in RTL directi
     >
       <input
         accept=""
-        style="display:none"
+        style="display: none;"
         type="file"
       />
     </span>

site/bisheng.config.js

@@ -114,6 +114,7 @@ module.exports = {
     // Use dev mod to speed up site preview build
     // This is used for CI preview build in `preview-build.yml`
     if (process.env.SITE_ENV === 'development') {
+      // eslint-disable-next-line no-console
       console.log('Site build with development mode...');
       config.mode = 'development';
     }

tests/matchers/rendered-snapshot.ts

@@ -1,21 +0,0 @@
-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

@@ -1,7 +1,3 @@
 import { toHaveNoViolations } from 'jest-axe';
-import toMatchRenderedSnapshot from './matchers/rendered-snapshot';
 
 expect.extend(toHaveNoViolations);
-expect.extend({
-  toMatchRenderedSnapshot,
-});

tests/shared/rtlTest.tsx

@@ -16,7 +16,7 @@ export default function rtlTest(Component: React.ComponentType, mockDate?: boole
           <Component />
         </ConfigProvider>,
       );
-      expect(wrapper).toMatchRenderedSnapshot();
+      expect(wrapper.render()).toMatchSnapshot();
       if (mockDate) {
         MockDate.reset();
       }

typings/jest.d.ts

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