test: wrap React.StrictMode for test cases

components/avatar/__tests__/Avatar.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
-import { render } from '@testing-library/react';
+import { render } from '../../../tests/utils';
 import Avatar from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';

components/breadcrumb/__tests__/Breadcrumb.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { render } from '@testing-library/react';
+import { render } from '../../../tests/utils';
 import Breadcrumb from '../index';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';

components/button/__tests__/index.test.tsx

@@ -1,14 +1,13 @@
 import React, { Component } from 'react';
 import { mount } from 'enzyme';
-import { render } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import { SearchOutlined } from '@ant-design/icons';
 import { resetWarned } from 'rc-util/lib/warning';
 import Button from '..';
 import ConfigProvider from '../../config-provider';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { sleep } from '../../../tests/utils';
+import { sleep, render } from '../../../tests/utils';
 import { SizeType } from '../../config-provider/SizeContext';
 
 describe('Button', () => {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { render } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
+import { render } from '../../../tests/utils';
 import ConfigProvider from '..';
 import zhCN from '../../locale/zh_CN';
 import Form from '../../form';

components/drawer/__tests__/Drawer.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { render } from '@testing-library/react';
+import { render } from '../../../tests/utils';
 import Drawer from '..';
 import ConfigProvider from '../../config-provider';
 import mountTest from '../../../tests/shared/mountTest';

components/form/__tests__/index.test.js

@@ -1,6 +1,5 @@
 import React, { Component, useState } from 'react';
 import { mount } from 'enzyme';
-import { render, fireEvent } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import Form from '..';
@@ -12,7 +11,7 @@ import Select from '../../select';
 
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { sleep } from '../../../tests/utils';
+import { sleep, render, fireEvent } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import zhCN from '../../locale/zh_CN';
 

components/form/__tests__/list.test.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import { render, fireEvent } from '@testing-library/react';
 import Form from '..';
 import Input from '../../input';
 import Button from '../../button';
-import { sleep } from '../../../tests/utils';
+import { sleep, render, fireEvent } from '../../../tests/utils';
 
 describe('Form.List', () => {
   async function change(wrapper, index, value) {

components/grid/__tests__/gap.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
-import { render } from '@testing-library/react';
 import { mount } from 'enzyme';
+import { render } from '../../../tests/utils';
 import { Col, Row } from '..';
 // eslint-disable-next-line no-unused-vars
 import * as styleChecker from '../../_util/styleChecker';

components/input/__tests__/focus.test.tsx

@@ -3,6 +3,7 @@ import { mount } from 'enzyme';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import { InputRef } from '../Input';
 import Input from '..';
+import { render, fireEvent } from '../../../tests/utils';
 
 const { TextArea } = Input;
 
@@ -58,12 +59,11 @@ describe('Input.Focus', () => {
   });
 
   it('disabled should reset focus', () => {
-    const wrapper = mount(<Input allowClear />);
-    wrapper.find('input').simulate('focus');
-    expect(wrapper.exists('.ant-input-affix-wrapper-focused')).toBeTruthy();
+    const { rerender, container } = render(<Input allowClear />);
+    fireEvent.focus(container.querySelector('input')!);
+    expect(container.querySelector('.ant-input-affix-wrapper-focused')).toBeTruthy();
 
-    wrapper.setProps({ disabled: true });
-    wrapper.update();
-    expect(wrapper.exists('.ant-input-affix-wrapper-focused')).toBeFalsy();
+    rerender(<Input allowClear disabled />);
+    expect(container.querySelector('.ant-input-affix-wrapper-focused')).toBeFalsy();
   });
 });

components/input/__tests__/index.test.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { mount } from 'enzyme';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent } from '../../../tests/utils';
 // eslint-disable-next-line import/no-unresolved
 import Form from '../../form';
 import Input, { InputProps, InputRef } from '..';

components/input/__tests__/textarea.test.js

@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
 import { mount } from 'enzyme';
-import { render } from '@testing-library/react';
 import RcTextArea from 'rc-textarea';
 import Input from '..';
 import focusTest from '../../../tests/shared/focusTest';
-import { sleep } from '../../../tests/utils';
+import { sleep, render } from '../../../tests/utils';
 
 const { TextArea } = Input;
 

components/menu/__tests__/index.test.js

@@ -7,13 +7,13 @@ import {
   PieChartOutlined,
   UserOutlined,
 } from '@ant-design/icons';
-import { render, fireEvent } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import Menu from '..';
 import Layout from '../../layout';
 import Tooltip from '../../tooltip';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
+import { render, fireEvent } from '../../../tests/utils';
 import collapseMotion from '../../_util/motion';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;

components/popconfirm/__tests__/index.test.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { spyElementPrototype } from 'rc-util/lib/test/domHook';
-import { render, fireEvent } from '@testing-library/react';
 import Popconfirm from '..';
 import mountTest from '../../../tests/shared/mountTest';
-import { sleep } from '../../../tests/utils';
+import { sleep, render, fireEvent } from '../../../tests/utils';
 import rtlTest from '../../../tests/shared/rtlTest';
 import Button from '../../button';
 

components/popover/__tests__/index.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { render } from '@testing-library/react';
+import { render } from '../../../tests/utils';
 import Popover from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import ConfigProvider from '../../config-provider';

components/result/__tests__/index.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { render } from '@testing-library/react';
+import { render } from '../../../tests/utils';
 import Result from '..';
 import Button from '../../button';
 import mountTest from '../../../tests/shared/mountTest';

components/spin/__tests__/index.test.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { mount } from 'enzyme';
 import Spin from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
+import { render } from '../../../tests/utils';
 
 describe('Spin', () => {
   mountTest(Spin);
@@ -20,15 +21,15 @@ describe('Spin', () => {
 
   it("should render custom indicator when it's set", () => {
     const customIndicator = <div className="custom-indicator" />;
-    const wrapper = render(<Spin indicator={customIndicator} />);
-    expect(wrapper).toMatchSnapshot();
+    const wrapper = mount(<Spin indicator={customIndicator} />);
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('should be controlled by spinning', () => {
-    const wrapper = mount(<Spin spinning={false} />);
-    expect(wrapper.instance().state.spinning).toBe(false);
-    wrapper.setProps({ spinning: true });
-    expect(wrapper.instance().state.spinning).toBe(true);
+    const { container, rerender } = render(<Spin spinning={false} />);
+    expect(container.querySelector('.ant-spin')).not.toHaveClass('ant-spin-spinning');
+    rerender(<Spin spinning />);
+    expect(container.querySelector('.ant-spin')).toHaveClass('ant-spin-spinning');
   });
 
   it('if indicator set null should not be render default indicator', () => {

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

@@ -2,7 +2,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent } from '../../../tests/utils';
 import Table from '..';
 import Input from '../../input';
 import Tooltip from '../../tooltip';

components/table/__tests__/Table.test.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { render } from '@testing-library/react';
 import Table from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { sleep } from '../../../tests/utils';
+import { sleep, render } from '../../../tests/utils';
 
 const { Column, ColumnGroup } = Table;
 

components/transfer/__tests__/customize.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { render } from '@testing-library/react';
+import { render } from '../../../tests/utils';
 import Transfer from '../index';
 
 describe('Transfer.Customize', () => {

components/transfer/__tests__/search.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent } from '../../../tests/utils';
 import Search from '../search';
 import Transfer from '../index';
 

components/typography/__tests__/index.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { render } from '@testing-library/react';
 import { SmileOutlined, LikeOutlined, HighlightOutlined, CheckOutlined } from '@ant-design/icons';
 import KeyCode from 'rc-util/lib/KeyCode';
 import { resetWarned } from 'rc-util/lib/warning';
@@ -14,7 +13,7 @@ import Base from '../Base';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import Typography from '../Typography';
-import { sleep } from '../../../tests/utils';
+import { sleep, render } from '../../../tests/utils';
 
 jest.mock('copy-to-clipboard');
 

components/upload/__tests__/upload.test.js

@@ -1,7 +1,6 @@
 /* eslint-disable react/no-string-refs, react/prefer-es6-class */
 import React from 'react';
 import { mount } from 'enzyme';
-import { render, fireEvent } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import produce from 'immer';
 import { cloneDeep } from 'lodash';
@@ -12,7 +11,7 @@ import { setup, teardown } from './mock';
 import { resetWarned } from '../../_util/devWarning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { sleep } from '../../../tests/utils';
+import { sleep, render, fireEvent } from '../../../tests/utils';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 

tests/setup.js

@@ -60,3 +60,20 @@ Object.assign(Enzyme.ReactWrapper.prototype, {
     target.getBoundingClientRect = originGetBoundingClientRect;
   },
 });
+
+// React.StrictMode wrapper
+jest.mock('enzyme', () => {
+  const enzyme = jest.requireActual('enzyme');
+  const { StrictMode, cloneElement } = jest.requireActual('react');
+  const { mount, render } = enzyme;
+
+  function EnzymeWrapper({ children, ...props }) {
+    return <StrictMode>{cloneElement(children, props)}</StrictMode>;
+  }
+
+  return {
+    ...enzyme,
+    mount: (ui, ...args) => mount(<EnzymeWrapper>{ui}</EnzymeWrapper>, ...args),
+    render: (ui, ...args) => render(<EnzymeWrapper>{ui}</EnzymeWrapper>, ...args),
+  };
+});

tests/shared/focusTest.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { render } from '@testing-library/react';
 import { mount, ReactWrapper } from 'enzyme';
-import { sleep } from '../utils';
+import { sleep, render } from '../utils';
 
 // eslint-disable-next-line jest/no-export
 export default function focusTest(

tests/utils.ts

@@ -1,5 +1,7 @@
 import MockDate from 'mockdate';
+import { StrictMode, ReactElement } from 'react';
 import { act } from 'react-dom/test-utils';
+import { render, RenderOptions } from '@testing-library/react';
 
 export function setMockDate(dateString = '2017-09-18T03:30:07.795') {
   MockDate.set(dateString);
@@ -18,3 +20,10 @@ export const sleep = async (timeout = 0) => {
     });
   });
 };
+
+const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) =>
+  render(ui, { wrapper: StrictMode, ...options });
+
+export { customRender as render };
+
+export * from '@testing-library/react';