Migrate to testing-lib (#552)

* js => ts

* Migrate to testing-lib

Author: li-jia-nan

jest.config.js

@@ -0,0 +1,7 @@
+import type { Config } from 'jest';
+
+const config: Config = {
+  setupFilesAfterEnv: ['<rootDir>/tests/setupAfterEnv.ts'],
+};
+
+export default config;

jest.config.ts

@@ -55,9 +55,9 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.0.0",
+    "@testing-library/react": "^12.1.5",
     "@types/enzyme": "^3.10.5",
-    "@types/jest": "^26.0.20",
+    "@types/jest": "^29.2.5",
     "@types/lodash": "^4.14.135",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
@@ -71,6 +71,7 @@
     "father": "^2.13.6",
     "father-build": "^1.18.6",
     "gh-pages": "^3.1.0",
+    "jest": "^29.3.1",
     "np": "^5.0.3",
     "prettier": "^2.1.2",
     "react": "^16.14.0",

package.json

@@ -90,7 +90,7 @@ export function matchNamePath(
 }
 
 // Like `shallowEqual`, but we not check the data which may cause re-render
-type SimilarObject = string | number | {};
+type SimilarObject = string | number | object;
 export function isSimilar(source: SimilarObject, target: SimilarObject) {
   if (source === target) {
     return true;

src/utils/valueUtil.ts

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
-
 import { act } from 'react-dom/test-utils';
 import type { ReactWrapper } from 'enzyme';
 import timeout from './timeout';
@@ -42,7 +40,7 @@ export function matchError(
   }
 }
 
-export function getField(wrapper, index: string | number = 0) {
+export function getField(wrapper, index: string | number | string[] = 0) {
   if (typeof index === 'number') {
     return wrapper.find(Field).at(index);
   }
@@ -88,5 +86,3 @@ export async function validateFields(form, ...args) {
     await form.validateFields(...args);
   });
 }
-
-/* eslint-enable import/no-extraneous-dependencies */

tests/common/index.ts

@@ -1,5 +1,5 @@
 export default (timeout: number = 0) => {
-  return new Promise(resolve => {
+  return new Promise<void>(resolve => {
     setTimeout(resolve, timeout);
   });
 };

tests/common/timeout.ts

@@ -33,7 +33,7 @@ describe('Form.Dependencies', () => {
   });
 
   describe('initialValue', () => {
-    function test(name, formProps, fieldProps) {
+    function test(name, formProps, fieldProps = {}) {
       it(name, async () => {
         let validated = false;
 

tests/context.test.js renamed to tests/context.test.tsx

@@ -1,6 +1,7 @@
 import { mount } from 'enzyme';
 import { resetWarned } from 'rc-util/lib/warning';
 import React from 'react';
+import type { FormInstance } from '../src';
 import Form, { Field, useForm } from '../src';
 import { changeValue, getField, matchError } from './common';
 import InfoField, { Input } from './common/InfoField';
@@ -406,7 +407,7 @@ describe('Form.Basic', () => {
       </div>,
     );
 
-    expect(wrapper.find('.anything').props().light).toEqual('bamboo');
+    expect((wrapper.find('.anything').props() as any).light).toEqual('bamboo');
   });
 
   describe('shouldUpdate', () => {
@@ -514,7 +515,7 @@ describe('Form.Basic', () => {
 
     it('should trigger by setField', () => {
       const triggerUpdate = jest.fn();
-      const formRef = React.createRef();
+      const formRef = React.createRef<FormInstance>();
 
       const wrapper = mount(
         <div>
@@ -632,6 +633,7 @@ describe('Form.Basic', () => {
     mount(
       <div>
         <Form>
+          {/* @ts-ignore */}
           <Field>
             <h1 key="1">Light</h1>
             <h2 key="2">Bamboo</h2>
@@ -706,7 +708,7 @@ describe('Form.Basic', () => {
   });
 
   it('should not crash when return value contains target field', async () => {
-    const CustomInput = ({ value, onChange }) => {
+    const CustomInput: React.FC<any> = ({ value, onChange }) => {
       const onInputChange = e => {
         onChange({
           value: e.target.value,
@@ -749,7 +751,7 @@ describe('Form.Basic', () => {
           autoComplete="off"
         >
           <Form.List name="users">
-            {(fields, { add, remove }) => (
+            {fields => (
               <>
                 {fields.map(({ key, name, ...restField }) => (
                   <Field
@@ -774,13 +776,13 @@ describe('Form.Basic', () => {
     };
 
     const wrapper = mount(<Demo />);
-    expect(wrapper.find('input').first().getDOMNode().value).toBe('11');
+    expect(wrapper.find('input').first().getDOMNode<HTMLInputElement>().value).toBe('11');
     wrapper.find('.reset-btn').first().simulate('click');
     expect(wrapper.find('input').length).toBe(0);
   });
 
   it('setFieldsValue should work for multiple Select', () => {
-    const Select = ({ value, defaultValue }) => {
+    const Select: React.FC<any> = ({ value, defaultValue }) => {
       return <div className="select-div">{(value || defaultValue || []).toString()}</div>;
     };
 
@@ -808,7 +810,7 @@ describe('Form.Basic', () => {
   it('remount should not clear current value', () => {
     let refForm;
 
-    const Demo = ({ remount }) => {
+    const Demo: React.FC<any> = ({ remount }) => {
       const [form] = Form.useForm();
       refForm = form;
 
@@ -840,9 +842,9 @@ describe('Form.Basic', () => {
   });
 
   it('setFieldValue', () => {
-    const formRef = React.createRef();
+    const formRef = React.createRef<FormInstance>();
 
-    const Demo = () => (
+    const Demo: React.FC = () => (
       <Form ref={formRef} initialValues={{ list: ['bamboo', 'little', 'light'] }}>
         <Form.List name="list">
           {fields =>