test: React StrictMode

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 '@testing-library/jest-dom';
 import Avatar from '..';
 import mountTest from '../../../tests/shared/mountTest';

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 '@testing-library/jest-dom';
 import Breadcrumb from '../index';
 import mountTest from '../../../tests/shared/mountTest';

components/button/__tests__/index.test.tsx

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { mount } from 'enzyme';
-import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { act } from 'react-dom/test-utils';
 import { SearchOutlined } from '@ant-design/icons';
@@ -9,7 +8,7 @@ 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,8 +1,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 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 '@testing-library/jest-dom';
 import Drawer from '..';
 import ConfigProvider from '../../config-provider';

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 '@testing-library/jest-dom';
 import { act } from 'react-dom/test-utils';
 import scrollIntoView from 'scroll-into-view-if-needed';
@@ -13,7 +12,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,12 +1,11 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 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,8 +1,8 @@
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
-import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 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__/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';
 import '@testing-library/jest-dom';
 // eslint-disable-next-line import/no-unresolved
 import Form from '../../form';

components/input/__tests__/textarea.test.js

@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 import { mount } from 'enzyme';
-import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 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,9 +7,8 @@ import {
   PieChartOutlined,
   UserOutlined,
 } from '@ant-design/icons';
-import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { act } from 'react-dom/test-utils';
+import { act, render, fireEvent } from 'react-dom/test-utils';
 import Menu from '..';
 import Layout from '../../layout';
 import Tooltip from '../../tooltip';

components/popconfirm/__tests__/index.test.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { spyElementPrototype } from 'rc-util/lib/test/domHook';
-import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 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 '@testing-library/jest-dom';
 import Popover from '..';
 import mountTest from '../../../tests/shared/mountTest';

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 '@testing-library/jest-dom';
 import Result from '..';
 import Button from '../../button';

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 '@testing-library/jest-dom';
 import Table from '..';
 import Input from '../../input';

components/table/__tests__/Table.test.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 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 '@testing-library/jest-dom';
 import Transfer from '../index';
 

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 '@testing-library/jest-dom';
 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 '@testing-library/jest-dom';
 import { SmileOutlined, LikeOutlined, HighlightOutlined, CheckOutlined } from '@ant-design/icons';
 import KeyCode from 'rc-util/lib/KeyCode';
@@ -15,7 +14,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 '@testing-library/jest-dom';
 import { act } from 'react-dom/test-utils';
 import produce from 'immer';
@@ -13,7 +12,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

@@ -5,10 +5,10 @@ const { _rs: onEsResize } = require('rc-resize-observer/es/utils/observerUtil');
 // eslint-disable-next-line no-console
 console.log('Current React Version:', React.version);
 
-// jest.mock('react', () => ({
-//   ...jest.requireActual('react'),
-//   useLayoutEffect: jest.requireActual('react').useEffect,
-// }));
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useLayoutEffect: jest.requireActual('react').useEffect,
+}));
 
 /* eslint-disable global-require */
 if (typeof window !== 'undefined') {
@@ -60,3 +60,11 @@ Object.assign(Enzyme.ReactWrapper.prototype, {
     target.getBoundingClientRect = originGetBoundingClientRect;
   },
 });
+
+// React.StrictMode wrapper
+const originalEnzymeRender = Enzyme.render;
+const originalEnzymeMount = Enzyme.mount;
+Object.assign(Enzyme, {
+  render: (ui, ...args) => originalEnzymeRender(<React.StrictMode>{ui}</React.StrictMode>, ...args),
+  mount: (ui, ...args) => originalEnzymeMount(<React.StrictMode>{ui}</React.StrictMode>, ...args),
+});

tests/shared/focusTest.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 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';