test: ✅ Enable transition and animation in jest (#26571)

* test: ✅ add test cases to increase coverage

* test: fix snapshot

* fix: test node envioronment

* fix: test node envioronment

* fix test case

* test: refactor menu test cases

* test: update test code style

* test: add more menu test cases

* add comment

* test: update snapshot

* fix: alert test case

* fix: form onLeaveEnd test cov

* test: fix button click wave test cases

* chore: clean up snapshots

components/_util/wave.tsx

@@ -116,7 +116,6 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
     if (!e || e.target !== node || this.animationStart) {
       return;
     }
-
     this.resetEffect(node);
   };
 

components/button/__tests__/type.test.tsx → components/button/__tests__/index.test.tsx

@@ -211,33 +211,6 @@ describe('Button', () => {
     expect(<Button>{false}</Button>).toMatchRenderedSnapshot();
   });
 
-  it('should have click wave effect', async () => {
-    const wrapper = mount(<Button type="primary">button</Button>);
-    wrapper.find('.ant-btn').getDOMNode<HTMLButtonElement>().click();
-    await sleep(0);
-    expect(
-      wrapper.find('.ant-btn').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
-    ).toBe(true);
-  });
-
-  it('should not have click wave effect for link type button', async () => {
-    const wrapper = mount(<Button type="link">button</Button>);
-    wrapper.find('.ant-btn').getDOMNode<HTMLButtonElement>().click();
-    await sleep(0);
-    expect(
-      wrapper.find('.ant-btn').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
-    ).toBe(false);
-  });
-
-  it('should not have click wave effect for text type button', async () => {
-    const wrapper = mount(<Button type="link">button</Button>);
-    wrapper.find('.ant-btn').getDOMNode<HTMLButtonElement>().click();
-    await sleep(0);
-    expect(
-      wrapper.find('.ant-btn').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
-    ).toBe(false);
-  });
-
   it('should not render as link button when href is undefined', async () => {
     const wrapper = mount(
       <Button type="primary" href={undefined}>

components/button/__tests__/wave.test.tsx

+import React from 'react';
+import { mount } from 'enzyme';
+import Button from '..';
+import Wave from '../../_util/wave';
+import { sleep } from '../../../tests/utils';
+
+describe('click wave effect', () => {
+  async function clickButton(wrapper: any) {
+    wrapper.find('.ant-btn').getDOMNode().click();
+    wrapper.find('.ant-btn').getDOMNode().dispatchEvent(new Event('transitionstart'));
+    await sleep(20);
+    wrapper.find('.ant-btn').getDOMNode().dispatchEvent(new Event('animationend'));
+    await sleep(20);
+  }
+
+  it('should have click wave effect for primary button', async () => {
+    const wrapper = mount(<Button type="primary">button</Button>);
+    clickButton(wrapper);
+    await sleep(0);
+    expect(
+      wrapper.find('.ant-btn').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
+    ).toBe(true);
+  });
+
+  it('should have click wave effect for default button', async () => {
+    const wrapper = mount(<Button>button</Button>);
+    await clickButton(wrapper);
+    expect(
+      wrapper.find('.ant-btn').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
+    ).toBe(true);
+  });
+
+  it('should not have click wave effect for link type button', async () => {
+    const wrapper = mount(<Button type="link">button</Button>);
+    await clickButton(wrapper);
+    expect(
+      wrapper.find('.ant-btn').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
+    ).toBe(false);
+  });
+
+  it('should not have click wave effect for text type button', async () => {
+    const wrapper = mount(<Button type="text">button</Button>);
+    await clickButton(wrapper);
+    await sleep(0);
+    expect(
+      wrapper.find('.ant-btn').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
+    ).toBe(false);
+  });
+
+  it('should handle transitionstart', async () => {
+    const wrapper = mount(<Button type="primary">button</Button>);
+    await clickButton(wrapper);
+    const buttonNode = wrapper.find('.ant-btn').getDOMNode();
+    buttonNode.dispatchEvent(new Event('transitionstart'));
+    expect(
+      wrapper.find('.ant-btn').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
+    ).toBe(true);
+    wrapper.unmount();
+    buttonNode.dispatchEvent(new Event('transitionstart'));
+  });
+
+  it('should run resetEffect in transitionstart', async () => {
+    const wrapper = mount(<Button type="primary">button</Button>);
+    const waveInstance = wrapper.find(Wave).instance() as any;
+    const resetEffect = jest.spyOn(waveInstance, 'resetEffect');
+    await clickButton(wrapper);
+    expect(resetEffect).toHaveBeenCalledTimes(1);
+    wrapper.find('.ant-btn').getDOMNode<HTMLButtonElement>().click();
+    await sleep(10);
+    expect(resetEffect).toHaveBeenCalledTimes(2);
+    waveInstance.animationStart = false;
+    wrapper.find('.ant-btn').getDOMNode().dispatchEvent(new Event('transitionstart'));
+    expect(resetEffect).toHaveBeenCalledTimes(3);
+    resetEffect.mockRestore();
+  });
+
+  it('should handle transitionend', async () => {
+    const wrapper = mount(<Button type="primary">button</Button>);
+    const waveInstance = wrapper.find(Wave).instance() as any;
+    const resetEffect = jest.spyOn(waveInstance, 'resetEffect');
+    await clickButton(wrapper);
+    expect(resetEffect).toHaveBeenCalledTimes(1);
+    const event = new Event('animationend');
+    Object.assign(event, { animationName: 'fadeEffect' });
+    wrapper.find('.ant-btn').getDOMNode().dispatchEvent(event);
+    expect(resetEffect).toHaveBeenCalledTimes(2);
+  });
+});

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

@@ -601,7 +601,7 @@ exports[`Cascader can be selected in RTL direction 2`] = `
 exports[`Cascader have a notFoundContent that fit trigger input width 1`] = `
 <div>
   <div
-    class="ant-cascader-menus"
+    class="ant-cascader-menus slide-up-appear slide-up-appear-prepare slide-up"
     style="opacity: 0; pointer-events: none;"
   >
     <div>
@@ -1046,7 +1046,7 @@ exports[`Cascader rtl render component should be rendered correctly in RTL direc
 exports[`Cascader should highlight keyword and filter when search in Cascader 1`] = `
 <div>
   <div
-    class="ant-cascader-menus"
+    class="ant-cascader-menus slide-up-appear slide-up-appear-prepare slide-up"
     style="opacity: 0; pointer-events: none;"
   >
     <div>
@@ -1083,7 +1083,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
 exports[`Cascader should highlight keyword and filter when search in Cascader with same field name of label and value 1`] = `
 <div>
   <div
-    class="ant-cascader-menus"
+    class="ant-cascader-menus slide-up-appear slide-up-appear-prepare slide-up"
     style="opacity: 0; pointer-events: none;"
   >
     <div>
@@ -1126,7 +1126,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader wi
 exports[`Cascader should render not found content 1`] = `
 <div>
   <div
-    class="ant-cascader-menus ant-cascader-menu-empty"
+    class="ant-cascader-menus ant-cascader-menu-empty slide-up-appear slide-up-appear-prepare slide-up"
     style="opacity: 0; pointer-events: none;"
   >
     <div>
@@ -1195,7 +1195,7 @@ exports[`Cascader should render not found content 1`] = `
 exports[`Cascader should show not found content when options.length is 0 1`] = `
 <div>
   <div
-    class="ant-cascader-menus ant-cascader-menu-empty"
+    class="ant-cascader-menus ant-cascader-menu-empty slide-up-appear slide-up-appear-prepare slide-up"
     style="opacity: 0; pointer-events: none;"
   >
     <div>

components/collapse/__tests__/index.test.js

@@ -3,17 +3,6 @@ import { mount } from 'enzyme';
 import { sleep } from '../../../tests/utils';
 
 describe('Collapse', () => {
-  // Fix css-animation deps on these
-  // https://github.com/yiminghe/css-animation/blob/a5986d73fd7dfce75665337f39b91483d63a4c8c/src/Event.js#L44
-  window.AnimationEvent = window.AnimationEvent || (() => {});
-  window.TransitionEvent = window.TransitionEvent || (() => {});
-
-  afterAll(() => {
-    // restore it
-    delete window.AnimationEvent;
-    delete window.TransitionEvent;
-  });
-
   // eslint-disable-next-line global-require
   const Collapse = require('..').default;
 

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

@@ -44,7 +44,7 @@ Array [
   </div>,
   <div>
     <div
-      class="ant-picker-dropdown"
+      class="ant-picker-dropdown slide-up-appear slide-up-appear-prepare slide-up"
       style="opacity: 0; pointer-events: none;"
     >
       <div
@@ -668,7 +668,7 @@ Array [
   </div>,
   <div>
     <div
-      class="ant-picker-dropdown"
+      class="ant-picker-dropdown slide-up-appear slide-up-appear-prepare slide-up"
       style="opacity: 0; pointer-events: none;"
     >
       <div

components/form/__tests__/index.test.js

@@ -136,6 +136,7 @@ describe('Form', () => {
       "Warning: [antd: Form.Item] `shouldUpdate` and `dependencies` shouldn't be used together. See https://ant.design/components/form/#dependencies.",
     );
   });
+
   it('`name` should not work with render props', () => {
     mount(
       <Form>
@@ -148,6 +149,7 @@ describe('Form', () => {
       "Warning: [antd: Form.Item] Do not use `name` with `children` of render props since it's not a field.",
     );
   });
+
   it('children is array has name props', () => {
     mount(
       <Form>
@@ -435,6 +437,24 @@ describe('Form', () => {
     expect(wrapper.find('.ant-form-item-explain').text()).toEqual('help');
   });
 
+  it('clear validation message when ', async () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item name="username" rules={[{ required: true, message: 'message' }]}>
+          <Input />
+        </Form.Item>
+      </Form>,
+    );
+    await change(wrapper, 0, '1');
+    expect(wrapper.find('.ant-form-item-explain').length).toBeFalsy();
+    await change(wrapper, 0, '');
+    expect(wrapper.find('.ant-form-item-explain').length).toBeTruthy();
+    await change(wrapper, 0, '123');
+    await sleep(800);
+    wrapper.update();
+    expect(wrapper.find('.ant-form-item-explain').length).toBeFalsy();
+  });
+
   // https://github.com/ant-design/ant-design/issues/21167
   it('`require` without `name`', () => {
     const wrapper = mount(

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

@@ -397,7 +397,7 @@ exports[`List.pagination should change page size work 2`] = `
       </div>
       <div>
         <div
-          class="ant-select-dropdown"
+          class="ant-select-dropdown slide-up-enter slide-up-enter-prepare slide-up"
           style="pointer-events: none; min-width: 0; opacity: 0;"
         >
           <div>

components/menu/__tests__/index.test.js

@@ -15,6 +15,34 @@ import rtlTest from '../../../tests/shared/rtlTest';
 
 const { SubMenu } = Menu;
 
+const noop = () => {};
+
+const expectSubMenuBehavior = (menu, enter = noop, leave = noop) => {
+  if (!menu.prop('openKeys') && !menu.prop('defaultOpenKeys')) {
+    expect(menu.find('.ant-menu-sub').length).toBe(0);
+  }
+  menu.update();
+  expect(menu.find('.ant-menu-sub').length).toBe(0);
+  const AnimationClassNames = {
+    horizontal: 'slide-up-leave',
+    inline: 'ant-motion-collapse-leave',
+    vertical: 'zoom-big-leave',
+  };
+  const mode = menu.prop('mode') || 'horizontal';
+  enter();
+  menu.update();
+  let submenu = menu.find('.ant-menu-sub').hostNodes().at(0);
+  expect(submenu.hasClass('ant-menu-hidden') || submenu.hasClass(AnimationClassNames[mode])).toBe(
+    false,
+  );
+  leave();
+  menu.update();
+  submenu = menu.find('.ant-menu-sub').hostNodes().at(0);
+  expect(submenu.hasClass('ant-menu-hidden') || submenu.hasClass(AnimationClassNames[mode])).toBe(
+    true,
+  );
+};
+
 describe('Menu', () => {
   mountTest(() => (
     <Menu>
@@ -116,9 +144,9 @@ describe('Menu', () => {
     expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
   });
 
-  it('horizontal', () => {
+  it('should accept openKeys in mode horizontal', () => {
     const wrapper = mount(
-      <Menu openKeys={['1']} mode="horizontal" openTransitionName="">
+      <Menu openKeys={['1']} mode="horizontal">
         <SubMenu key="1" title="submenu1">
           <Menu.Item key="submenu1">Option 1</Menu.Item>
           <Menu.Item key="submenu2">Option 2</Menu.Item>
@@ -126,22 +154,25 @@ describe('Menu', () => {
         <Menu.Item key="2">menu2</Menu.Item>
       </Menu>,
     );
-    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-      true,
-    );
-    wrapper.setProps({ openKeys: [] });
-    wrapper.update();
-    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true);
-    wrapper.setProps({ openKeys: ['1'] });
-    wrapper.update();
-    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-      true,
+    expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
+  });
+
+  it('should accept openKeys in mode inline', () => {
+    const wrapper = mount(
+      <Menu openKeys={['1']} mode="inline">
+        <SubMenu key="1" title="submenu1">
+          <Menu.Item key="submenu1">Option 1</Menu.Item>
+          <Menu.Item key="submenu2">Option 2</Menu.Item>
+        </SubMenu>
+        <Menu.Item key="2">menu2</Menu.Item>
+      </Menu>,
     );
+    expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
   });
 
-  it('inline', () => {
+  it('should accept openKeys in mode vertical', () => {
     const wrapper = mount(
-      <Menu openKeys={['1']} mode="inline" openAnimation="">
+      <Menu openKeys={['1']} mode="vertical">
         <SubMenu key="1" title="submenu1">
           <Menu.Item key="submenu1">Option 1</Menu.Item>
           <Menu.Item key="submenu2">Option 2</Menu.Item>
@@ -149,22 +180,29 @@ describe('Menu', () => {
         <Menu.Item key="2">menu2</Menu.Item>
       </Menu>,
     );
-    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-      true,
+    expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
+  });
+
+  it('test submenu in mode horizontal', () => {
+    const wrapper = mount(
+      <Menu mode="horizontal">
+        <SubMenu key="1" title="submenu1">
+          <Menu.Item key="submenu1">Option 1</Menu.Item>
+          <Menu.Item key="submenu2">Option 2</Menu.Item>
+        </SubMenu>
+        <Menu.Item key="2">menu2</Menu.Item>
+      </Menu>,
     );
-    wrapper.setProps({ openKeys: [] });
-    wrapper.update();
-    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true);
-    wrapper.setProps({ openKeys: ['1'] });
-    wrapper.update();
-    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-      true,
+    expectSubMenuBehavior(
+      wrapper,
+      () => wrapper.setProps({ openKeys: ['1'] }),
+      () => wrapper.setProps({ openKeys: [] }),
     );
   });
 
-  it('vertical', () => {
+  it('test submenu in mode inline', () => {
     const wrapper = mount(
-      <Menu openKeys={['1']} mode="vertical" openTransitionName="">
+      <Menu mode="inline">
         <SubMenu key="1" title="submenu1">
           <Menu.Item key="submenu1">Option 1</Menu.Item>
           <Menu.Item key="submenu2">Option 2</Menu.Item>
@@ -172,16 +210,27 @@ describe('Menu', () => {
         <Menu.Item key="2">menu2</Menu.Item>
       </Menu>,
     );
-    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-      true,
+    expectSubMenuBehavior(
+      wrapper,
+      () => wrapper.setProps({ openKeys: ['1'] }),
+      () => wrapper.setProps({ openKeys: [] }),
     );
-    wrapper.setProps({ openKeys: [] });
-    wrapper.update();
-    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true);
-    wrapper.setProps({ openKeys: ['1'] });
-    wrapper.update();
-    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-      true,
+  });
+
+  it('test submenu in mode vertical', () => {
+    const wrapper = mount(
+      <Menu mode="vertical" openTransitionName="">
+        <SubMenu key="1" title="submenu1">
+          <Menu.Item key="submenu1">Option 1</Menu.Item>
+          <Menu.Item key="submenu2">Option 2</Menu.Item>
+        </SubMenu>
+        <Menu.Item key="2">menu2</Menu.Item>
+      </Menu>,
+    );
+    expectSubMenuBehavior(
+      wrapper,
+      () => wrapper.setProps({ openKeys: ['1'] }),
+      () => wrapper.setProps({ openKeys: [] }),
     );
   });
 
@@ -221,9 +270,8 @@ describe('Menu', () => {
   it('should always follow openKeys when inlineCollapsed is switched', () => {
     const wrapper = mount(
       <Menu defaultOpenKeys={['1']} mode="inline">
-        <Menu.Item key="menu1">
-          <InboxOutlined />
-          <span>Option</span>
+        <Menu.Item key="menu1" icon={<InboxOutlined />}>
+          Option
         </Menu.Item>
         <SubMenu key="1" title="submenu1">
           <Menu.Item key="submenu1">Option</Menu.Item>
@@ -254,9 +302,8 @@ describe('Menu', () => {
   it('inlineCollapsed should works well when specify a not existed default openKeys', () => {
     const wrapper = mount(
       <Menu defaultOpenKeys={['not-existed']} mode="inline">
-        <Menu.Item key="menu1">
-          <InboxOutlined />
-          <span>Option</span>
+        <Menu.Item key="menu1" icon={<InboxOutlined />}>
+          Option
         </Menu.Item>
         <SubMenu key="1" title="submenu1">
           <Menu.Item key="submenu1">Option</Menu.Item>
@@ -339,15 +386,10 @@ describe('Menu', () => {
           <Menu.Item key="2">menu2</Menu.Item>
         </Menu>,
       );
-      expect(wrapper.find('.ant-menu-sub').length).toBe(0);
-      toggleMenu(wrapper, 0, 'click');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-        true,
-      );
-      toggleMenu(wrapper, 0, 'click');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
-        true,
+      expectSubMenuBehavior(
+        wrapper,
+        () => toggleMenu(wrapper, 0, 'click'),
+        () => toggleMenu(wrapper, 0, 'click'),
       );
     });
 
@@ -361,15 +403,10 @@ describe('Menu', () => {
           <Menu.Item key="2">menu2</Menu.Item>
         </Menu>,
       );
-      expect(wrapper.find('.ant-menu-sub').length).toBe(0);
-      toggleMenu(wrapper, 0, 'mouseenter');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-        true,
-      );
-      toggleMenu(wrapper, 0, 'mouseleave');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
-        true,
+      expectSubMenuBehavior(
+        wrapper,
+        () => toggleMenu(wrapper, 0, 'mouseenter'),
+        () => toggleMenu(wrapper, 0, 'mouseleave'),
       );
     });
 
@@ -383,15 +420,10 @@ describe('Menu', () => {
           <Menu.Item key="2">menu2</Menu.Item>
         </Menu>,
       );
-      expect(wrapper.find('.ant-menu-sub').length).toBe(0);
-      toggleMenu(wrapper, 0, 'click');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-        true,
-      );
-      toggleMenu(wrapper, 0, 'click');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
-        true,
+      expectSubMenuBehavior(
+        wrapper,
+        () => toggleMenu(wrapper, 0, 'click'),
+        () => toggleMenu(wrapper, 0, 'click'),
       );
     });
 
@@ -406,15 +438,10 @@ describe('Menu', () => {
           <Menu.Item key="2">menu2</Menu.Item>
         </Menu>,
       );
-      expect(wrapper.find('.ant-menu-sub').length).toBe(0);
-      toggleMenu(wrapper, 0, 'mouseenter');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-        true,
-      );
-      toggleMenu(wrapper, 0, 'mouseleave');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
-        true,
+      expectSubMenuBehavior(
+        wrapper,
+        () => toggleMenu(wrapper, 0, 'mouseenter'),
+        () => toggleMenu(wrapper, 0, 'mouseleave'),
       );
     });
 
@@ -429,15 +456,10 @@ describe('Menu', () => {
           <Menu.Item key="2">menu2</Menu.Item>
         </Menu>,
       );
-      expect(wrapper.find('.ant-menu-sub').length).toBe(0);
-      toggleMenu(wrapper, 0, 'click');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-        true,
-      );
-      toggleMenu(wrapper, 0, 'click');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
-        true,
+      expectSubMenuBehavior(
+        wrapper,
+        () => toggleMenu(wrapper, 0, 'click'),
+        () => toggleMenu(wrapper, 0, 'click'),
       );
     });
   });
@@ -446,16 +468,13 @@ describe('Menu', () => {
     jest.useFakeTimers();
     const wrapper = mount(
       <Menu mode="inline" inlineCollapsed>
-        <Menu.Item key="1" title="bamboo lucky">
-          <PieChartOutlined />
-          <span>
-            Option 1
-            <img
-              style={{ width: 20 }}
-              alt="test"
-              src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
-            />
-          </span>
+        <Menu.Item key="1" title="bamboo lucky" icon={<PieChartOutlined />}>
+          Option 1
+          <img
+            style={{ width: 20 }}
+            alt="test"
+            src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+          />
         </Menu.Item>
       </Menu>,
     );
@@ -485,15 +504,7 @@ describe('Menu', () => {
             <Layout.Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
               <div className="logo" />
               <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
-                <SubMenu
-                  key="sub1"
-                  title={
-                    <span>
-                      <UserOutlined />
-                      <span>User</span>
-                    </span>
-                  }
-                >
+                <SubMenu key="sub1" icon={<UserOutlined />} title="User">
                   <Menu.Item key="3">Tom</Menu.Item>
                   <Menu.Item key="4">Bill</Menu.Item>
                   <Menu.Item key="5">Alex</Menu.Item>
@@ -527,12 +538,10 @@ describe('Menu', () => {
   it('MenuItem should not render Tooltip when inlineCollapsed is false', () => {
     const wrapper = mount(
       <Menu defaultSelectedKeys={['mail']} defaultOpenKeys={['mail']} mode="horizontal">
-        <Menu.Item key="mail">
-          <MailOutlined />
+        <Menu.Item key="mail" icon={<MailOutlined />}>
           Navigation One
         </Menu.Item>
-        <Menu.Item key="app">
-          <AppstoreOutlined />
+        <Menu.Item key="app" icon={<AppstoreOutlined />}>
           Navigation Two
         </Menu.Item>
         <Menu.Item key="alipay">
@@ -562,9 +571,8 @@ describe('Menu', () => {
   it('should controlled collapse work', () => {
     const wrapper = mount(
       <Menu mode="inline" inlineCollapsed={false}>
-        <Menu.Item key="1">
-          <PieChartOutlined />
-          <span>Option 1</span>
+        <Menu.Item key="1" icon={<PieChartOutlined />}>
+          Option 1
         </Menu.Item>
       </Menu>,
     );
@@ -580,9 +588,8 @@ describe('Menu', () => {
     jest.useFakeTimers();
     const wrapper = mount(
       <Menu mode="inline" inlineCollapsed={false}>
-        <Menu.Item key="1">
-          <PieChartOutlined />
-          <span>Option 1</span>
+        <Menu.Item key="1" icon={<PieChartOutlined />}>
+          Option 1
         </Menu.Item>
       </Menu>,
     );

components/message/__tests__/config.test.js

@@ -60,7 +60,7 @@ describe('message.config', () => {
       duration: 0.5,
     });
     message.info('last');
-    await sleep(600);
+    await sleep(1000);
     expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
     message.config({
       duration: 3,

components/slider/SliderTooltip.tsx

@@ -34,13 +34,8 @@ const SliderTooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
   }
 
   function keepAlign() {
-    if (rafRef.current !== null) {
-      return;
-    }
-
     rafRef.current = window.requestAnimationFrame(() => {
       (tooltipRef.current as any).forcePopupAlign();
-
       rafRef.current = null;
       keepAlign();
     });

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

@@ -334,7 +334,7 @@ exports[`Table.filter renders custom filter icon with right Tooltip title 1`] =
                           </span>
                           <div>
                             <div
-                              class="ant-tooltip"
+                              class="ant-tooltip zoom-big-fast-appear zoom-big-fast-appear-prepare zoom-big-fast"
                               style="opacity: 0; pointer-events: none;"
                             >
                               <div
@@ -819,7 +819,7 @@ exports[`Table.filter should support getPopupContainer 1`] = `
                         </span>
                         <div>
                           <div
-                            class="ant-dropdown"
+                            class="ant-dropdown slide-up-appear slide-up-appear-prepare slide-up"
                             style="opacity: 0; pointer-events: none;"
                           >
                             <div
@@ -1052,7 +1052,7 @@ exports[`Table.filter should support getPopupContainer from ConfigProvider 1`] =
                         </span>
                         <div>
                           <div
-                            class="ant-dropdown"
+                            class="ant-dropdown slide-up-appear slide-up-appear-prepare slide-up"
                             style="opacity: 0; pointer-events: none;"
                           >
                             <div

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

@@ -1080,7 +1080,7 @@ exports[`Table.rowSelection should support getPopupContainer 1`] = `
                         </span>
                         <div>
                           <div
-                            class="ant-dropdown"
+                            class="ant-dropdown slide-up-appear slide-up-appear-prepare slide-up"
                             style="opacity: 0; pointer-events: none;"
                           >
                             <ul
@@ -1410,7 +1410,7 @@ exports[`Table.rowSelection should support getPopupContainer from ConfigProvider
                         </span>
                         <div>
                           <div
-                            class="ant-dropdown"
+                            class="ant-dropdown slide-up-appear slide-up-appear-prepare slide-up"
                             style="opacity: 0; pointer-events: none;"
                           >
                             <ul

components/time-picker/__tests__/__snapshots__/index.test.js.snap

@@ -117,7 +117,7 @@ Array [
   </div>,
   <div>
     <div
-      class="ant-picker-dropdown"
+      class="ant-picker-dropdown slide-up-appear slide-up-appear-prepare slide-up"
       style="opacity: 0; pointer-events: none;"
     >
       <div

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

@@ -34,7 +34,7 @@ exports[`TreeSelect TreeSelect Custom Icons should \`treeIcon\` work 1`] = `
   </div>
   <div>
     <div
-      class="ant-select-dropdown ant-tree-select-dropdown"
+      class="ant-select-dropdown ant-tree-select-dropdown slide-up-appear slide-up-appear-prepare slide-up"
       style="opacity: 0; pointer-events: none; min-width: 0; width: 0px;"
     >
       <div>

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

@@ -812,7 +812,8 @@ exports[`Directory Tree expand click 1`] = `
             </span>
           </div>
           <div
-            class="ant-tree-treenode-motion"
+            class="ant-tree-treenode-motion ant-motion-collapse-appear ant-motion-collapse-appear-start ant-motion-collapse"
+            style="height: 0px; opacity: 0;"
           >
             <div
               class="ant-tree-treenode ant-tree-treenode-switcher-close"
@@ -1069,6 +1070,10 @@ exports[`Directory Tree expand click 2`] = `
               </span>
             </span>
           </div>
+          <div
+            class="ant-tree-treenode-motion ant-motion-collapse-leave ant-motion-collapse-leave-start ant-motion-collapse"
+            style="height: 0px;"
+          />
           <div
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
           >
@@ -1226,7 +1231,8 @@ exports[`Directory Tree expand double click 1`] = `
             </span>
           </div>
           <div
-            class="ant-tree-treenode-motion"
+            class="ant-tree-treenode-motion ant-motion-collapse-appear ant-motion-collapse-appear-start ant-motion-collapse"
+            style="height: 0px; opacity: 0;"
           >
             <div
               class="ant-tree-treenode ant-tree-treenode-switcher-close"
@@ -1483,6 +1489,10 @@ exports[`Directory Tree expand double click 2`] = `
               </span>
             </span>
           </div>
+          <div
+            class="ant-tree-treenode-motion ant-motion-collapse-leave ant-motion-collapse-leave-start ant-motion-collapse"
+            style="height: 0px;"
+          />
           <div
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
           >
@@ -1640,7 +1650,8 @@ exports[`Directory Tree expand with state control click 1`] = `
             </span>
           </div>
           <div
-            class="ant-tree-treenode-motion"
+            class="ant-tree-treenode-motion ant-motion-collapse-appear ant-motion-collapse-appear-start ant-motion-collapse"
+            style="height: 0px; opacity: 0;"
           >
             <div
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
@@ -1787,7 +1798,8 @@ exports[`Directory Tree expand with state control doubleClick 1`] = `
             </span>
           </div>
           <div
-            class="ant-tree-treenode-motion"
+            class="ant-tree-treenode-motion ant-motion-collapse-appear ant-motion-collapse-appear-start ant-motion-collapse"
+            style="height: 0px; opacity: 0;"
           >
             <div
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
@@ -1996,7 +2008,8 @@ exports[`Directory Tree expandedKeys update 1`] = `
             </span>
           </div>
           <div
-            class="ant-tree-treenode-motion"
+            class="ant-tree-treenode-motion ant-motion-collapse-appear ant-motion-collapse-appear-start ant-motion-collapse"
+            style="height: 0px; opacity: 0;"
           >
             <div
               class="ant-tree-treenode ant-tree-treenode-switcher-close"

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

@@ -28,7 +28,7 @@ exports[`Upload List handle error 1`] = `
     class="ant-upload-list ant-upload-list-text"
   >
     <div
-      class=""
+      class="ant-upload-animate-enter ant-upload-animate-enter-active"
     >
       <div
         class="ant-upload-list-item ant-upload-list-item-error ant-upload-list-item-list-type-text"
@@ -262,7 +262,7 @@ exports[`Upload List should be uploading when upload a file 2`] = `
     class="ant-upload-list ant-upload-list-text"
   >
     <div
-      class=""
+      class="ant-upload-animate-enter ant-upload-animate-enter-active"
     >
       <span>
         <div

components/upload/__tests__/uploadlist.test.js

@@ -131,7 +131,7 @@ describe('Upload List', () => {
     );
     expect(wrapper.find('.ant-upload-list-item').length).toBe(2);
     wrapper.find('.ant-upload-list-item').at(0).find('.anticon-delete').simulate('click');
-    await sleep(400);
+    await sleep(1000);
     wrapper.update();
     expect(wrapper.find('.ant-upload-list-item').hostNodes().length).toBe(1);
   });

tests/setup.js

@@ -21,6 +21,12 @@ if (typeof window !== 'undefined') {
       })),
     });
   }
+
+  // Fix css-animation or rc-motion deps on these
+  // https://github.com/react-component/motion/blob/9c04ef1a210a4f3246c9becba6e33ea945e00669/src/util/motion.ts#L27-L35
+  // https://github.com/yiminghe/css-animation/blob/a5986d73fd7dfce75665337f39b91483d63a4c8c/src/Event.js#L44
+  window.AnimationEvent = window.AnimationEvent || (() => {});
+  window.TransitionEvent = window.TransitionEvent || (() => {});
 }
 
 const Enzyme = require('enzyme');