diff --git a/.eslintrc b/.eslintrc
index 77aec6aca70..3962fcbe516 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -27,6 +27,7 @@
     // allow specifying true explicitly for boolean props
     "react/jsx-boolean-value": 0,
     "react-hooks/rules-of-hooks": "error",
-    "react/no-did-update-set-state": 0
+    "react/no-did-update-set-state": 0,
+    "jsx-quotes":"off"
   }
 }
diff --git a/jest.config.js b/jest.config.js
index ddaa1f15a13..41a95f1ea96 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -12,7 +12,7 @@ module.exports = {
   },
   setupFilesAfterEnv: [
     require.resolve('jest-dom/extend-expect'),
-    require.resolve('react-testing-library/cleanup-after-each'),
+    require.resolve('@testing-library/react/cleanup-after-each'),
     './scripts/global.js'
   ],
   coveragePathIgnorePatterns: [
diff --git a/package.json b/package.json
index d0edae276d5..613314d5dd9 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,7 @@
     "pretty-format": "^24.0.0",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
-    "react-testing-library": "^6.0.0",
+    "@testing-library/react": "^8.0.0",
     "remark-parse": "^6.0.3",
     "remark-stringify": "^6.0.4",
     "semver-regex": "^2.0.0",
diff --git a/packages/react/src/.eslintrc b/packages/react/src/.eslintrc
deleted file mode 100644
index 55f121d152d..00000000000
--- a/packages/react/src/.eslintrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "env": {
-    "jest": true
-  }
-}
diff --git a/packages/react/src/__tests__/actions.spec.js b/packages/react/src/__tests__/actions.spec.js
index 167648755d8..fb8027b9027 100644
--- a/packages/react/src/__tests__/actions.spec.js
+++ b/packages/react/src/__tests__/actions.spec.js
@@ -5,7 +5,7 @@ import SchemaForm, {
   connect,
   createAsyncFormActions
 } from '../index'
-import { render } from 'react-testing-library'
+import { render } from '@testing-library/react'
 
 beforeEach(() => {
   registerFormField('string', connect()(props => <div>{props.value}</div>))
diff --git a/packages/react/src/__tests__/context.spec.js b/packages/react/src/__tests__/context.spec.js
index 5daeebb320d..f311b598499 100644
--- a/packages/react/src/__tests__/context.spec.js
+++ b/packages/react/src/__tests__/context.spec.js
@@ -7,7 +7,7 @@ import SchemaForm, {
   FormConsumer,
   createFormActions
 } from '../index'
-import { render, fireEvent, act } from 'react-testing-library'
+import { render, fireEvent, act } from '@testing-library/react'
 
 beforeEach(() => {
   registerFormField(
diff --git a/packages/react/src/__tests__/destruct.spec.js b/packages/react/src/__tests__/destruct.spec.js
index 10c8f3a2f56..37a3ec6726f 100644
--- a/packages/react/src/__tests__/destruct.spec.js
+++ b/packages/react/src/__tests__/destruct.spec.js
@@ -1,40 +1,38 @@
 import React, { Fragment } from 'react'
 import SchemaForm, { Field, registerFormField, connect } from '../index'
 import { toArr } from '@uform/utils'
-import { render } from 'react-testing-library'
-
-beforeEach(() => {
-  registerFormField('string', connect()(props => <div>{props.value}</div>))
-
-  registerFormField('array', props => {
-    const { value, mutators, renderField } = props
-    return (
-      <Fragment>
-        {toArr(value).map((item, index) => {
-          return (
-            <div data-testid='item' key={index}>
-              {renderField(index)}
-            </div>
-          )
-        })}
-        <button
-          type='button'
-          onClick={() => {
-            mutators.push()
-          }}
-        >
-          Add Field
-        </button>
-      </Fragment>
-    )
-  })
+import { render } from '@testing-library/react'
+
+registerFormField('string', connect()(props => <div>{props.value}</div>))
+
+registerFormField('array', props => {
+  const { value, mutators, renderField } = props
+  return (
+    <Fragment>
+      {toArr(value).map((item, index) => {
+        return (
+          <div data-testid="item" key={index}>
+            {renderField(index)}
+          </div>
+        )
+      })}
+      <button
+        type="button"
+        onClick={() => {
+          mutators.push()
+        }}
+      >
+        Add Field
+      </button>
+    </Fragment>
+  )
 })
 
 test('destruct with initial values', async () => {
   const TestComponent = () => {
     return (
       <SchemaForm initialValues={{ aa: 123, bb: 321 }}>
-        <Field type='string' name='[aa,bb]' />
+        <Field type="string" name="[aa,bb]" />
       </SchemaForm>
     )
   }
@@ -49,9 +47,9 @@ test('destruct with initial values in array', async () => {
   const TestComponent = () => {
     return (
       <SchemaForm initialValues={{ array: [{ aa: 123, bb: 321 }] }}>
-        <Field type='array' name='array'>
-          <Field type='object'>
-            <Field type='string' name='[aa,bb]' />
+        <Field type="array" name="array">
+          <Field type="object">
+            <Field type="string" name="[aa,bb]" />
           </Field>
         </Field>
       </SchemaForm>
diff --git a/packages/react/src/__tests__/dynamic.spec.js b/packages/react/src/__tests__/dynamic.spec.js
index a728a0de516..2c57ee7d446 100644
--- a/packages/react/src/__tests__/dynamic.spec.js
+++ b/packages/react/src/__tests__/dynamic.spec.js
@@ -8,70 +8,68 @@ import SchemaForm, {
   createVirtualBox
 } from '../index'
 import { toArr } from '@uform/utils'
-import { render, fireEvent, act } from 'react-testing-library'
+import { render, fireEvent, act } from '@testing-library/react'
 
 let FormCard
 
-beforeEach(() => {
-  registerFormField(
-    'string',
-    connect()(props => (
-      <input data-testid='input' {...props} value={props.value || ''} />
+registerFormField(
+  'string',
+  connect()(props => (
+    <input data-testid="input" {...props} value={props.value || ''} />
+  ))
+)
+
+registerFormField(
+  'radio',
+  connect()(props =>
+    props.dataSource.map(item => (
+      <label htmlFor={item.value} key={`${item.label}-${item.value}`}>
+        <input
+          onChange={() => props.onChange(item.value)}
+          type="radio"
+          checked={item.value === props.value}
+          id={item.value}
+          data-testid={`radio-${item.value}`}
+        />
+        {props.id}
+      </label>
     ))
   )
+)
 
-  registerFormField(
-    'radio',
-    connect()(props =>
-      props.dataSource.map(item => (
-        <label htmlFor={item.value} key={`${item.label}-${item.value}`}>
-          <input
-            onChange={() => props.onChange(item.value)}
-            type='radio'
-            checked={item.value === props.value}
-            id={item.value}
-            data-testid={`radio-${item.value}`}
-          />
-          {props.id}
-        </label>
-      ))
-    )
+registerFormField('container', props => {
+  const { value, mutators, renderField } = props
+  return (
+    <Fragment>
+      {toArr(value).map((item, index) => {
+        return (
+          <div data-testid="item" key={index}>
+            {renderField(index)}
+            <button
+              type="button"
+              onClick={() => {
+                mutators.remove(index)
+              }}
+            >
+              Remove Field
+            </button>
+          </div>
+        )
+      })}
+      <button
+        type="button"
+        onClick={() => {
+          mutators.push()
+        }}
+      >
+        Add Field
+      </button>
+    </Fragment>
   )
+})
 
-  registerFormField('container', props => {
-    const { value, mutators, renderField } = props
-    return (
-      <Fragment>
-        {toArr(value).map((item, index) => {
-          return (
-            <div data-testid='item' key={index}>
-              {renderField(index)}
-              <button
-                type='button'
-                onClick={() => {
-                  mutators.remove(index)
-                }}
-              >
-                Remove Field
-              </button>
-            </div>
-          )
-        })}
-        <button
-          type='button'
-          onClick={() => {
-            mutators.push()
-          }}
-        >
-          Add Field
-        </button>
-      </Fragment>
-    )
-  })
-
-  FormCard = createVirtualBox('card', ({ children }) => {
-    return <div>card content{children}</div>
-  })
+FormCard = createVirtualBox('card', ({ children }) => {
+  return <div>card content{children}</div>
 })
 
 test('dynaimc add field', async () => {
@@ -103,10 +101,10 @@ test('dynaimc add field', async () => {
           )
         }}
       >
-        <Field name='container' type='array' x-component='container'>
-          <Field name='object' type='object'>
-            <Field name='aa' type='string' />
-            <Field name='bb' type='string' />
+        <Field name="container" type="array" x-component="container">
+          <Field name="object" type="object">
+            <Field name="aa" type="string" />
+            <Field name="bb" type="string" />
           </Field>
         </Field>
       </SchemaForm>
@@ -180,10 +178,10 @@ test('dynaimc add field with initialValue', async () => {
           )
         }}
       >
-        <Field name='container' type='array' x-component='container'>
-          <Field name='object' type='object'>
-            <Field name='aa' type='string' />
-            <Field name='bb' type='string' />
+        <Field name="container" type="array" x-component="container">
+          <Field name="object" type="object">
+            <Field name="aa" type="string" />
+            <Field name="bb" type="string" />
           </Field>
         </Field>
       </SchemaForm>
@@ -267,15 +265,15 @@ test('dynaimc add field with initialValue in virtualbox', async () => {
           )
         }}
       >
-        <Field name='container' type='array' x-component='container'>
-          <Field name='object' type='object'>
+        <Field name="container" type="array" x-component="container">
+          <Field name="object" type="object">
             <FormCard>
-              <Field name='aa' type='string' />
-              <Field name='bb' type='string' />
+              <Field name="aa" type="string" />
+              <Field name="bb" type="string" />
             </FormCard>
           </Field>
         </Field>
-        <button type='submit'>Submit</button>
+        <button type="submit">Submit</button>
       </SchemaForm>
     )
   }
@@ -328,15 +326,15 @@ test('dynamic remove field', async () => {
         onSubmit={submitHandler}
         onValidateFailed={validateFaildHandler}
       >
-        <Field name='container' type='array' x-component='container'>
-          <Field name='object' type='object'>
+        <Field name="container" type="array" x-component="container">
+          <Field name="object" type="object">
             <FormCard>
-              <Field name='aa' required type='string' />
-              <Field name='bb' required type='string' />
+              <Field name="aa" required type="string" />
+              <Field name="bb" required type="string" />
             </FormCard>
           </Field>
         </Field>
-        <button type='submit'>Submit</button>
+        <button type="submit">Submit</button>
       </SchemaForm>
     )
   }
@@ -370,19 +368,19 @@ test('dynamic default value', async () => {
     return (
       <SchemaForm>
         <Field
-          name='container'
-          type='array'
+          name="container"
+          type="array"
           default={[{}]}
-          x-component='container'
+          x-component="container"
         >
-          <Field name='object' type='object'>
+          <Field name="object" type="object">
             <FormCard>
-              <Field name='aa' required type='string' />
-              <Field name='bb' required type='string' />
+              <Field name="aa" required type="string" />
+              <Field name="bb" required type="string" />
             </FormCard>
           </Field>
         </Field>
-        <button type='submit'>Submit</button>
+        <button type="submit">Submit</button>
       </SchemaForm>
     )
   }
@@ -425,7 +423,7 @@ test('dynamic async default value', async () => {
     }, [])
     return (
       <SchemaForm initialValues={{}} schema={schema}>
-        <button type='submit'>Submit</button>
+        <button type="submit">Submit</button>
       </SchemaForm>
     )
   }
@@ -468,7 +466,7 @@ test('invalid schema', async () => {
     }, [])
     return (
       <SchemaForm initialValues={{}} schema={schema}>
-        <button type='submit'>Submit</button>
+        <button type="submit">Submit</button>
       </SchemaForm>
     )
   }
@@ -517,7 +515,7 @@ test('dynamic change functions onChange/onReset/onSubmit/onValidateFailed', asyn
           }}
         >
           <Field
-            type='radio'
+            type="radio"
             enum={[
               {
                 label: 'a1',
@@ -528,10 +526,10 @@ test('dynamic change functions onChange/onReset/onSubmit/onValidateFailed', asyn
                 value: 'a2'
               }
             ]}
-            name='a'
+            name="a"
           />
           <Field
-            type='radio'
+            type="radio"
             enum={[
               {
                 label: 'b1',
@@ -543,9 +541,9 @@ test('dynamic change functions onChange/onReset/onSubmit/onValidateFailed', asyn
               }
             ]}
             required
-            name='b'
+            name="b"
           />
-          <button type='submit'>Submit</button>
+          <button type="submit">Submit</button>
         </SchemaForm>
         <div>valueB-{constState.testB}</div>
         <div>valueC-{constState.testC}</div>
diff --git a/packages/react/src/__tests__/editable.spec.js b/packages/react/src/__tests__/editable.spec.js
index 39894f35f28..5375ebffe91 100644
--- a/packages/react/src/__tests__/editable.spec.js
+++ b/packages/react/src/__tests__/editable.spec.js
@@ -7,54 +7,52 @@ import SchemaForm, {
   createFormActions,
   FormPath
 } from '../index'
-import { render, act, fireEvent } from 'react-testing-library'
+import { render, act, fireEvent } from '@testing-library/react'
 import { toArr } from '@uform/utils'
 
-beforeEach(() => {
-  registerFieldMiddleware(Field => {
-    return props => {
-      if (typeof props.editable === 'boolean' && props.name !== '') {
-        if (!props.editable) return <div>empty</div>
-      }
-      return (
-        <div>
-          {props.schema.title}
-          <Field {...props} />
-          {props.errors && props.errors.length ? (
-            <div data-testid={`test-errors`}>{props.errors}</div>
-          ) : (
-            ''
-          )}
-        </div>
-      )
+registerFieldMiddleware(Field => {
+  return props => {
+    if (typeof props.editable === 'boolean' && props.name !== '') {
+      if (!props.editable) return <div>empty</div>
     }
-  })
-  registerFormField(
-    'string',
-    connect()(props => <input {...props} value={props.value || ''} />)
-  )
-  registerFormField('array', props => {
-    const { value, mutators, renderField } = props
     return (
-      <Fragment>
-        {toArr(value).map((item, index) => {
-          return (
-            <div data-testid='item' key={index}>
-              {renderField(index)}
-            </div>
-          )
-        })}
-        <button
-          type='button'
-          onClick={() => {
-            mutators.push()
-          }}
-        >
-          Add Field
-        </button>
-      </Fragment>
+      <div>
+        {props.schema.title}
+        <Field {...props} />
+        {props.errors && props.errors.length ? (
+          <div data-testid={`test-errors`}>{props.errors}</div>
+        ) : (
+          ''
+        )}
+      </div>
     )
-  })
+  }
+})
+registerFormField(
+  'string',
+  connect()(props => <input {...props} value={props.value || ''} />)
+)
+registerFormField('array', props => {
+  const { value, mutators, renderField } = props
+  return (
+    <Fragment>
+      {toArr(value).map((item, index) => {
+        return (
+          <div data-testid="item" key={index}>
+            {renderField(index)}
+          </div>
+        )
+      })}
+      <button
+        type="button"
+        onClick={() => {
+          mutators.push()
+        }}
+      >
+        Add Field
+      </button>
+    </Fragment>
+  )
 })
 
 test('update editable by setFieldState', async () => {
@@ -77,8 +75,8 @@ test('update editable by setFieldState', async () => {
         })
       }}
     >
-      <Field name='aaa' type='string' />
-      <button type='submit' data-testid='btn'>
+      <Field name="aaa" type="string" />
+      <button type="submit" data-testid="btn">
         Submit
       </button>
     </SchemaForm>
@@ -112,8 +110,8 @@ test('update editable by setFieldState with initalState is not editable', async
         })
       }}
     >
-      <Field name='aaa' type='string' />
-      <button type='submit' data-testid='btn'>
+      <Field name="aaa" type="string" />
+      <button type="submit" data-testid="btn">
         Submit
       </button>
     </SchemaForm>
@@ -138,7 +136,7 @@ test('update editable in controlled', async () => {
     updateEditable = _updateEditable
     return (
       <SchemaForm editable={editable}>
-        <Field name='aaa' type='string' title='text' />
+        <Field name="aaa" type="string" title="text" />
       </SchemaForm>
     )
   }
@@ -160,10 +158,10 @@ test('editable with x-props', async () => {
     return (
       <SchemaForm actions={actions}>
         <Field
-          name='aaa'
+          name="aaa"
           x-props={{ editable: false }}
-          type='string'
-          title='text'
+          type="string"
+          title="text"
         />
       </SchemaForm>
     )
@@ -187,13 +185,13 @@ test('editable with x-props in array field', async () => {
         defaultValue={{ array: [{ aa: '123123' }] }}
         actions={actions}
       >
-        <Field type='array' name='array'>
-          <Field type='object'>
+        <Field type="array" name="array">
+          <Field type="object">
             <Field
-              name='aa'
+              name="aa"
               x-props={{ editable: false }}
-              type='string'
-              title='text'
+              type="string"
+              title="text"
             />
           </Field>
         </Field>
@@ -220,13 +218,13 @@ test('editable with x-props is affected by global editable', async () => {
         defaultValue={{ array: [{ aa: '123123' }] }}
         actions={actions}
       >
-        <Field type='array' name='array' x-props={{ editable: true }}>
-          <Field type='object' x-props={{ editable: true }}>
+        <Field type="array" name="array" x-props={{ editable: true }}>
+          <Field type="object" x-props={{ editable: true }}>
             <Field
-              name='aa'
+              name="aa"
               x-props={{ editable: true }}
-              type='string'
-              title='text'
+              type="string"
+              title="text"
             />
           </Field>
         </Field>
@@ -258,18 +256,18 @@ test('editable conflicts that global editable props with setFieldState', async (
         }}
       >
         <Field
-          type='string'
-          name='aaa'
+          type="string"
+          name="aaa"
           x-props={{ 'data-testid': 'this is aaa' }}
         />
         <Field
-          type='string'
-          name='bbb'
+          type="string"
+          name="bbb"
           x-props={{ 'data-testid': 'this is bbb' }}
         />
         <Field
-          type='string'
-          name='ccc'
+          type="string"
+          name="ccc"
           x-props={{ 'data-testid': 'this is ccc' }}
         />
       </SchemaForm>
@@ -302,19 +300,19 @@ test('editable conflicts that props editable props with setFieldState', async ()
         }}
       >
         <Field
-          type='string'
-          name='aaa'
+          type="string"
+          name="aaa"
           x-props={{ 'data-testid': 'this is aaa' }}
         />
         <Field
-          type='string'
-          name='bbb'
+          type="string"
+          name="bbb"
           editable={false}
           x-props={{ 'data-testid': 'this is bbb' }}
         />
         <Field
-          type='string'
-          name='ccc'
+          type="string"
+          name="ccc"
           x-props={{ 'data-testid': 'this is ccc' }}
         />
       </SchemaForm>
@@ -347,18 +345,18 @@ test('editable conflicts that x-props editable props with setFieldState', async
         }}
       >
         <Field
-          type='string'
-          name='aaa'
+          type="string"
+          name="aaa"
           x-props={{ 'data-testid': 'this is aaa' }}
         />
         <Field
-          type='string'
-          name='bbb'
+          type="string"
+          name="bbb"
           x-props={{ 'data-testid': 'this is bbb', editable: false }}
         />
         <Field
-          type='string'
-          name='ccc'
+          type="string"
+          name="ccc"
           x-props={{ 'data-testid': 'this is ccc' }}
         />
       </SchemaForm>
diff --git a/packages/react/src/__tests__/effects.spec.js b/packages/react/src/__tests__/effects.spec.js
index 9af7d80bb4c..4534a149c69 100644
--- a/packages/react/src/__tests__/effects.spec.js
+++ b/packages/react/src/__tests__/effects.spec.js
@@ -6,35 +6,29 @@ import SchemaForm, {
   registerFieldMiddleware,
   createFormActions
 } from '../index'
-import { render, fireEvent, act } from 'react-testing-library'
+import { render, fireEvent, act } from '@testing-library/react'
 
-beforeEach(() => {
-  registerFieldMiddleware(Field => {
-    return props => {
-      return (
-        <div>
-          {props.schema.title}
-          <Field {...props} />
-          {props.errors && props.errors.length ? (
-            <div data-testid={`test-errors`}>{props.errors}</div>
-          ) : (
-            ''
-          )}
-        </div>
-      )
-    }
-  })
-  registerFormField(
-    'string',
-    connect()(props =>
-      props.disabled ? (
-        'Disabled'
-      ) : (
-        <input {...props} value={props.value || ''} />
-      )
+registerFieldMiddleware(Field => {
+  return props => {
+    return (
+      <div>
+        {props.schema.title}
+        <Field {...props} />
+        {props.errors && props.errors.length ? (
+          <div data-testid={`test-errors`}>{props.errors}</div>
+        ) : (
+          ''
+        )}
+      </div>
     )
-  )
+  }
 })
+registerFormField(
+  'string',
+  connect()(props =>
+    props.disabled ? 'Disabled' : <input {...props} value={props.value || ''} />
+  )
+)
 
 test('onFormInit setFieldState', async () => {
   const actions = createFormActions()
@@ -55,8 +49,8 @@ test('onFormInit setFieldState', async () => {
         })
       }}
     >
-      <Field name='aaa' type='string' />
-      <button type='submit' data-testid='btn'>
+      <Field name="aaa" type="string" />
+      <button type="submit" data-testid="btn">
         Submit
       </button>
     </SchemaForm>
@@ -89,8 +83,8 @@ test('init triggers', async () => {
           $('onFieldChange', 'aaa').subscribe(callback)
         }}
       >
-        <Field name='aaa' type='string' />
-        <button type='submit' data-testid='btn'>
+        <Field name="aaa" type="string" />
+        <button type="submit" data-testid="btn">
           Submit
         </button>
       </SchemaForm>
@@ -122,8 +116,8 @@ test('onFieldChange will trigger with initialValues', async () => {
           $('onFieldChange', 'aaa').subscribe(callback)
         }}
       >
-        <Field name='aaa' type='string' />
-        <button type='submit' data-testid='btn'>
+        <Field name="aaa" type="string" />
+        <button type="submit" data-testid="btn">
           Submit
         </button>
       </SchemaForm>
@@ -149,8 +143,8 @@ test('setFieldState x-props with onFormInit', async () => {
           })
         }}
       >
-        <Field name='aaa' type='string' x-props={{ disabled: false }} />
-        <button type='submit' data-testid='btn'>
+        <Field name="aaa" type="string" x-props={{ disabled: false }} />
+        <button type="submit" data-testid="btn">
           Submit
         </button>
       </SchemaForm>
@@ -175,10 +169,10 @@ test('getFieldState with onFieldChange', async () => {
           })
         }}
       >
-        <Field type='object' name='obj'>
+        <Field type="object" name="obj">
           <Field
-            type='string'
-            name='aa'
+            type="string"
+            name="aa"
             x-props={{ 'data-testid': 'this is aa' }}
           />
         </Field>
@@ -206,8 +200,8 @@ test('set errors in effects', async () => {
         }}
         onSubmit={callback}
       >
-        <Field name='aaa' type='string' />
-        <button type='submit' data-testid='btn'>
+        <Field name="aaa" type="string" />
+        <button type="submit" data-testid="btn">
           Submit
         </button>
       </SchemaForm>
diff --git a/packages/react/src/__tests__/mutators.spec.js b/packages/react/src/__tests__/mutators.spec.js
index 587f7051769..a8456f7067e 100644
--- a/packages/react/src/__tests__/mutators.spec.js
+++ b/packages/react/src/__tests__/mutators.spec.js
@@ -5,32 +5,30 @@ import SchemaForm, {
   connect,
   createFormActions
 } from '../index'
-import { render, fireEvent } from 'react-testing-library'
+import { render, fireEvent } from '@testing-library/react'
 
-beforeEach(() => {
-  registerFormField(
-    'mutator',
-    connect()(props => (
-      <div>
-        <button
-          onClick={() => {
-            props.value[0].aaa = '321'
-            props.onChange(props.value)
-          }}
-        >
-          Change Value
-        </button>
-        {props.value && props.value[0] && props.value[0].aaa}
-      </div>
-    ))
-  )
-})
+registerFormField(
+  'mutator',
+  connect()(props => (
+    <div>
+      <button
+        onClick={() => {
+          props.value[0].aaa = '321'
+          props.onChange(props.value)
+        }}
+      >
+        Change Value
+      </button>
+      {props.value && props.value[0] && props.value[0].aaa}
+    </div>
+  ))
+)
 
 test('update value by ref', async () => {
   const actions = createFormActions()
   const TestComponent = () => (
     <SchemaForm defaultValue={{ mutator: [{ aaa: '123' }] }} actions={actions}>
-      <Field name='mutator' type='mutator' />
+      <Field name="mutator" type="mutator" />
     </SchemaForm>
   )
 
diff --git a/packages/react/src/__tests__/validate.spec.js b/packages/react/src/__tests__/validate.spec.js
index 3ee0895c5f6..2daa33c0362 100644
--- a/packages/react/src/__tests__/validate.spec.js
+++ b/packages/react/src/__tests__/validate.spec.js
@@ -7,28 +7,26 @@ import SchemaForm, {
   FormPath,
   createFormActions
 } from '../index'
-import { render, fireEvent, act } from 'react-testing-library'
+import { render, fireEvent, act } from '@testing-library/react'
 
-beforeEach(() => {
-  registerFieldMiddleware(Field => {
-    return props => {
-      return (
-        <div>
-          <Field {...props} />
-          {props.errors}
-        </div>
-      )
-    }
-  })
-
-  registerFormField(
-    'string',
-    connect()(props => (
-      <input {...props} data-testid='test-input' value={props.value || ''} />
-    ))
-  )
+registerFieldMiddleware(Field => {
+  return props => {
+    return (
+      <div>
+        <Field {...props} />
+        {props.errors}
+      </div>
+    )
+  }
 })
 
+registerFormField(
+  'string',
+  connect()(props => (
+    <input {...props} data-testid='test-input' value={props.value || ''} />
+  ))
+)
+
 test('basic validate', async () => {
   const handleSubmit = jest.fn()
   const handleValidateFailed = jest.fn()
diff --git a/packages/react/src/__tests__/validate_relations.spec.js b/packages/react/src/__tests__/validate_relations.spec.js
index f84d7f59958..d0bf39b8611 100644
--- a/packages/react/src/__tests__/validate_relations.spec.js
+++ b/packages/react/src/__tests__/validate_relations.spec.js
@@ -6,31 +6,29 @@ import SchemaForm, {
   registerFieldMiddleware,
   createFormActions
 } from '../index'
-import { render, fireEvent } from 'react-testing-library'
+import { render, fireEvent } from '@testing-library/react'
 
-beforeEach(() => {
-  registerFieldMiddleware(Field => {
-    return props => {
-      const index = props.schema['x-props'] && props.schema['x-props'].index
-      return (
-        <div>
-          <Field {...props} />
-          <div data-testid={`test-errors-${index}`}>{props.errors}</div>
-        </div>
-      )
-    }
-  })
-  registerFormField(
-    'string',
-    connect()(props => (
-      <input
-        {...props}
-        data-testid={`test-input-${props.index}`}
-        value={props.value || ''}
-      />
-    ))
-  )
+registerFieldMiddleware(Field => {
+  return props => {
+    const index = props.schema['x-props'] && props.schema['x-props'].index
+    return (
+      <div>
+        <Field {...props} />
+        <div data-testid={`test-errors-${index}`}>{props.errors}</div>
+      </div>
+    )
+  }
 })
+registerFormField(
+  'string',
+  connect()(props => (
+    <input
+      {...props}
+      data-testid={`test-input-${props.index}`}
+      value={props.value || ''}
+    />
+  ))
+)
 
 test('setFieldState will trigger validate', async () => {
   const handleSubmit = jest.fn()
@@ -51,9 +49,9 @@ test('setFieldState will trigger validate', async () => {
       onSubmit={handleSubmit}
       onValidateFailed={handleValidateFailed}
     >
-      <Field name='text-1' type='string' x-props={{ index: 1 }} />
-      <Field name='text-2' type='string' required x-props={{ index: 2 }} />
-      <button type='submit' data-testid='btn'>
+      <Field name="text-1" type="string" x-props={{ index: 1 }} />
+      <Field name="text-2" type="string" required x-props={{ index: 2 }} />
+      <button type="submit" data-testid="btn">
         Submit
       </button>
     </SchemaForm>
diff --git a/packages/react/src/__tests__/virtualbox.spec.js b/packages/react/src/__tests__/virtualbox.spec.js
index 854c0b1864b..eaa3e037811 100644
--- a/packages/react/src/__tests__/virtualbox.spec.js
+++ b/packages/react/src/__tests__/virtualbox.spec.js
@@ -6,59 +6,54 @@ import SchemaForm, {
   connect,
   registerFieldMiddleware
 } from '../index'
-import { render, fireEvent, act } from 'react-testing-library'
+import { render, fireEvent, act } from '@testing-library/react'
 
 let FormCard
 
-beforeEach(() => {
-  registerFieldMiddleware(Field => {
-    return props => {
-      if (typeof props.editable === 'boolean' && props.name !== '') {
-        if (!props.editable) return <div>empty</div>
-      }
-      return (
-        <div>
-          {props.schema.title}
-          <Field {...props} />
-          {props.errors && props.errors.length ? (
-            <div data-testid={`test-errors`}>{props.errors}</div>
-          ) : (
-            ''
-          )}
-        </div>
-      )
+registerFieldMiddleware(Field => {
+  return props => {
+    if (typeof props.editable === 'boolean' && props.name !== '') {
+      if (!props.editable) return <div>empty</div>
     }
-  })
-  registerFormField(
-    'string',
-    connect()(props => <input {...props} value={props.value || ''} />)
-  )
-  registerFormField(
-    'text',
-    connect()(props => <div>This is Text Component</div>)
-  )
-  FormCard = createVirtualBox('card', ({ children }) => {
-    return <div>card content{children}</div>
-  })
+    return (
+      <div>
+        {props.schema.title}
+        <Field {...props} />
+        {props.errors && props.errors.length ? (
+          <div data-testid={`test-errors`}>{props.errors}</div>
+        ) : (
+          ''
+        )}
+      </div>
+    )
+  }
+})
+registerFormField(
+  'string',
+  connect()(props => <input {...props} value={props.value || ''} />)
+)
+registerFormField('text', connect()(props => <div>This is Text Component</div>))
+FormCard = createVirtualBox('card', ({ children }) => {
+  return <div>card content{children}</div>
 })
 
-// test('createVirtualBox', async () => {
-//   const TestComponent = () => (
-//     <SchemaForm>
-//       <FormCard>
-//         <Field name='aaa' type='string' />
-//       </FormCard>
-//       <button type='submit' data-testid='btn'>
-//         Submit
-//       </button>
-//     </SchemaForm>
-//   )
+test('createVirtualBox', async () => {
+  const TestComponent = () => (
+    <SchemaForm>
+      <FormCard>
+        <Field name="aaa" type="string" />
+      </FormCard>
+      <button type="submit" data-testid="btn">
+        Submit
+      </button>
+    </SchemaForm>
+  )
 
-//   const { queryByText } = render(<TestComponent />)
+  const { queryByText } = render(<TestComponent />)
 
-//   await sleep(100)
-//   expect(queryByText('card content')).toBeVisible()
-// })
+  await sleep(100)
+  expect(queryByText('card content')).toBeVisible()
+})
 
 test('dynamic node', async () => {
   const TestComponent = () => {
@@ -67,11 +62,11 @@ test('dynamic node', async () => {
       <SchemaForm editable={editable}>
         {editable && (
           <FormCard>
-            <Field name='aaa' type='string' />
+            <Field name="aaa" type="string" />
           </FormCard>
         )}
         <FormCard>
-          <Field name='bbb' type='text' />
+          <Field name="bbb" type="text" />
         </FormCard>
         <button
           onClick={() => {
@@ -90,6 +85,6 @@ test('dynamic node', async () => {
 
   await sleep(33)
   fireEvent.click(queryByText('Change Editable'))
-  // await sleep(100)
-  // expect(queryByText('This is Text Component')).toBeVisible()
+  await sleep(33)
+  expect(queryByText('This is Text Component')).toBeVisible()
 })
diff --git a/packages/react/src/__tests__/visible.spec.js b/packages/react/src/__tests__/visible.spec.js
index 31542592de8..b44efb7cc48 100644
--- a/packages/react/src/__tests__/visible.spec.js
+++ b/packages/react/src/__tests__/visible.spec.js
@@ -1,10 +1,8 @@
 import React from 'react'
 import SchemaForm, { Field, registerFormField, connect } from '../index'
-import { render } from 'react-testing-library'
+import { render } from '@testing-library/react'
 
-beforeEach(() => {
-  registerFormField('string', connect()(props => <div>{props.value}</div>))
-})
+registerFormField('string', connect()(props => <div>{props.value}</div>))
 
 test('set visible by setFieldState', async () => {
   const TestComponent = () => {
@@ -18,7 +16,7 @@ test('set visible by setFieldState', async () => {
           })
         }}
       >
-        <Field type='string' name='aa' default='123321' />
+        <Field type="string" name="aa" default="123321" />
       </SchemaForm>
     )
   }
diff --git a/packages/react/src/__tests__/x-component.spec.js b/packages/react/src/__tests__/x-component.spec.js
index c8d9c4522f6..fb69c565e1f 100644
--- a/packages/react/src/__tests__/x-component.spec.js
+++ b/packages/react/src/__tests__/x-component.spec.js
@@ -6,40 +6,38 @@ import SchemaForm, {
   registerFieldMiddleware,
   createFormActions
 } from '../index'
-import { render } from 'react-testing-library'
+import { render } from '@testing-library/react'
 
-beforeEach(() => {
-  registerFieldMiddleware(Field => {
-    return props => {
-      if (typeof props.editable === 'boolean') {
-        if (!props.editable) return <div>empty</div>
-      }
-      return (
-        <div>
-          {props.schema.title}
-          <Field {...props} />
-          {props.errors && props.errors.length ? (
-            <div data-testid={`test-errors`}>{props.errors}</div>
-          ) : (
-            ''
-          )}
-        </div>
-      )
+registerFieldMiddleware(Field => {
+  return props => {
+    if (typeof props.editable === 'boolean') {
+      if (!props.editable) return <div>empty</div>
     }
-  })
-  registerFormField(
-    'string',
-    connect()(props => <input {...props} value={props.value || ''} />)
-  )
-  registerFormField('text', connect()(props => <div>text component</div>))
+    return (
+      <div>
+        {props.schema.title}
+        <Field {...props} />
+        {props.errors && props.errors.length ? (
+          <div data-testid={`test-errors`}>{props.errors}</div>
+        ) : (
+          ''
+        )}
+      </div>
+    )
+  }
 })
+registerFormField(
+  'string',
+  connect()(props => <input {...props} value={props.value || ''} />)
+)
+registerFormField('text', connect()(props => <div>text component</div>))
 
 test('update x-component by setFieldState', async () => {
   const actions = createFormActions()
   const TestComponent = () => (
     <SchemaForm actions={actions}>
-      <Field name='aaa' type='string' />
-      <button type='submit' data-testid='btn'>
+      <Field name="aaa" type="string" />
+      <button type="submit" data-testid="btn">
         Submit
       </button>
     </SchemaForm>