Migrate to testing-lib (#553)

* add

* add

* fix type

* add test case

* fix test case

* fix key

* add

* add type

* add

Author: li-jia-nan

docs/examples/components/LabelField.tsx

@@ -9,7 +9,7 @@ interface ErrorProps {
   children?: React.ReactNode[];
 }
 
-const Error = ({ children, warning }: ErrorProps) => (
+const Error: React.FC<ErrorProps> = ({ children, warning }) => (
   <ul style={{ color: warning ? 'orange' : 'red' }}>
     {children.map((error: React.ReactNode, index: number) => (
       <li key={index}>{error}</li>

docs/examples/components/useDraggable.ts

@@ -1,5 +1,6 @@
 import { useRef } from 'react';
-import { DragObjectWithType, useDrag, useDrop } from 'react-dnd';
+import type { DragObjectWithType } from 'react-dnd';
+import { useDrag, useDrop } from 'react-dnd';
 
 type DragWithIndex = DragObjectWithType & {
   index: number;

docs/examples/renderProps.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/label-has-associated-control */
 import React from 'react';
 import Form from 'rc-field-form';
 import Input from './components/Input';
@@ -45,7 +44,6 @@ export default class Demo extends React.Component {
                   </div>
                 )}
               </Field>
-
               {list.map((_, index) => (
                 <Field key={index} name={`list_field_${index}`}>
                   <Input placeholder={`list_field_${index}`} />

docs/examples/validate.tsx

@@ -6,7 +6,11 @@ import Input from './components/Input';
 
 const { Field } = Form;
 
-const Error = ({ children }) => (
+interface ErrorProps {
+  children?: React.ReactNode[];
+}
+
+const Error: React.FC<ErrorProps> = ({ children }) => (
   <ul style={{ color: 'red' }}>
     {children.map((error, i) => (
       <li key={i}>{error}</li>
@@ -19,14 +23,7 @@ const FieldState = ({ form, name }) => {
   const validating = form.isFieldValidating(name);
 
   return (
-    <div
-      style={{
-        color: 'green',
-        position: 'absolute',
-        marginTop: -35,
-        left: 200,
-      }}
-    >
+    <div style={{ color: 'green', position: 'absolute', marginTop: -35, left: 200 }}>
       {touched ? <span>Touched!</span> : null}
       {validating ? <span>Validating!</span> : null}
     </div>

tests/common/InfoField.tsx

@@ -6,7 +6,9 @@ interface InfoFieldProps extends FieldProps {
   children?: React.ReactElement;
 }
 
-export const Input = ({ value = '', ...props }) => <input {...props} value={value} />;
+export const Input: React.FC<any> = ({ value = '', ...props }) => (
+  <input {...props} value={value} />
+);
 
 /**
  * Return a wrapped Field with meta info

tests/common/index.ts

@@ -4,7 +4,7 @@ import timeout from './timeout';
 import { Field } from '../../src';
 import { getNamePath, matchNamePath } from '../../src/utils/valueUtil';
 
-export async function changeValue(wrapper, value) {
+export async function changeValue(wrapper: ReactWrapper, value: string | string[]) {
   wrapper.find('input').simulate('change', { target: { value } });
   await act(async () => {
     await timeout();
@@ -40,36 +40,34 @@ export function matchError(
   }
 }
 
-export function getField(wrapper, index: string | number | string[] = 0) {
+export function getField(wrapper: ReactWrapper, index: string | number | string[] = 0) {
   if (typeof index === 'number') {
     return wrapper.find(Field).at(index);
   }
-
   const name = getNamePath(index);
   const fields = wrapper.find(Field);
   for (let i = 0; i < fields.length; i += 1) {
     const field = fields.at(i);
-    const fieldName = getNamePath(field.props().name);
-
+    const fieldName = getNamePath((field.props() as any).name);
     if (matchNamePath(name, fieldName)) {
       return field;
     }
   }
   return null;
 }
 
-export function matchArray(source, target, matchKey) {
+export function matchArray(source: any[], target: any[], matchKey: React.Key) {
   expect(matchKey).toBeTruthy();
 
   try {
     expect(source.length).toBe(target.length);
   } catch (err) {
     throw new Error(
       `
-Array length not match.
-source(${source.length}): ${JSON.stringify(source)}
-target(${target.length}): ${JSON.stringify(target)}
-`.trim(),
+        Array length not match.
+        source(${source.length}): ${JSON.stringify(source)}
+        target(${target.length}): ${JSON.stringify(target)}
+      `.trim(),
     );
   }
 

tests/context.test.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import type { FormInstance } from '../src';
 import Form, { FormProvider } from '../src';
 import InfoField from './common/InfoField';
 import { changeValue, matchError, getField } from './common';
@@ -77,7 +79,7 @@ describe('Form.Context', () => {
     it('multiple context', async () => {
       const onFormChange = jest.fn();
 
-      const Demo = changed => (
+      const Demo: React.FC<{ changed?: boolean }> = ({ changed }) => (
         <FormProvider onFormChange={onFormChange}>
           <FormProvider>
             {!changed ? (
@@ -105,17 +107,12 @@ describe('Form.Context', () => {
 
   it('submit', async () => {
     const onFormFinish = jest.fn();
-    let form1;
+    const form = React.createRef<FormInstance>();
 
     const wrapper = mount(
       <div>
         <FormProvider onFormFinish={onFormFinish}>
-          <Form
-            name="form1"
-            ref={instance => {
-              form1 = instance;
-            }}
-          >
+          <Form name="form1" ref={form}>
             <InfoField name="name" rules={[{ required: true }]} />
           </Form>
           <Form name="form2" />
@@ -124,12 +121,12 @@ describe('Form.Context', () => {
     );
 
     await changeValue(getField(wrapper), '');
-    form1.submit();
+    form.current?.submit();
     await timeout();
     expect(onFormFinish).not.toHaveBeenCalled();
 
     await changeValue(getField(wrapper), 'Light');
-    form1.submit();
+    form.current?.submit();
     await timeout();
     expect(onFormFinish).toHaveBeenCalled();
 
@@ -140,14 +137,11 @@ describe('Form.Context', () => {
   });
 
   it('do nothing if no Provider in use', () => {
-    const wrapper = mount(
+    const { rerender } = render(
       <div>
         <Form name="no" />
       </div>,
     );
-
-    wrapper.setProps({
-      children: null,
-    });
+    rerender(<div>{null}</div>);
   });
 });

tests/control.test.tsx

@@ -3,25 +3,25 @@ import { mount } from 'enzyme';
 import Form from '../src';
 import InfoField from './common/InfoField';
 import { changeValue, matchError } from './common';
+import { render } from '@testing-library/react';
 
 describe('Form.Control', () => {
   it('fields', () => {
-    const wrapper = mount(
+    const { container, rerender } = render(
       <Form>
         <InfoField name="username" />
       </Form>,
     );
-
-    wrapper.setProps({
-      fields: [{ name: 'username', value: 'Bamboo' }],
-    });
-    wrapper.update();
-
-    expect(wrapper.find('input').props().value).toEqual('Bamboo');
+    rerender(
+      <Form fields={[{ name: 'username', value: 'Bamboo' }]}>
+        <InfoField name="username" />
+      </Form>,
+    );
+    expect(container.querySelector<HTMLInputElement>('input')?.value).toBe('Bamboo');
   });
 
   it('fully test', async () => {
-    const Test = () => {
+    const Test: React.FC = () => {
       const [fields, setFields] = React.useState([]);
 
       return (

tests/dependencies.test.tsx

@@ -1,21 +1,18 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import type { FormInstance } from '../src';
 import Form, { Field } from '../src';
 import timeout from './common/timeout';
 import InfoField, { Input } from './common/InfoField';
 import { changeValue, matchError, getField } from './common';
 
 describe('Form.Dependencies', () => {
   it('touched', async () => {
-    let form = null;
+    const form = React.createRef<FormInstance>();
 
     const wrapper = mount(
       <div>
-        <Form
-          ref={instance => {
-            form = instance;
-          }}
-        >
+        <Form ref={form}>
           <InfoField name="field_1" />
           <InfoField name="field_2" rules={[{ required: true }]} dependencies={['field_1']} />
         </Form>
@@ -27,13 +24,13 @@ describe('Form.Dependencies', () => {
     matchError(getField(wrapper, 1), false);
 
     // Trigger if touched
-    form.setFields([{ name: 'field_2', touched: true }]);
+    form.current?.setFields([{ name: 'field_2', touched: true }]);
     await changeValue(getField(wrapper, 0), '');
     matchError(getField(wrapper, 1), true);
   });
 
   describe('initialValue', () => {
-    function test(name, formProps, fieldProps = {}) {
+    function test(name: string, formProps = {}, fieldProps = {}) {
       it(name, async () => {
         let validated = false;
 
@@ -68,16 +65,12 @@ describe('Form.Dependencies', () => {
   });
 
   it('nest dependencies', async () => {
-    let form = null;
+    const form = React.createRef<FormInstance>();
     let rendered = false;
 
     const wrapper = mount(
       <div>
-        <Form
-          ref={instance => {
-            form = instance;
-          }}
-        >
+        <Form ref={form}>
           <Field name="field_1">
             <Input />
           </Field>
@@ -94,7 +87,7 @@ describe('Form.Dependencies', () => {
       </div>,
     );
 
-    form.setFields([
+    form.current?.setFields([
       { name: 'field_1', touched: true },
       { name: 'field_2', touched: true },
       { name: 'field_3', touched: true },