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
2025-06-07 09:26:06 +08:00 · 2020-09-18 16:53:18 +08:00 · 2020-09-18 16:53:18 +08:00 · 83ddfb807e
commit 83ddfb807e
parent 2e4cbba8d7
21 changed files with 504 additions and 414 deletions
--- a/components/_util/wave.tsx
+++ b/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);
  };

--- a/components/button/tests/snapshots/index.test.tsx.snap
+++ b/components/button/tests/snapshots/index.test.tsx.snap
--- a/components/button/tests/index.test.tsx
+++ b/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}>
--- a/components/button/tests/wave.test.tsx
+++ b/components/button/tests/wave.test.tsx
@ -0,0 +1,88 @@
+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);
+  });
+});
--- a/components/cascader/tests/snapshots/index.test.js.snap
+++ b/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>
--- a/components/collapse/tests/index.test.js
+++ b/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;

--- a/components/date-picker/tests/snapshots/DatePicker.test.js.snap
+++ b/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
--- a/components/form/tests/index.test.js
+++ b/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(
--- a/components/list/tests/snapshots/pagination.test.js.snap
+++ b/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>
--- a/components/locale-provider/tests/snapshots/index.test.js.snap
+++ b/components/locale-provider/tests/snapshots/index.test.js.snap
--- a/components/menu/tests/index.test.js
+++ b/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,55 @@ 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('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>,
    );
-    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 vertical', () => {
+    const wrapper = mount(
+      <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>
+        </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('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>,
+    );
+    expectSubMenuBehavior(
+      wrapper,
+      () => wrapper.setProps({ openKeys: ['1'] }),
+      () => wrapper.setProps({ openKeys: [] }),
    );
  });

-  it('inline', () => {
+  it('test submenu in mode inline', () => {
    const wrapper = mount(
-      <Menu openKeys={['1']} mode="inline" openAnimation="">
+      <Menu mode="inline">
        <SubMenu key="1" title="submenu1">
          <Menu.Item key="submenu1">Option 1</Menu.Item>
          <Menu.Item key="submenu2">Option 2</Menu.Item>
@ -149,22 +210,16 @@ 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,
+    expectSubMenuBehavior(
+      wrapper,
+      () => wrapper.setProps({ openKeys: ['1'] }),
+      () => wrapper.setProps({ openKeys: [] }),
    );
  });

-  it('vertical', () => {
+  it('test submenu in mode vertical', () => {
    const wrapper = mount(
-      <Menu openKeys={['1']} mode="vertical" openTransitionName="">
+      <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>
@ -172,16 +227,10 @@ 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,
+    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>,
    );
--- a/components/message/tests/config.test.js
+++ b/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,
--- a/components/slider/SliderTooltip.tsx
+++ b/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();
    });
--- a/components/table/tests/snapshots/Table.filter.test.js.snap
+++ b/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
--- a/components/table/tests/snapshots/Table.rowSelection.test.js.snap
+++ b/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
--- a/components/time-picker/tests/snapshots/index.test.js.snap
+++ b/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
--- a/components/tree-select/tests/snapshots/index.test.js.snap
+++ b/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>
--- a/components/tree/tests/snapshots/directory.test.js.snap
+++ b/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"
--- a/components/upload/tests/snapshots/uploadlist.test.js.snap
+++ b/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
--- a/components/upload/tests/uploadlist.test.js
+++ b/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);
  });
--- a/tests/setup.js
+++ b/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');