test: change act import from utils use act wrap timer and not wrap fireEvent (#36921)

Co-authored-by: ian.xufeng <ian.xufeng@shopee.com>

components/alert/__tests__/index.test.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import Alert from '..';
 import accessibilityTest from '../../../tests/shared/accessibilityTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render, sleep } from '../../../tests/utils';
+import { fireEvent, render, sleep, act } from '../../../tests/utils';
 import Button from '../../button';
 import Popconfirm from '../../popconfirm';
 import Tooltip from '../../tooltip';
@@ -33,13 +32,13 @@ describe('Alert', () => {
       />,
     );
 
+    jest.useFakeTimers();
+    fireEvent.click(container.querySelector('.ant-alert-close-icon')!);
     act(() => {
-      jest.useFakeTimers();
-      fireEvent.click(container.querySelector('.ant-alert-close-icon')!);
       jest.runAllTimers();
-      jest.useRealTimers();
     });
     expect(onClose).toHaveBeenCalled();
+    jest.useRealTimers();
   });
 
   describe('action of Alert', () => {

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

@@ -9,6 +9,7 @@ import zhCN from '../../locale/zh_CN';
 import Modal from '../../modal';
 import Pagination from '../../pagination';
 import TimePicker from '../../time-picker';
+import { act } from '../../../tests/utils';
 
 describe('ConfigProvider.Locale', () => {
   function $$(className) {
@@ -44,7 +45,9 @@ describe('ConfigProvider.Locale', () => {
           title: 'title',
           content: 'Some descriptions',
         });
-        jest.runAllTimers();
+        act(() => {
+          jest.runAllTimers();
+        });
         jest.useRealTimers();
       };
 

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

@@ -3,6 +3,7 @@ import React from 'react';
 import ConfigProvider from '..';
 import Affix from '../../affix';
 import Anchor from '../../anchor';
+import { act } from '../../../tests/utils';
 
 describe('ConfigProvider.getTargetContainer', () => {
   it('Affix', () => {
@@ -16,7 +17,9 @@ describe('ConfigProvider.getTargetContainer', () => {
       </ConfigProvider>,
     );
 
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
 
     expect(getTargetContainer).toHaveBeenCalled();
     jest.useRealTimers();
@@ -33,7 +36,9 @@ describe('ConfigProvider.getTargetContainer', () => {
       </ConfigProvider>,
     );
 
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
 
     expect(getTargetContainer).toHaveBeenCalled();
     jest.useRealTimers();

components/form/__tests__/list.test.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import Form from '..';
-import { fireEvent, render, sleep } from '../../../tests/utils';
+import { fireEvent, render, sleep, act } from '../../../tests/utils';
 import Button from '../../button';
 import Input from '../../input';
 
@@ -43,8 +42,8 @@ describe('Form.List', () => {
       );
 
       function operate(className) {
+        fireEvent.click(container.querySelector(className));
         act(() => {
-          fireEvent.click(container.querySelector(className));
           jest.runAllTimers();
         });
       }

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

@@ -16,6 +16,7 @@ import {
   Transfer,
 } from '../..';
 import mountTest from '../../../tests/shared/mountTest';
+import { act } from '../../../tests/utils';
 import arEG from '../ar_EG';
 import azAZ from '../az_AZ';
 import bgBG from '../bg_BG';
@@ -229,7 +230,9 @@ describe('Locale Provider', () => {
         Modal.confirm({
           title: 'Hello World!',
         });
-        jest.runAllTimers();
+        act(() => {
+          jest.runAllTimers();
+        });
         jest.useRealTimers();
       }
 

components/mentions/__tests__/index.test.js

@@ -4,6 +4,7 @@ import Mentions from '..';
 import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
+import { act } from '../../../tests/utils';
 
 const { getMentions } = Mentions;
 
@@ -68,7 +69,9 @@ describe('Mentions', () => {
     expect(onFocus).toHaveBeenCalled();
 
     wrapper.find('textarea').simulate('blur');
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
     wrapper.update();
     expect(wrapper.find('.ant-mentions').hasClass('ant-mentions-focused')).toBeFalsy();
     expect(onBlur).toHaveBeenCalled();

components/menu/__tests__/index.test.js

@@ -7,11 +7,10 @@ import {
 } from '@ant-design/icons';
 import { mount } from 'enzyme';
 import React, { useState } from 'react';
-import { act } from 'react-dom/test-utils';
 import Menu from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render } from '../../../tests/utils';
+import { fireEvent, render, act } from '../../../tests/utils';
 import Layout from '../../layout';
 import Tooltip from '../../tooltip';
 import collapseMotion from '../../_util/motion';
@@ -403,8 +402,8 @@ describe('Menu', () => {
     wrapper.setProps({ inlineCollapsed: true });
     act(() => {
       jest.runAllTimers();
-      wrapper.update();
     });
+    wrapper.update();
 
     expect(wrapper.find('ul.ant-menu-root').hasClass('ant-menu-vertical')).toBeTruthy();
     expect(wrapper.find('PopupTrigger').prop('visible')).toBeFalsy();
@@ -413,8 +412,8 @@ describe('Menu', () => {
     wrapper.setProps({ inlineCollapsed: false });
     act(() => {
       jest.runAllTimers();
-      wrapper.update();
     });
+    wrapper.update();
 
     expect(wrapper.find('ul.ant-menu-sub').last().hasClass('ant-menu-inline')).toBeTruthy();
     expect(wrapper.find('InlineSubMenuList').prop('open')).toBeTruthy();
@@ -733,8 +732,8 @@ describe('Menu', () => {
 
     act(() => {
       jest.runAllTimers();
-      wrapper.update();
     });
+    wrapper.update();
 
     expect(wrapper.find('.ant-tooltip-inner').length).toBe(0);
   });
@@ -777,7 +776,9 @@ describe('Menu', () => {
     );
 
     wrapper.find('.ant-menu-item').hostNodes().simulate('mouseenter');
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
     wrapper.update();
 
     expect(wrapper.find('.ant-tooltip-inner').length).toBeFalsy();

components/message/__tests__/index.test.js

@@ -1,7 +1,7 @@
 import { SmileOutlined } from '@ant-design/icons';
 import { mount } from 'enzyme';
 import React from 'react';
-import { act } from 'react-dom/test-utils';
+import { act } from '../../../tests/utils';
 import message, { getInstance } from '..';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
@@ -58,14 +58,14 @@ describe('message', () => {
 
     expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
 
+    message.destroy(key1);
     act(() => {
-      message.destroy(key1);
       jest.runAllTimers();
     });
     expect(getInstance().component.state.notices).toHaveLength(1);
 
+    message.destroy(key2);
     act(() => {
-      message.destroy(key2);
       jest.runAllTimers();
     });
     expect(getInstance().component.state.notices).toHaveLength(0);
@@ -82,8 +82,8 @@ describe('message', () => {
     expect(document.querySelectorAll('.ant-message').length).toBe(1);
     expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
 
+    message.destroy();
     act(() => {
-      message.destroy();
       jest.runAllTimers();
     });
     expect(document.querySelectorAll('.ant-message').length).toBe(0);
@@ -194,7 +194,9 @@ describe('message', () => {
     }
     mount(<Test />);
     expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
     expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
   });
 
@@ -215,9 +217,13 @@ describe('message', () => {
 
     mount(<Test />);
     expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
-    jest.advanceTimersByTime(1500);
+    act(() => {
+      jest.advanceTimersByTime(1500);
+    });
     expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
     expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
   });
 

components/modal/__tests__/confirm.test.js

@@ -4,9 +4,9 @@ import { genCSSMotion } from 'rc-motion/lib/CSSMotion';
 import KeyCode from 'rc-util/lib/KeyCode';
 import { resetWarned } from 'rc-util/lib/warning';
 import * as React from 'react';
-import TestUtils, { act } from 'react-dom/test-utils';
+import TestUtils from 'react-dom/test-utils';
 import Modal from '..';
-import { sleep } from '../../../tests/utils';
+import { sleep, act } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import destroyFns from '../destroyFns';
 
@@ -78,7 +78,9 @@ describe('Modal.confirm triggers callbacks correctly', () => {
       content: 'some descriptions',
       ...args,
     });
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
     jest.useRealTimers();
   }
 
@@ -87,7 +89,9 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     confirm({
       content: 'some descriptions',
     });
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
     expect(document.querySelector('.ant-modal-confirm-title')).toBe(null);
     jest.useRealTimers();
   });
@@ -150,18 +154,26 @@ describe('Modal.confirm triggers callbacks correctly', () => {
       onCancel,
     });
 
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
     await sleep();
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
 
     expect($$(`.ant-modal-confirm-confirm`)).toHaveLength(1);
     TestUtils.Simulate.keyDown($$('.ant-modal')[0], {
       keyCode: KeyCode.ESC,
     });
 
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
     await sleep(0);
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
 
     expect($$(`.ant-modal-confirm-confirm`)).toHaveLength(0);
     expect(onCancel).toHaveBeenCalledTimes(1);
@@ -197,18 +209,26 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     open();
 
     jest.useFakeTimers();
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
     await sleep();
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
 
     expect($$('.ant-modal-confirm')).toHaveLength(1);
 
     await sleep();
     $$('.ant-btn')[0].click();
 
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
     await sleep();
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
 
     expect($$('.ant-modal-confirm')).toHaveLength(0);
     jest.useRealTimers();
@@ -358,7 +378,9 @@ describe('Modal.confirm triggers callbacks correctly', () => {
         expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('new title');
         expect($$('.ant-modal-confirm-content')[0].innerHTML).toBe('new content');
         instance.destroy();
-        jest.runAllTimers();
+        act(() => {
+          jest.runAllTimers();
+        });
         jest.useRealTimers();
       });
     });
@@ -403,7 +425,9 @@ describe('Modal.confirm triggers callbacks correctly', () => {
         );
         expect($$('.ant-modal-confirm-btns .ant-btn-primary')[0].style.color).toBe('red');
         instance.destroy();
-        jest.runAllTimers();
+        act(() => {
+          jest.runAllTimers();
+        });
         jest.useRealTimers();
       });
     });
@@ -487,7 +511,9 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     jest.useFakeTimers();
 
     Modal.destroyAll(); // clear destroyFns
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
 
     const instances = [];
     ['info', 'success', 'warning', 'error'].forEach(type => {
@@ -716,18 +742,26 @@ describe('Modal.confirm triggers callbacks correctly', () => {
           onCancel: close => mock(close),
         });
 
-        jest.runAllTimers();
+        act(() => {
+          jest.runAllTimers();
+        });
         await sleep();
-        jest.runAllTimers();
+        act(() => {
+          jest.runAllTimers();
+        });
 
         expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
         TestUtils.Simulate.keyDown($$('.ant-modal')[0], {
           keyCode: KeyCode.ESC,
         });
 
-        jest.runAllTimers();
+        act(() => {
+          jest.runAllTimers();
+        });
         await sleep(0);
-        jest.runAllTimers();
+        act(() => {
+          jest.runAllTimers();
+        });
 
         expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
         expect(mock).toBeCalledWith(expect.any(Function));

components/notification/__tests__/config.test.js

@@ -1,6 +1,5 @@
-import { act } from 'react-dom/test-utils';
 import notification, { getInstance } from '..';
-import { sleep } from '../../../tests/utils';
+import { sleep, act } from '../../../tests/utils';
 
 describe('notification.config', () => {
   beforeEach(() => {

components/notification/__tests__/index.test.js

@@ -1,8 +1,7 @@
 import { UserOutlined } from '@ant-design/icons';
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import notification, { getInstance } from '..';
-import { sleep } from '../../../tests/utils';
+import { sleep, act } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
@@ -14,7 +13,9 @@ describe('notification', () => {
   });
 
   afterEach(() => {
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
     jest.useRealTimers();
 
     act(() => {

components/popconfirm/__tests__/index.test.js

@@ -4,7 +4,7 @@ import React from 'react';
 import Popconfirm from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render, sleep } from '../../../tests/utils';
+import { fireEvent, render, sleep, act } from '../../../tests/utils';
 import Button from '../../button';
 
 describe('Popconfirm', () => {
@@ -102,7 +102,9 @@ describe('Popconfirm', () => {
     expect(ref.current.getPopupDomNode().className).not.toContain('ant-popover-hidden');
     popconfirm.setProps({ visible: false });
     popconfirm.update(); // https://github.com/enzymejs/enzyme/issues/2305
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
     expect(popconfirm.find('Trigger').props().popupVisible).toBe(false);
     jest.useRealTimers();
   });

components/select/__tests__/index.test.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import Select from '..';
 import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render } from '../../../tests/utils';
+import { fireEvent, render, act } from '../../../tests/utils';
 import Icon from '../../icon';
 
 const { Option } = Select;
@@ -15,8 +14,8 @@ describe('Select', () => {
   rtlTest(Select);
 
   function toggleOpen(container) {
+    fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
     act(() => {
-      fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
       jest.runAllTimers();
     });
   }
@@ -113,7 +112,9 @@ describe('Select', () => {
           <Option value="1">1</Option>
         </Select>,
       );
-      jest.runAllTimers();
+      act(() => {
+        jest.runAllTimers();
+      });
       expect(asFragment().firstChild).toMatchSnapshot();
     });
   });

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

@@ -1,8 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import Table from '..';
-import { fireEvent, render, waitFor } from '../../../tests/utils';
+import { fireEvent, render, waitFor, act } from '../../../tests/utils';
 import Button from '../../button';
 import ConfigProvider from '../../config-provider';
 import Input from '../../input';

components/table/__tests__/Table.pagination.test.js

@@ -2,9 +2,8 @@
 jest.mock('../../_util/scrollTo');
 
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import Table from '..';
-import { fireEvent, render } from '../../../tests/utils';
+import { fireEvent, render, act } from '../../../tests/utils';
 import scrollTo from '../../_util/scrollTo';
 import { resetWarned } from '../../_util/warning';
 

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import Table from '..';
-import { fireEvent, render } from '../../../tests/utils';
+import { fireEvent, render, act } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import { resetWarned } from '../../_util/warning';
 

components/tag/__tests__/index.test.js

@@ -3,6 +3,7 @@ import React from 'react';
 import Tag from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
+import { act } from '../../../tests/utils';
 
 describe('Tag', () => {
   mountTest(Tag);
@@ -25,7 +26,9 @@ describe('Tag', () => {
     expect(wrapper.find('.ant-tag:not(.ant-tag-hidden)').length).toBe(1);
     wrapper.find('.anticon-close').simulate('click');
     expect(onClose).toHaveBeenCalled();
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
     wrapper.update();
     expect(wrapper.find('.ant-tag:not(.ant-tag-hidden)').length).toBe(0);
   });
@@ -38,7 +41,9 @@ describe('Tag', () => {
     expect(wrapper.find('.anticon-close').length).toBe(1);
     expect(wrapper.find('.ant-tag:not(.ant-tag-hidden)').length).toBe(1);
     wrapper.find('.anticon-close').simulate('click');
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
     expect(wrapper.find('.ant-tag:not(.ant-tag-hidden)').length).toBe(1);
   });
 
@@ -81,10 +86,14 @@ describe('Tag', () => {
       const wrapper = mount(<Tag visible />);
       expect(wrapper.render()).toMatchSnapshot();
       wrapper.setProps({ visible: false });
-      jest.runAllTimers();
+      act(() => {
+        jest.runAllTimers();
+      });
       expect(wrapper.render()).toMatchSnapshot();
       wrapper.setProps({ visible: true });
-      jest.runAllTimers();
+      act(() => {
+        jest.runAllTimers();
+      });
       expect(wrapper.render()).toMatchSnapshot();
     });
 
@@ -92,10 +101,14 @@ describe('Tag', () => {
       const wrapper = mount(<Tag visible={false} />);
       expect(wrapper.render()).toMatchSnapshot();
       wrapper.setProps({ visible: true });
-      jest.runAllTimers();
+      act(() => {
+        jest.runAllTimers();
+      });
       expect(wrapper.render()).toMatchSnapshot();
       wrapper.setProps({ visible: false });
-      jest.runAllTimers();
+      act(() => {
+        jest.runAllTimers();
+      });
       expect(wrapper.render()).toMatchSnapshot();
     });
   });

components/typography/__tests__/copy.test.tsx

@@ -1,8 +1,7 @@
 import { LikeOutlined, SmileOutlined } from '@ant-design/icons';
-import { act } from '@testing-library/react';
 import * as copyObj from 'copy-to-clipboard';
 import React from 'react';
-import { fireEvent, render, waitFor } from '../../../tests/utils';
+import { fireEvent, render, waitFor, act } from '../../../tests/utils';
 
 import Base from '../Base';
 
@@ -90,7 +89,9 @@ describe('Typography copy', () => {
 
           jest.useFakeTimers();
           fireEvent.click(wrapper.querySelectorAll('.ant-typography-copy')[0]);
-          jest.runAllTimers();
+          act(() => {
+            jest.runAllTimers();
+          });
 
           unmount();
           jest.useRealTimers();

components/typography/__tests__/index.test.js

@@ -5,7 +5,7 @@ import { resetWarned } from 'rc-util/lib/warning';
 import React from 'react';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render, sleep, waitFor } from '../../../tests/utils';
+import { fireEvent, render, sleep, waitFor, act } from '../../../tests/utils';
 import Base from '../Base';
 import Link from '../Link';
 import Paragraph from '../Paragraph';
@@ -104,7 +104,9 @@ describe('Typography', () => {
           }
 
           fireEvent.mouseEnter(wrapper.querySelector('.ant-typography-copy'));
-          jest.runAllTimers();
+          act(() => {
+            jest.runAllTimers();
+          });
 
           if (tooltips === undefined || tooltips === true) {
             await waitFor(() => {
@@ -271,7 +273,9 @@ describe('Typography', () => {
               expect(onStart).not.toHaveBeenCalled();
             }
             fireEvent.mouseEnter(wrapper.querySelectorAll('.ant-typography-edit')[0]);
-            jest.runAllTimers();
+            act(() => {
+              jest.runAllTimers();
+            });
 
             if (tooltip === undefined || tooltip === true) {
               await waitFor(() => {

components/upload/__tests__/dragger.test.js

@@ -1,9 +1,8 @@
 /* eslint-disable react/no-string-refs, react/prefer-es6-class */
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import Upload from '..';
 import mountTest from '../../../tests/shared/mountTest';
-import { fireEvent, render, waitFor } from '../../../tests/utils';
+import { fireEvent, render, waitFor, act } from '../../../tests/utils';
 import { setup, teardown } from './mock';
 
 describe('Upload.Dragger', () => {

components/upload/__tests__/upload.test.js

@@ -2,11 +2,10 @@
 import produce from 'immer';
 import { cloneDeep } from 'lodash';
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import Upload from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render, sleep } from '../../../tests/utils';
+import { fireEvent, render, sleep, act } from '../../../tests/utils';
 import Form from '../../form';
 import { resetWarned } from '../../_util/warning';
 import { getFileItem, isImageUrl, removeFileItem } from '../utils';

components/upload/__tests__/uploadlist.test.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import Upload from '..';
-import { fireEvent, render, sleep, waitFor } from '../../../tests/utils';
+import { fireEvent, render, sleep, waitFor, act } from '../../../tests/utils';
 import Form from '../../form';
 import UploadList from '../UploadList';
 import { previewImage } from '../utils';
@@ -1134,7 +1133,9 @@ describe('Upload List', () => {
       await waitPromise();
 
       // Wait for mock request finish request
-      jest.runAllTimers();
+      act(() => {
+        jest.runAllTimers();
+      });
 
       // Basic called times
       expect(onChange).toHaveBeenCalled();