diff --git a/components/button/__tests__/index.test.tsx b/components/button/__tests__/index.test.tsx
index 406b4815ce..0f889fbc55 100644
--- a/components/button/__tests__/index.test.tsx
+++ b/components/button/__tests__/index.test.tsx
@@ -5,7 +5,7 @@ import { act } from 'react-dom/test-utils';
 import Button from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render, sleep } from '../../../tests/utils';
+import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 
 describe('Button', () => {
@@ -242,6 +242,7 @@ describe('Button', () => {
   });
 
   it('should support to change loading', async () => {
+    jest.useFakeTimers();
     const { container, rerender, unmount } = render(<Button>Button</Button>);
     rerender(<Button loading />);
     expect(container.querySelectorAll('.ant-btn-loading').length).toBe(1);
@@ -249,12 +250,13 @@ describe('Button', () => {
     expect(container.querySelectorAll('.ant-btn-loading').length).toBe(0);
     rerender(<Button loading={{ delay: 50 }} />);
     expect(container.querySelectorAll('.ant-btn-loading').length).toBe(0);
-    await sleep(50);
+    await waitFakeTimer();
     expect(container.querySelectorAll('.ant-btn-loading').length).toBe(1);
     rerender(<Button loading={false} />);
-    await sleep(50);
+    await waitFakeTimer();
     expect(container.querySelectorAll('.ant-btn-loading').length).toBe(0);
     expect(unmount).not.toThrow();
+    jest.useRealTimers();
   });
 
   it('should warning when pass a string as icon props', () => {
diff --git a/components/button/__tests__/wave.test.tsx b/components/button/__tests__/wave.test.tsx
index 3c39e83390..edeeb3aab2 100644
--- a/components/button/__tests__/wave.test.tsx
+++ b/components/button/__tests__/wave.test.tsx
@@ -1,6 +1,7 @@
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import Button from '..';
-import { fireEvent, render, sleep, assertsExist } from '../../../tests/utils';
+import { fireEvent, render, assertsExist } from '../../../tests/utils';
 
 // Mock Wave ref
 let waveInstanceMock: any;
@@ -23,13 +24,21 @@ jest.mock('../../_util/wave', () => {
 });
 
 describe('click wave effect', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
   async function clickButton(wrapper: any) {
     const element = wrapper.container.firstChild;
-    fireEvent.click(element);
+    // https://github.com/testing-library/user-event/issues/833
+    await userEvent.setup({ advanceTimers: jest.advanceTimersByTime }).click(element);
     fireEvent(element, new Event('transitionstart'));
-    await sleep(20);
     fireEvent(element, new Event('animationend'));
-    await sleep(20);
   }
 
   it('should have click wave effect for primary button', async () => {
@@ -82,8 +91,9 @@ describe('click wave effect', () => {
     const resetEffect = jest.spyOn(waveInstanceMock, 'resetEffect');
     await clickButton(wrapper);
     expect(resetEffect).toHaveBeenCalledTimes(1);
-    fireEvent.click(wrapper.container.querySelector('.ant-btn')!);
-    await sleep(10);
+    await userEvent
+      .setup({ advanceTimers: jest.advanceTimersByTime })
+      .click(wrapper.container.querySelector('.ant-btn')!);
     expect(resetEffect).toHaveBeenCalledTimes(2);
     waveInstanceMock.animationStart = false;
     fireEvent(wrapper.container.querySelector('.ant-btn')!, new Event('transitionstart'));