Fixed test errors

Author: erikras

README.md

@@ -102,11 +102,11 @@ Shows how to create fields and attach them to `<input/>` elements.
 
 The following can be imported from `react-final-form-hooks`.
 
-### `useField`
+### `useField(name: string, form: Form, validate?: (value:any) => any, subscription: Object)`
 
 Returns an object similar to [`FieldRenderProps`](https://github.com/final-form/react-final-form#fieldrenderprops).
 
-### `useForm`
+### `useForm(onSubmit: (values:Object) => Promise | void, validate: (values:Object) => Object)`
 
 Returns an object similar to [`FormRenderProps`](https://github.com/final-form/react-final-form#formrenderprops).
 

package-scripts.js

@@ -7,7 +7,7 @@ const rimraf = npsUtils.rimraf
 module.exports = {
   scripts: {
     test: {
-      default: 'jest --coverage',
+      default: 'jest --coverage --detectOpenHandles',
       watch: 'jest --coverage --watch'
     },
     size: {
@@ -62,7 +62,7 @@ module.exports = {
     validate: {
       description:
         'This runs several scripts to make sure things look good before committing or on clean install',
-      default: concurrent.nps('lint', 'build.andTest', 'typescript')
+      default: concurrent.nps('lint', 'build.andTest', 'typescript', 'test')
     }
   },
   options: {

package.json

@@ -12,12 +12,11 @@
   ],
   "scripts": {
     "start": "nps",
-    "test": "nps test",
     "doctoc": "doctoc README.md && doctoc docs/faq.md && prettier --write README.md && prettier --write docs/faq.md",
     "precommit": "lint-staged && npm start validate",
     "prepublish": "npm start validate",
     "postinstall": "node ./scripts/postinstall.js || exit 0",
-    "test": "NODE_ENV=test jest -i --detectOpenHandles"
+    "test": "NODE_ENV=test nps test"
   },
   "author": "Erik Rasmussen <[email protected]> (http://github.com/erikras)",
   "license": "MIT",

src/useField.js

@@ -41,6 +41,7 @@ const useField = (name, form, validate, subscription = all) => {
         subscription,
         options
       ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [name, form, validate, ...subscriptionToInputs(subscription)]
   )
   let { blur, change, focus, value, ...meta } = state || {}

src/useField.test.js

@@ -12,6 +12,7 @@ describe('useField()', () => {
     name = 'foo'
     subscription = { value: true }
     container = document.createElement('div')
+    document.body.appendChild(container)
   })
   afterEach(() => {
     document.body.removeChild(container)
@@ -27,12 +28,13 @@ describe('useField()', () => {
     })
 
     it('is called with correct params', () => {
-      renderHook(() => useField(name, form, subscription))
+      renderHook(() => useField(name, form, undefined, subscription))
 
       expect(form.registerField).toHaveBeenCalledWith(
         name,
         expect.any(Function),
-        subscription
+        subscription,
+        undefined
       )
     })
 
@@ -42,7 +44,8 @@ describe('useField()', () => {
       expect(form.registerField).toHaveBeenCalledWith(
         name,
         expect.any(Function),
-        all
+        all,
+        undefined
       )
     })
   })

src/useForm.js

@@ -22,17 +22,20 @@ const useForm = ({
   const form = useMemoOnce(() => createForm(config))
   const prevConfig = useRef(config)
   const state = useFormState(form, subscription)
-  const handleSubmit = useCallback(event => {
-    if (event) {
-      if (typeof event.preventDefault === 'function') {
-        event.preventDefault()
+  const handleSubmit = useCallback(
+    event => {
+      if (event) {
+        if (typeof event.preventDefault === 'function') {
+          event.preventDefault()
+        }
+        if (typeof event.stopPropagation === 'function') {
+          event.stopPropagation()
+        }
       }
-      if (typeof event.stopPropagation === 'function') {
-        event.stopPropagation()
-      }
-    }
-    return form.submit()
-  }, [])
+      return form.submit()
+    },
+    [form]
+  )
 
   useEffect(() => {
     if (config === prevConfig.current) {

src/useFormState.js

@@ -15,10 +15,9 @@ const subscriptionToInputs = subscription =>
 const useFormState = (form, subscription = all) => {
   const [state, setState] = useState(() => form.getState())
 
-  useEffect(() => form.subscribe(setState, subscription), [
-    form,
-    ...subscriptionToInputs(subscription)
-  ])
+  const deps = subscriptionToInputs(subscription)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => form.subscribe(setState, subscription), [form, ...deps])
 
   return state
 }