test: rm legacy react-dom/test-utils (#685)

Author: li-jia-nan

tests/common/index.ts

@@ -1,7 +1,6 @@
-import { act } from 'react-dom/test-utils';
 import timeout from './timeout';
 import { matchNamePath } from '../../src/utils/valueUtil';
-import { fireEvent } from '@testing-library/react';
+import { fireEvent, act } from '@testing-library/react';
 
 export function getInput(
   container: HTMLElement,

tests/list.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, act } from '@testing-library/react';
 import { resetWarned } from 'rc-util/lib/warning';
 import Form, { Field, List } from '../src';
 import type { FormProps } from '../src';
@@ -863,25 +862,23 @@ describe('Form.List', () => {
         <Form.List name="list">
           {(fields, { add }) => (
             <>
-              {
-                fields.map((field) => {
-                  return (
-                    <React.Fragment key={field.key}>
-                      <Form.Field name={[field.name, 'field1']}>
-                        <input placeholder="field1" />
-                      </Form.Field>
-                      <Form.Field name={[field.name, 'field2']}>
-                        <input placeholder="field2" />
-                      </Form.Field>
-                    </React.Fragment>
-                  );
-                })
-              }
+              {fields.map(field => {
+                return (
+                  <React.Fragment key={field.key}>
+                    <Form.Field name={[field.name, 'field1']}>
+                      <input placeholder="field1" />
+                    </Form.Field>
+                    <Form.Field name={[field.name, 'field2']}>
+                      <input placeholder="field2" />
+                    </Form.Field>
+                  </React.Fragment>
+                );
+              })}
               <button onClick={() => add()}>add</button>
             </>
           )}
         </Form.List>
-      </Form>
+      </Form>,
     );
 
     expect(formRef.current.isFieldsTouched(true)).toBeFalsy();

tests/useWatch.test.tsx

@@ -1,10 +1,9 @@
 import React, { useRef, useState } from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, act } from '@testing-library/react';
 import type { FormInstance } from '../src';
 import { List } from '../src';
 import Form, { Field } from '../src';
 import timeout from './common/timeout';
-import { act } from 'react-dom/test-utils';
 import { Input } from './common/InfoField';
 import { stringify } from '../src/useWatch';
 import { changeValue } from './common';

tests/validate.test.tsx

@@ -1,6 +1,5 @@
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, act } from '@testing-library/react';
 import React, { useEffect } from 'react';
-import { act } from 'react-dom/test-utils';
 import Form, { Field, useForm } from '../src';
 import type { FormInstance, ValidateMessages } from '../src/interface';
 import { changeValue, getInput, matchError } from './common';
@@ -9,23 +8,19 @@ import timeout, { waitFakeTime } from './common/timeout';
 
 describe('Form.Validate', () => {
   it('required', async () => {
-    let form;
+    const form = React.createRef<FormInstance>();
     const { container } = render(
       <div>
-        <Form
-          ref={instance => {
-            form = instance;
-          }}
-        >
+        <Form ref={form}>
           <InfoField name="username" rules={[{ required: true }]} />
         </Form>
       </div>,
     );
 
     await changeValue(getInput(container), ['bamboo', '']);
     matchError(container, true);
-    expect(form.getFieldError('username')).toEqual(["'username' is required"]);
-    expect(form.getFieldsError()).toEqual([
+    expect(form.current?.getFieldError('username')).toEqual(["'username' is required"]);
+    expect(form.current?.getFieldsError()).toEqual([
       {
         name: ['username'],
         errors: ["'username' is required"],
@@ -34,7 +29,7 @@ describe('Form.Validate', () => {
     ]);
 
     // Contains not exists
-    expect(form.getFieldsError(['username', 'not-exist'])).toEqual([
+    expect(form.current?.getFieldsError(['username', 'not-exist'])).toEqual([
       {
         name: ['username'],
         errors: ["'username' is required"],
@@ -1075,11 +1070,8 @@ describe('Form.Validate', () => {
     matchError(container.querySelectorAll<HTMLDivElement>('.field')[1], `validate`);
     matchError(container.querySelectorAll<HTMLDivElement>('.field')[2], false);
 
-
     // Revalidate
-    rerender(
-      <Demo touchMessage="new_touch" validateMessage="new_validate" />,
-    );
+    rerender(<Demo touchMessage="new_touch" validateMessage="new_validate" />);
     formRef.current.validateFields({ dirty: true });
 
     await waitFakeTime();