test: migrate part of locale-provider tests (#37198)

* test: migrate part of locale-provider tests

* test: migrate part of locale-provider tests

* test: migrate part of locale-provider tests

* test: migrate part of locale-provider tests

components/locale-provider/__tests__/cached-context.test.tsx

@@ -1,11 +1,9 @@
-import { mount } from 'enzyme';
 import React, { memo, useContext, useRef, useState } from 'react';
+import { render, fireEvent } from '../../../tests/utils';
 import LocaleProvider, { ANT_MARK } from '..';
 import LocaleContext from '../context';
 
-const defaultLocale = {
-  locale: 'locale',
-};
+const defaultLocale = { locale: 'locale' };
 // we use'memo' here in order to only render inner component while context changed.
 const CacheInner = memo(() => {
   const countRef = useRef(0);
@@ -19,7 +17,7 @@ const CacheInner = memo(() => {
   );
 });
 
-const CacheOuter = () => {
+const CacheOuter: React.FC = () => {
   // We use 'useState' here in order to trigger parent component rendering.
   const [count, setCount] = useState(1);
   const handleClick = () => {
@@ -41,13 +39,13 @@ const CacheOuter = () => {
 };
 
 it("Rendering on LocaleProvider won't trigger rendering on child component.", () => {
-  const wrapper = mount(<CacheOuter />);
-  wrapper.find('#parent_btn').at(0).simulate('click');
-  expect(wrapper.find('#parent_count').text()).toBe('2');
+  const { container } = render(<CacheOuter />);
+  fireEvent.click(container.querySelector('#parent_btn')!);
+  expect(container.querySelector('#parent_count')?.innerHTML).toBe('2');
   // child component won't rerender
-  expect(wrapper.find('#child_count').text()).toBe('1');
-  wrapper.find('#parent_btn').at(0).simulate('click');
-  expect(wrapper.find('#parent_count').text()).toBe('3');
+  expect(container.querySelector('#child_count')?.innerHTML).toBe('1');
+  fireEvent.click(container.querySelector('#parent_btn')!);
+  expect(container.querySelector('#parent_count')?.innerHTML).toBe('3');
   // child component won't rerender
-  expect(wrapper.find('#child_count').text()).toBe('1');
+  expect(container.querySelector('#child_count')?.innerHTML).toBe('1');
 });

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

@@ -1,12 +1,11 @@
-import { mount } from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { Modal } from '../..';
-import { sleep } from '../../../tests/utils';
+import { sleep, render, fireEvent } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import zhCN from '../zh_CN';
 
-class Demo extends React.Component {
+class Demo extends React.Component<{ type: string }> {
   static defaultProps = {};
 
   componentDidMount() {
@@ -24,8 +23,8 @@ describe('Locale Provider demo', () => {
   it('change type', async () => {
     jest.useFakeTimers();
 
-    const BasicExample = () => {
-      const [type, setType] = React.useState('');
+    const BasicExample: React.FC = () => {
+      const [type, setType] = React.useState<string>('');
       return (
         <div>
           <a className="about" onClick={() => setType('about')}>
@@ -49,21 +48,21 @@ describe('Locale Provider demo', () => {
         </div>
       );
     };
-    const wrapper = mount(<BasicExample />);
+    const { container } = render(<BasicExample />);
 
-    wrapper.find('.about').at(0).simulate('click');
+    fireEvent.click(container.querySelector('.about')!);
     await act(async () => {
       jest.runAllTimers();
       await sleep();
     });
 
-    wrapper.find('.dashboard').at(0).simulate('click');
+    fireEvent.click(container.querySelector('.dashboard')!);
     await act(async () => {
       jest.runAllTimers();
       await sleep();
     });
 
-    expect(document.body.querySelectorAll('.ant-btn-primary span')[0].textContent).toBe('确 定');
+    expect(document.body.querySelectorAll('.ant-btn-primary span')[0]?.textContent).toBe('确 定');
     Modal.destroyAll();
     jest.useRealTimers();
   });

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

@@ -1,8 +1,8 @@
 /* eslint-disable react/no-multi-comp */
-import { mount } from 'enzyme';
 import MockDate from 'mockdate';
 import moment from 'moment';
 import React from 'react';
+import { render } from '../../../tests/utils';
 import LocaleProvider from '..';
 import {
   Calendar,
@@ -16,7 +16,6 @@ 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';
@@ -162,17 +161,9 @@ const columns = [
   {
     title: 'Name',
     dataIndex: 'name',
-    filters: [
-      {
-        text: 'filter1',
-        value: 'filter1',
-      },
-    ],
-  },
-  {
-    title: 'Age',
-    dataIndex: 'age',
+    filters: [{ text: 'filter1', value: 'filter1' }],
   },
+  { title: 'Age', dataIndex: 'age' },
 ];
 
 const App = () => (
@@ -214,52 +205,36 @@ describe('Locale Provider', () => {
 
   locales.forEach(locale => {
     it(`should display the text as ${locale.locale}`, () => {
-      const wrapper = mount(
+      const { container } = render(
         <LocaleProvider locale={locale}>
           <App />
         </LocaleProvider>,
       );
-      expect(wrapper.render()).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   it('should change locale of Modal.xxx', () => {
-    class ModalDemo extends React.Component {
-      componentDidMount() {
-        jest.useFakeTimers();
-        Modal.confirm({
-          title: 'Hello World!',
-        });
-        act(() => {
-          jest.runAllTimers();
-        });
-        jest.useRealTimers();
-      }
-
-      render() {
-        return null;
-      }
-    }
     locales.forEach(locale => {
-      mount(
+      const { container } = render(
         <LocaleProvider locale={locale}>
-          <ModalDemo />
+          <Modal title="Locale Modal" visible getContainer={false}>
+            Modal
+          </Modal>
         </LocaleProvider>,
       );
-      const currentConfirmNode =
-        document.querySelectorAll('.ant-modal-confirm')[
-          document.querySelectorAll('.ant-modal-confirm').length - 1
-        ];
-      let cancelButtonText = currentConfirmNode.querySelectorAll(
-        '.ant-btn:not(.ant-btn-primary) span',
-      )[0].innerHTML;
-      let okButtonText = currentConfirmNode.querySelectorAll('.ant-btn-primary span')[0].innerHTML;
-      if (locale.locale.indexOf('zh-') === 0) {
+      let cancelButtonText = container.firstChild.querySelector(
+        'button.ant-btn-default span',
+      )?.innerHTML;
+      let okButtonText = container.firstChild.querySelector(
+        'button.ant-btn-primary span',
+      )?.innerHTML;
+      if (locale.locale.includes('zh-')) {
         cancelButtonText = cancelButtonText.replace(' ', '');
         okButtonText = okButtonText.replace(' ', '');
       }
-      expect(cancelButtonText).toBe(locale.Modal.cancelText);
-      expect(okButtonText).toBe(locale.Modal.okText);
+      expect(cancelButtonText).toBe(locale.Modal?.cancelText);
+      expect(okButtonText).toBe(locale.Modal?.okText);
     });
   });
 
@@ -272,11 +247,13 @@ describe('Locale Provider', () => {
       </LocaleProvider>
     );
 
-    const wrapper = mount(<Test locale={zhCN} />);
-    expect(wrapper.render()).toMatchSnapshot();
-    wrapper.setProps({ locale: frFR });
-    expect(wrapper.render()).toMatchSnapshot();
-    wrapper.setProps({ locale: null });
-    expect(wrapper.render()).toMatchSnapshot();
+    const { container, rerender } = render(<Test locale={zhCN} />);
+    expect(container.firstChild).toMatchSnapshot();
+
+    rerender(<Test locale={frFR} />);
+    expect(container.firstChild).toMatchSnapshot();
+
+    rerender(<Test />);
+    expect(container.firstChild).toMatchSnapshot();
   });
 });