@tanstack/react-form 0.0.13 → 0.0.15

package/build/lib/createFormFactory.cjs

@@ -6,10 +6,8 @@ var useForm = require('./useForm.cjs');
 function createFormFactory(defaultOpts) {
   return {
     useForm: opts => {
-      return useForm.useForm({
-        ...defaultOpts,
-        ...opts
-      });
+      const formOptions = Object.assign({}, defaultOpts, opts);
+      return useForm.useForm(formOptions);
     },
     useField: useField.useField,
     Field: useField.Field

package/build/lib/createFormFactory.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"createFormFactory.cjs","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions } from '@tanstack/form-core'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData> = {\n  useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>\n  useField: UseField<TFormData>\n  Field: FieldComponent<TFormData, TFormData>\n}\n\nexport function createFormFactory<TFormData>(\n  defaultOpts?: FormOptions<TFormData>,\n): FormFactory<TFormData> {\n  return {\n    useForm: (opts) => {\n      return useForm<TFormData>({ ...defaultOpts, ...opts } as any) as any\n    },\n    useField: useField as any,\n    Field: Field as any,\n  }\n}\n"],"names":["createFormFactory","defaultOpts","useForm","opts","useField","Field"],"mappings":";;;;;AAUO,SAASA,iBAAiBA,CAC/BC,WAAoC,EACZ;EACxB,OAAO;IACLC,OAAO,EAAGC,IAAI,IAAK;AACjB,MAAA,OAAOD,eAAO,CAAY;AAAE,QAAA,GAAGD,WAAW;QAAE,GAAGE,IAAAA;AAAK,OAAQ,CAAC,CAAA;KAC9D;AACDC,IAAAA,QAAQ,EAAEA,iBAAe;AACzBC,IAAAA,KAAK,EAAEA,cAAAA;GACR,CAAA;AACH;;;;"}
+{"version":3,"file":"createFormFactory.cjs","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions } from '@tanstack/form-core'\n\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData> = {\n  useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>\n  useField: UseField<TFormData>\n  Field: FieldComponent<TFormData, TFormData>\n}\n\nexport function createFormFactory<TFormData>(\n  defaultOpts?: FormOptions<TFormData>,\n): FormFactory<TFormData> {\n  return {\n    useForm: (opts) => {\n      const formOptions = Object.assign({}, defaultOpts, opts)\n      return useForm<TFormData>(formOptions)\n    },\n    useField: useField as any,\n    Field: Field as any,\n  }\n}\n"],"names":["createFormFactory","defaultOpts","useForm","opts","formOptions","Object","assign","useField","Field"],"mappings":";;;;;AAWO,SAASA,iBAAiBA,CAC/BC,WAAoC,EACZ;EACxB,OAAO;IACLC,OAAO,EAAGC,IAAI,IAAK;AACjB,MAAA,MAAMC,WAAW,GAAGC,MAAM,CAACC,MAAM,CAAC,EAAE,EAAEL,WAAW,EAAEE,IAAI,CAAC,CAAA;MACxD,OAAOD,eAAO,CAAYE,WAAW,CAAC,CAAA;KACvC;AACDG,IAAAA,QAAQ,EAAEA,iBAAe;AACzBC,IAAAA,KAAK,EAAEA,cAAAA;GACR,CAAA;AACH;;;;"}

package/build/lib/createFormFactory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createFormFactory.d.ts","sourceRoot":"","sources":["../../src/createFormFactory.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAC/D,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAmB,MAAM,YAAY,CAAA;AAGhF,MAAM,MAAM,WAAW,CAAC,SAAS,IAAI;IACnC,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,KAAK,OAAO,CAAC,SAAS,CAAC,CAAA;IAC9D,QAAQ,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;IAC7B,KAAK,EAAE,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;CAC5C,CAAA;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EACzC,WAAW,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GACnC,WAAW,CAAC,SAAS,CAAC,CAQxB"}
+{"version":3,"file":"createFormFactory.d.ts","sourceRoot":"","sources":["../../src/createFormFactory.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAE/D,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAmB,MAAM,YAAY,CAAA;AAGhF,MAAM,MAAM,WAAW,CAAC,SAAS,IAAI;IACnC,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,KAAK,OAAO,CAAC,SAAS,CAAC,CAAA;IAC9D,QAAQ,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;IAC7B,KAAK,EAAE,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;CAC5C,CAAA;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EACzC,WAAW,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GACnC,WAAW,CAAC,SAAS,CAAC,CASxB"}

package/build/lib/createFormFactory.js

@@ -4,10 +4,8 @@ import { useForm } from './useForm.js';
 function createFormFactory(defaultOpts) {
   return {
     useForm: opts => {
-      return useForm({
-        ...defaultOpts,
-        ...opts
-      });
+      const formOptions = Object.assign({}, defaultOpts, opts);
+      return useForm(formOptions);
     },
     useField: useField,
     Field: Field

package/build/lib/createFormFactory.js.map

@@ -1 +1 @@
-{"version":3,"file":"createFormFactory.js","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions } from '@tanstack/form-core'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData> = {\n  useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>\n  useField: UseField<TFormData>\n  Field: FieldComponent<TFormData, TFormData>\n}\n\nexport function createFormFactory<TFormData>(\n  defaultOpts?: FormOptions<TFormData>,\n): FormFactory<TFormData> {\n  return {\n    useForm: (opts) => {\n      return useForm<TFormData>({ ...defaultOpts, ...opts } as any) as any\n    },\n    useField: useField as any,\n    Field: Field as any,\n  }\n}\n"],"names":["createFormFactory","defaultOpts","useForm","opts","useField","Field"],"mappings":";;;AAUO,SAASA,iBAAiBA,CAC/BC,WAAoC,EACZ;EACxB,OAAO;IACLC,OAAO,EAAGC,IAAI,IAAK;AACjB,MAAA,OAAOD,OAAO,CAAY;AAAE,QAAA,GAAGD,WAAW;QAAE,GAAGE,IAAAA;AAAK,OAAQ,CAAC,CAAA;KAC9D;AACDC,IAAAA,QAAQ,EAAEA,QAAe;AACzBC,IAAAA,KAAK,EAAEA,KAAAA;GACR,CAAA;AACH;;;;"}
+{"version":3,"file":"createFormFactory.js","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions } from '@tanstack/form-core'\n\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData> = {\n  useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>\n  useField: UseField<TFormData>\n  Field: FieldComponent<TFormData, TFormData>\n}\n\nexport function createFormFactory<TFormData>(\n  defaultOpts?: FormOptions<TFormData>,\n): FormFactory<TFormData> {\n  return {\n    useForm: (opts) => {\n      const formOptions = Object.assign({}, defaultOpts, opts)\n      return useForm<TFormData>(formOptions)\n    },\n    useField: useField as any,\n    Field: Field as any,\n  }\n}\n"],"names":["createFormFactory","defaultOpts","useForm","opts","formOptions","Object","assign","useField","Field"],"mappings":";;;AAWO,SAASA,iBAAiBA,CAC/BC,WAAoC,EACZ;EACxB,OAAO;IACLC,OAAO,EAAGC,IAAI,IAAK;AACjB,MAAA,MAAMC,WAAW,GAAGC,MAAM,CAACC,MAAM,CAAC,EAAE,EAAEL,WAAW,EAAEE,IAAI,CAAC,CAAA;MACxD,OAAOD,OAAO,CAAYE,WAAW,CAAC,CAAA;KACvC;AACDG,IAAAA,QAAQ,EAAEA,QAAe;AACzBC,IAAAA,KAAK,EAAEA,KAAAA;GACR,CAAA;AACH;;;;"}

package/build/lib/createFormFactory.legacy.cjs

@@ -6,10 +6,8 @@ var useForm = require('./useForm.legacy.cjs');
 function createFormFactory(defaultOpts) {
   return {
     useForm: opts => {
-      return useForm.useForm({
-        ...defaultOpts,
-        ...opts
-      });
+      const formOptions = Object.assign({}, defaultOpts, opts);
+      return useForm.useForm(formOptions);
     },
     useField: useField.useField,
     Field: useField.Field

package/build/lib/createFormFactory.legacy.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"createFormFactory.legacy.cjs","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions } from '@tanstack/form-core'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData> = {\n  useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>\n  useField: UseField<TFormData>\n  Field: FieldComponent<TFormData, TFormData>\n}\n\nexport function createFormFactory<TFormData>(\n  defaultOpts?: FormOptions<TFormData>,\n): FormFactory<TFormData> {\n  return {\n    useForm: (opts) => {\n      return useForm<TFormData>({ ...defaultOpts, ...opts } as any) as any\n    },\n    useField: useField as any,\n    Field: Field as any,\n  }\n}\n"],"names":["createFormFactory","defaultOpts","useForm","opts","useField","Field"],"mappings":";;;;;AAUO,SAASA,iBAAiBA,CAC/BC,WAAoC,EACZ;EACxB,OAAO;IACLC,OAAO,EAAGC,IAAI,IAAK;AACjB,MAAA,OAAOD,eAAO,CAAY;AAAE,QAAA,GAAGD,WAAW;QAAE,GAAGE,IAAAA;AAAK,OAAQ,CAAC,CAAA;KAC9D;AACDC,IAAAA,QAAQ,EAAEA,iBAAe;AACzBC,IAAAA,KAAK,EAAEA,cAAAA;GACR,CAAA;AACH;;;;"}
+{"version":3,"file":"createFormFactory.legacy.cjs","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions } from '@tanstack/form-core'\n\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData> = {\n  useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>\n  useField: UseField<TFormData>\n  Field: FieldComponent<TFormData, TFormData>\n}\n\nexport function createFormFactory<TFormData>(\n  defaultOpts?: FormOptions<TFormData>,\n): FormFactory<TFormData> {\n  return {\n    useForm: (opts) => {\n      const formOptions = Object.assign({}, defaultOpts, opts)\n      return useForm<TFormData>(formOptions)\n    },\n    useField: useField as any,\n    Field: Field as any,\n  }\n}\n"],"names":["createFormFactory","defaultOpts","useForm","opts","formOptions","Object","assign","useField","Field"],"mappings":";;;;;AAWO,SAASA,iBAAiBA,CAC/BC,WAAoC,EACZ;EACxB,OAAO;IACLC,OAAO,EAAGC,IAAI,IAAK;AACjB,MAAA,MAAMC,WAAW,GAAGC,MAAM,CAACC,MAAM,CAAC,EAAE,EAAEL,WAAW,EAAEE,IAAI,CAAC,CAAA;MACxD,OAAOD,eAAO,CAAYE,WAAW,CAAC,CAAA;KACvC;AACDG,IAAAA,QAAQ,EAAEA,iBAAe;AACzBC,IAAAA,KAAK,EAAEA,cAAAA;GACR,CAAA;AACH;;;;"}

package/build/lib/createFormFactory.legacy.js

@@ -4,10 +4,8 @@ import { useForm } from './useForm.legacy.js';
 function createFormFactory(defaultOpts) {
   return {
     useForm: opts => {
-      return useForm({
-        ...defaultOpts,
-        ...opts
-      });
+      const formOptions = Object.assign({}, defaultOpts, opts);
+      return useForm(formOptions);
     },
     useField: useField,
     Field: Field

package/build/lib/createFormFactory.legacy.js.map

@@ -1 +1 @@
-{"version":3,"file":"createFormFactory.legacy.js","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions } from '@tanstack/form-core'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData> = {\n  useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>\n  useField: UseField<TFormData>\n  Field: FieldComponent<TFormData, TFormData>\n}\n\nexport function createFormFactory<TFormData>(\n  defaultOpts?: FormOptions<TFormData>,\n): FormFactory<TFormData> {\n  return {\n    useForm: (opts) => {\n      return useForm<TFormData>({ ...defaultOpts, ...opts } as any) as any\n    },\n    useField: useField as any,\n    Field: Field as any,\n  }\n}\n"],"names":["createFormFactory","defaultOpts","useForm","opts","useField","Field"],"mappings":";;;AAUO,SAASA,iBAAiBA,CAC/BC,WAAoC,EACZ;EACxB,OAAO;IACLC,OAAO,EAAGC,IAAI,IAAK;AACjB,MAAA,OAAOD,OAAO,CAAY;AAAE,QAAA,GAAGD,WAAW;QAAE,GAAGE,IAAAA;AAAK,OAAQ,CAAC,CAAA;KAC9D;AACDC,IAAAA,QAAQ,EAAEA,QAAe;AACzBC,IAAAA,KAAK,EAAEA,KAAAA;GACR,CAAA;AACH;;;;"}
+{"version":3,"file":"createFormFactory.legacy.js","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions } from '@tanstack/form-core'\n\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData> = {\n  useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>\n  useField: UseField<TFormData>\n  Field: FieldComponent<TFormData, TFormData>\n}\n\nexport function createFormFactory<TFormData>(\n  defaultOpts?: FormOptions<TFormData>,\n): FormFactory<TFormData> {\n  return {\n    useForm: (opts) => {\n      const formOptions = Object.assign({}, defaultOpts, opts)\n      return useForm<TFormData>(formOptions)\n    },\n    useField: useField as any,\n    Field: Field as any,\n  }\n}\n"],"names":["createFormFactory","defaultOpts","useForm","opts","formOptions","Object","assign","useField","Field"],"mappings":";;;AAWO,SAASA,iBAAiBA,CAC/BC,WAAoC,EACZ;EACxB,OAAO;IACLC,OAAO,EAAGC,IAAI,IAAK;AACjB,MAAA,MAAMC,WAAW,GAAGC,MAAM,CAACC,MAAM,CAAC,EAAE,EAAEL,WAAW,EAAEE,IAAI,CAAC,CAAA;MACxD,OAAOD,OAAO,CAAYE,WAAW,CAAC,CAAA;KACvC;AACDG,IAAAA,QAAQ,EAAEA,QAAe;AACzBC,IAAAA,KAAK,EAAEA,KAAAA;GACR,CAAA;AACH;;;;"}

package/build/lib/tests/useField.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=useField.test.d.ts.map

package/build/lib/tests/useField.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useField.test.d.ts","sourceRoot":"","sources":["../../../src/tests/useField.test.tsx"],"names":[],"mappings":"AAGA,OAAO,2BAA2B,CAAA"}

package/build/lib/tests/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function sleep(timeout: number): Promise<void>;
+//# sourceMappingURL=utils.d.ts.map

package/build/lib/tests/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/tests/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAIpD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-form",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "Powerful, type-safe forms for React.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -42,8 +42,9 @@
     "react-error-boundary": "^3.1.4"
   },
   "dependencies": {
-    "@tanstack/react-store": "0.0.1-beta.85",
-    "@tanstack/form-core": "0.0.13"
+    "@tanstack/react-store": "0.1.3",
+    "@tanstack/store": "0.1.3",
+    "@tanstack/form-core": "0.0.15"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",

package/src/createFormFactory.ts

@@ -1,4 +1,5 @@
 import type { FormApi, FormOptions } from '@tanstack/form-core'
+
 import { type UseField, type FieldComponent, Field, useField } from './useField'
 import { useForm } from './useForm'
 
@@ -13,7 +14,8 @@ export function createFormFactory<TFormData>(
 ): FormFactory<TFormData> {
   return {
     useForm: (opts) => {
-      return useForm<TFormData>({ ...defaultOpts, ...opts } as any) as any
+      const formOptions = Object.assign({}, defaultOpts, opts)
+      return useForm<TFormData>(formOptions)
     },
     useField: useField as any,
     Field: Field as any,

package/src/tests/useField.test.tsx

@@ -0,0 +1,210 @@
+import * as React from 'react'
+import { render, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+import { createFormFactory } from '..'
+import { sleep } from './utils'
+
+const user = userEvent.setup()
+
+describe('useField', () => {
+  it('should allow to set default value', () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person>()
+
+    function Comp() {
+      const form = formFactory.useForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultValue="FirstName"
+            children={(field) => {
+              return (
+                <input data-testid="fieldinput" {...field.getInputProps()} />
+              )
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    expect(input).toHaveValue('FirstName')
+  })
+
+  it('should not validate on change if isTouched is false', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const error = 'Please enter a different value'
+
+    const formFactory = createFormFactory<Person>()
+
+    function Comp() {
+      const form = formFactory.useForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            onChange={(value) => (value === 'other' ? error : undefined)}
+            children={(field) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field.name}
+                  {...field.getInputProps()}
+                />
+                <p>{field.getMeta().error}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, queryByText } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    await user.type(input, 'other')
+    expect(queryByText(error)).not.toBeInTheDocument()
+  })
+
+  it('should validate on change if isTouched is true', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const error = 'Please enter a different value'
+
+    const formFactory = createFormFactory<Person>()
+
+    function Comp() {
+      const form = formFactory.useForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultMeta={{ isTouched: true }}
+            onChange={(value) => (value === 'other' ? error : undefined)}
+            children={(field) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field.name}
+                  {...field.getInputProps()}
+                />
+                <p>{field.getMeta().error}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, getByText, queryByText } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    expect(queryByText(error)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    expect(getByText(error)).toBeInTheDocument()
+  })
+
+  it('should validate async on change', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const error = 'Please enter a different value'
+
+    const formFactory = createFormFactory<Person>()
+
+    function Comp() {
+      const form = formFactory.useForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultMeta={{ isTouched: true }}
+            onChangeAsync={async () => {
+              await sleep(10)
+              return error
+            }}
+            children={(field) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field.name}
+                  {...field.getInputProps()}
+                />
+                <p>{field.getMeta().error}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, getByText, queryByText } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    expect(queryByText(error)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    await waitFor(() => getByText(error))
+    expect(getByText(error)).toBeInTheDocument()
+  })
+
+  it('should validate async on change with debounce', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const mockFn = vi.fn()
+    const error = 'Please enter a different value'
+    const formFactory = createFormFactory<Person>()
+
+    function Comp() {
+      const form = formFactory.useForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultMeta={{ isTouched: true }}
+            onChangeAsyncDebounceMs={100}
+            onChangeAsync={async () => {
+              mockFn()
+              await sleep(10)
+              return error
+            }}
+            children={(field) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field.name}
+                  {...field.getInputProps()}
+                />
+                <p>{field.getMeta().error}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, getByText } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    await user.type(input, 'other')
+    // mockFn will have been called 5 times without onChangeAsyncDebounceMs
+    expect(mockFn).toHaveBeenCalledTimes(0)
+    await waitFor(() => getByText(error))
+    expect(getByText(error)).toBeInTheDocument()
+  })
+})

package/src/tests/useForm.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
 import * as React from 'react'

package/src/tests/utils.ts

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