piral-forms 1.3.3-beta.6187 → 1.3.3-beta.6201

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-forms",
-  "version": "1.3.3-beta.6187",
+  "version": "1.3.3-beta.6201",
   "description": "Plugin for providing advanced form support in Piral.",
   "keywords": [
     "piral",
@@ -63,9 +63,9 @@
     "@types/history": "^4.7.8",
     "@types/react": "^18.0.0",
     "@types/react-router-dom": "^5.1.6",
-    "piral-core": "1.3.3-beta.6187",
+    "piral-core": "1.3.3-beta.6201",
     "react": "^18.0.0",
     "react-router-dom": "^5.2.0"
   },
-  "gitHead": "3da0780821a0aeef693b36d08dcf45eeb462d599"
+  "gitHead": "6e9f4e6f83514b5c38960ce015e073efc668f3d6"
 }

package/src/actions.test.ts

@@ -1,15 +1,35 @@
+/**
+ * @vitest-environment jsdom
+ */
 import create from 'zustand';
-import { createListener } from 'piral-base';
-import { createActions } from 'piral-core';
+import { describe, it, expect, vitest } from 'vitest';
 import { updateFormState } from './actions';
 
+function createListener() {
+  return {
+    on: vitest.fn(),
+    off: vitest.fn(),
+    emit: vitest.fn(),
+  };
+}
+
+function createActions(state, listener) {
+  return {
+    ...listener,
+    state: state.getState(),
+    dispatch(change) {
+      state.setState(change(state.getState()));
+    },
+  };
+}
+
 describe('Forms Actions Module', () => {
   it('updateFormState works on a fresh forms collection', () => {
     const state: any = create(() => ({
       foo: 5,
       forms: {},
     }));
-    const ctx = createActions(state, createListener({}));
+    const ctx = createActions(state, createListener());
     updateFormState(ctx, 'a', { name: 'Foo', active: true }, { name: 'Bar' });
     expect((state.getState())).toEqual({
       foo: 5,
@@ -31,7 +51,7 @@ describe('Forms Actions Module', () => {
         },
       },
     }));
-    const ctx = createActions(state, createListener({}));
+    const ctx = createActions(state, createListener());
     updateFormState(ctx, 'a', { name: 'Foo', active: true }, {});
     expect((state.getState())).toEqual({
       foo: 5,
@@ -53,7 +73,7 @@ describe('Forms Actions Module', () => {
         },
       },
     }));
-    const ctx = createActions(state, createListener({}));
+    const ctx = createActions(state, createListener());
     updateFormState(ctx, 'a', { name: 'Foo', active: true }, { name: 'bazeol' });
     expect((state.getState())).toEqual({
       foo: 5,
@@ -75,7 +95,7 @@ describe('Forms Actions Module', () => {
         },
       },
     }));
-    const ctx = createActions(state, createListener({}));
+    const ctx = createActions(state, createListener());
     updateFormState(ctx, 'a', { name: 'Foo' }, { active: false });
     expect((state.getState())).toEqual({
       foo: 5,
@@ -92,7 +112,7 @@ describe('Forms Actions Module', () => {
         },
       },
     }));
-    const ctx = createActions(state, createListener({}));
+    const ctx = createActions(state, createListener());
     updateFormState(ctx, 'a', { name: 'Foo', submitting: true }, { active: false });
     expect((state.getState())).toEqual({
       foo: 5,
@@ -115,7 +135,7 @@ describe('Forms Actions Module', () => {
         },
       },
     }));
-    const ctx = createActions(state, createListener({}));
+    const ctx = createActions(state, createListener());
     updateFormState(ctx, 'a', { name: 'Foo', changed: true }, { submitting: false, active: '' });
     expect((state.getState())).toEqual({
       foo: 5,
@@ -139,7 +159,7 @@ describe('Forms Actions Module', () => {
         },
       },
     }));
-    const ctx = createActions(state, createListener({}));
+    const ctx = createActions(state, createListener());
     updateFormState(ctx, 'a', { name: 'Foo', changed: false, active: '' }, { submitting: false });
     expect((state.getState())).toEqual({
       foo: 5,

package/src/create.test.tsx

@@ -1,4 +1,8 @@
+/**
+ * @vitest-environment jsdom
+ */
 import create from 'zustand';
+import { describe, it, expect, vitest } from 'vitest';
 import { createElement, FC } from 'react';
 import { createFormsApi } from './create';
 
@@ -9,9 +13,9 @@ function createMockContainer() {
   const state = create(() => ({}));
   return {
     context: {
-      on: jest.fn(),
-      off: jest.fn(),
-      emit: jest.fn(),
+      on: vitest.fn(),
+      off: vitest.fn(),
+      emit: vitest.fn(),
       defineActions() {},
       state,
       dispatch(update) {
@@ -25,7 +29,7 @@ function createMockContainer() {
 describe('Create Forms API Extensions', () => {
   it('createCoreApi allows using the created form creator as a HOC', () => {
     const container = createMockContainer();
-    container.context.updateFormState = jest.fn();
+    container.context.updateFormState = vitest.fn();
     const api = createFormsApi()(container.context) as any;
     const create = api.createForm({
       emptyData: {},

package/src/types.test.tsx

@@ -1,8 +1,11 @@
-import create from 'zustand';
+/**
+ * @vitest-environment jsdom
+ */
 import * as React from 'react';
-import { StateContext } from 'piral-core';
-import { DefaultErrorInfo } from 'piral-core/lib/defaults/DefaultErrorInfo.js';
-import { render } from '@testing-library/react';
+import create from 'zustand';
+import { describe, it, expect, vitest, afterEach } from 'vitest';
+import { StateContext, SwitchErrorInfo } from 'piral-core';
+import { render, cleanup } from '@testing-library/react';
 import './types';
 
 const FormErrorInfo = () => <div role="form_error" />;
@@ -18,13 +21,20 @@ const mockState = {
   })),
 };
 
-(React as any).useMemo = (cb) => cb();
+vitest.mock('react', async () => ({
+  ...(await vitest.importActual('react') as any),
+  useMemo: (cb) => cb(),
+}));
 
 describe('Extended Error Info Component for Forms', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
   it('renders the switch-case in the form error case', () => {
     const node = render(
       <StateContext.Provider value={mockState as any}>
-        <DefaultErrorInfo type="form" error="foo" />
+        <SwitchErrorInfo type="form" error="foo" />
       </StateContext.Provider>,
     );
     expect(node.getAllByRole('form_error').length).toBe(1);

package/src/useForm.test.ts

@@ -1,438 +1,492 @@
+/**
+ * @vitest-environment jsdom
+ */
 import * as React from 'react';
+import { describe, it, expect, vitest, beforeEach } from 'vitest';
 
-(React as any).useState = jest.fn((idOrFn) => [typeof idOrFn === 'function' ? idOrFn() : idOrFn]);
-(React as any).useEffect = jest.fn((cb) => cb());
+vitest.mock('react');
 
-const useGlobalState = jest.fn();
-const usePrompt = jest.fn();
-const setStateFake = jest.fn();
-const useAction = jest.fn(() => setStateFake);
+(React as any).useState = vitest.fn((idOrFn) => [typeof idOrFn === 'function' ? idOrFn() : idOrFn]);
+(React as any).useEffect = vitest.fn((cb) => cb());
 
-const piralCore = jest.mock('piral-core', () => ({
-  ...jest.requireActual('piral-core'),
+const useGlobalState = vitest.fn();
+const usePrompt = vitest.fn();
+const setStateFake = vitest.fn();
+const useAction = vitest.fn(() => setStateFake);
+
+vitest.mock('piral-core', async () => ({
+  ...((await vitest.importActual('piral-core')) as any),
   useGlobalState,
   usePrompt,
   useAction,
 }));
 
+const testOptions = {
+  timeout: 30000,
+};
+
 describe('Form Hook Module', () => {
   beforeEach(() => {
     setStateFake.mockReset();
   });
 
-  it('Returns the current data and not changed initially', () => {
-    const { useForm } = require('./useForm');
+  it(
+    'Returns the current data and not changed initially',
+    async () => {
+      const { useForm } = await import('./useForm');
 
-    useGlobalState.mockImplementation((select: any) =>
-      select({
-        forms: {
-          foo: {
-            changed: false,
-            currentData: {},
-            initialData: {},
-            submitting: false,
-            error: undefined,
+      useGlobalState.mockImplementation((select: any) =>
+        select({
+          forms: {
+            foo: {
+              changed: false,
+              currentData: {},
+              initialData: {},
+              submitting: false,
+              error: undefined,
+            },
           },
-        },
-      }),
-    );
+        }),
+      );
 
-    const options = {
-      wait: false,
-      silent: false,
-      message: '',
-      onSubmit() {
-        return Promise.resolve();
-      },
-      onChange: undefined,
-      emptyData: {},
-    };
-    const { changed, submitting, formData } = useForm({}, undefined, options, 'foo');
-    expect(changed).toBeFalsy();
-    expect(submitting).toBeFalsy();
-    expect(formData).toEqual({});
-    expect(setStateFake.mock.calls[0][0].length).toBe(3);
-  });
+      const options = {
+        wait: false,
+        silent: false,
+        message: '',
+        onSubmit() {
+          return Promise.resolve();
+        },
+        onChange: undefined,
+        emptyData: {},
+      };
+      const { changed, submitting, formData } = useForm({}, undefined as any, options, 'foo');
+      expect(changed).toBeFalsy();
+      expect(submitting).toBeFalsy();
+      expect(formData).toEqual({});
+      expect(setStateFake.mock.calls[0][0].length).toBe(3);
+    },
+    testOptions,
+  );
 
-  it('Generates a new id if the old one is not provided', () => {
-    const { useForm } = require('./useForm');
+  it(
+    'Generates a new id if the old one is not provided',
+    async () => {
+      const { useForm } = await import('./useForm');
 
-    useGlobalState.mockImplementation((select: any) =>
-      select({
-        forms: {},
-      }),
-    );
-    const options = {
-      wait: false,
-      silent: false,
-      message: '',
-      onSubmit() {
-        return Promise.resolve();
-      },
-      onChange: undefined,
-      emptyData: {},
-    };
-    const { changed, submitting, formData } = useForm({}, undefined, options);
-    expect(changed).toBeFalsy();
-    expect(submitting).toBeFalsy();
-    expect(formData).toEqual({});
-    expect(setStateFake.mock.calls[0][0].length).toBe(36);
-  });
+      useGlobalState.mockImplementation((select: any) =>
+        select({
+          forms: {},
+        }),
+      );
+      const options = {
+        wait: false,
+        silent: false,
+        message: '',
+        onSubmit() {
+          return Promise.resolve();
+        },
+        onChange: undefined,
+        emptyData: {},
+      };
+      const { changed, submitting, formData } = useForm({}, undefined as any, options);
+      expect(changed).toBeFalsy();
+      expect(submitting).toBeFalsy();
+      expect(formData).toEqual({});
+      expect(setStateFake.mock.calls[0][0].length).toBe(36);
+    },
+    testOptions,
+  );
 
-  it('Submit with no changed data does nothing', () => {
-    const { useForm } = require('./useForm');
-    const onSubmit = jest.fn(() => Promise.resolve());
+  it(
+    'Submit with no changed data does nothing',
+    async () => {
+      const { useForm } = await import('./useForm');
+      const onSubmit = vitest.fn(() => Promise.resolve());
 
-    useGlobalState.mockImplementation((select: any) =>
-      select({
-        forms: {},
-      }),
-    );
-    const options = {
-      wait: false,
-      silent: false,
-      message: '',
-      onSubmit,
-      onChange: undefined,
-      emptyData: {},
-    };
-    const { changed, submitting, formData, submit } = useForm({}, undefined, options);
-    submit();
-    expect(changed).toBeFalsy();
-    expect(submitting).toBeFalsy();
-    expect(onSubmit).not.toHaveBeenCalled();
-    expect(formData).toEqual({});
-    expect(setStateFake.mock.calls[0][0].length).toBe(36);
-  });
+      useGlobalState.mockImplementation((select: any) =>
+        select({
+          forms: {},
+        }),
+      );
+      const options = {
+        wait: false,
+        silent: false,
+        message: '',
+        onSubmit,
+        onChange: undefined,
+        emptyData: {},
+      };
+      const { changed, submitting, formData, submit } = useForm({}, undefined as any, options);
+      submit();
+      expect(changed).toBeFalsy();
+      expect(submitting).toBeFalsy();
+      expect(onSubmit).not.toHaveBeenCalled();
+      expect(formData).toEqual({});
+      expect(setStateFake.mock.calls[0][0].length).toBe(36);
+    },
+    testOptions,
+  );
 
-  it('Submit with changed data submits successfully', () => {
-    const { useForm } = require('./useForm');
-    const onSubmit = jest.fn(() => Promise.resolve());
+  it(
+    'Submit with changed data submits successfully',
+    async () => {
+      const { useForm } = await import('./useForm');
+      const onSubmit = vitest.fn(() => Promise.resolve());
 
-    useGlobalState.mockImplementation((select: any) =>
-      select({
-        forms: {
-          foo: {
-            changed: true,
-            currentData: {
-              a: 'foo',
-            },
-            initialData: {
-              a: '',
+      useGlobalState.mockImplementation((select: any) =>
+        select({
+          forms: {
+            foo: {
+              changed: true,
+              currentData: {
+                a: 'foo',
+              },
+              initialData: {
+                a: '',
+              },
+              submitting: false,
+              error: undefined,
             },
-            submitting: false,
-            error: undefined,
           },
-        },
-      }),
-    );
-    const options = {
-      wait: false,
-      silent: false,
-      message: '',
-      onSubmit,
-      onChange: undefined,
-      emptyData: {},
-    };
-    const { changed, formData, submit } = useForm({}, undefined, options, 'foo');
-    const preventDefault = jest.fn();
-    (submit as any)({ preventDefault });
-    expect(changed).toBeTruthy();
-    expect(preventDefault).toBeCalled();
-    expect(onSubmit).toHaveBeenCalledWith({
-      a: 'foo',
-    });
-    expect(formData).toEqual({
-      a: 'foo',
-    });
-  });
+        }),
+      );
+      const options = {
+        wait: false,
+        silent: false,
+        message: '',
+        onSubmit,
+        onChange: undefined,
+        emptyData: {},
+      };
+      const { changed, formData, submit } = useForm({}, undefined as any, options, 'foo');
+      const preventDefault = vitest.fn();
+      (submit as any)({ preventDefault });
+      expect(changed).toBeTruthy();
+      expect(preventDefault).toBeCalled();
+      expect(onSubmit).toHaveBeenCalledWith({
+        a: 'foo',
+      });
+      expect(formData).toEqual({
+        a: 'foo',
+      });
+    },
+    testOptions,
+  );
 
-  it('Submit with changed data running into an error', () => {
-    const { useForm } = require('./useForm');
-    const onSubmit = jest.fn(() => Promise.reject('My error'));
+  it(
+    'Submit with changed data running into an error',
+    async () => {
+      const { useForm } = await import('./useForm');
+      const onSubmit = vitest.fn(() => Promise.reject('My error'));
 
-    useGlobalState.mockImplementation((select: any) =>
-      select({
-        forms: {
-          foo: {
-            changed: true,
-            currentData: {
-              a: 'foo',
-            },
-            initialData: {
-              a: '',
+      useGlobalState.mockImplementation((select: any) =>
+        select({
+          forms: {
+            foo: {
+              changed: true,
+              currentData: {
+                a: 'foo',
+              },
+              initialData: {
+                a: '',
+              },
+              submitting: false,
+              error: undefined,
             },
-            submitting: false,
-            error: undefined,
           },
-        },
-      }),
-    );
-    const options = {
-      wait: false,
-      silent: false,
-      message: '',
-      onSubmit,
-      onChange: undefined,
-      emptyData: {},
-    };
-    const { changed, formData, submit } = useForm({}, undefined, options, 'foo');
-    submit();
-    expect(changed).toBeTruthy();
-    expect(onSubmit).toHaveBeenCalledWith({
-      a: 'foo',
-    });
-    expect(formData).toEqual({
-      a: 'foo',
-    });
-  });
+        }),
+      );
+      const options = {
+        wait: false,
+        silent: false,
+        message: '',
+        onSubmit,
+        onChange: undefined,
+        emptyData: {},
+      };
+      const { changed, formData, submit } = useForm({}, undefined as any, options, 'foo');
+      submit();
+      expect(changed).toBeTruthy();
+      expect(onSubmit).toHaveBeenCalledWith({
+        a: 'foo',
+      });
+      expect(formData).toEqual({
+        a: 'foo',
+      });
+    },
+    testOptions,
+  );
 
-  it('Sets new data on changeForm', () => {
-    const { useForm } = require('./useForm');
+  it(
+    'Sets new data on changeForm',
+    async () => {
+      const { useForm } = await import('./useForm');
 
-    useGlobalState.mockImplementation((select: any) =>
-      select({
-        forms: {},
-      }),
-    );
-    const options = {
-      wait: false,
-      silent: false,
-      message: '',
-      onSubmit() {
-        return Promise.resolve();
-      },
-      onChange: undefined,
-      emptyData: {},
-    };
-    const { changeForm } = useForm({}, undefined, options, 'id');
-    changeForm({
-      target: {
-        name: 'foo',
-        value: 'bar',
-      },
-    } as any);
-    expect(setStateFake).toHaveBeenCalledTimes(2);
-    expect(setStateFake).toHaveBeenNthCalledWith(
-      2,
-      'id',
-      {
-        active: true,
-        currentData: {},
-        initialData: {},
-        changed: false,
-        submitting: false,
-        error: undefined,
-      },
-      {
-        currentData: {
-          foo: 'bar',
+      useGlobalState.mockImplementation((select: any) =>
+        select({
+          forms: {},
+        }),
+      );
+      const options = {
+        wait: false,
+        silent: false,
+        message: '',
+        onSubmit() {
+          return Promise.resolve();
         },
-        changed: true,
-        error: undefined,
-      },
-    );
-  });
+        onChange: undefined,
+        emptyData: {},
+      };
+      const { changeForm } = useForm({}, undefined as any, options, 'id');
+      changeForm({
+        target: {
+          name: 'foo',
+          value: 'bar',
+        },
+      } as any);
+      expect(setStateFake).toHaveBeenCalledTimes(2);
+      expect(setStateFake).toHaveBeenNthCalledWith(
+        2,
+        'id',
+        {
+          active: true,
+          currentData: {},
+          initialData: {},
+          changed: false,
+          submitting: false,
+          error: undefined,
+        },
+        {
+          currentData: {
+            foo: 'bar',
+          },
+          changed: true,
+          error: undefined,
+        },
+      );
+    },
+    testOptions,
+  );
 
-  it('Sets new data on setFormData', () => {
-    const { useForm } = require('./useForm');
+  it(
+    'Sets new data on setFormData',
+    async () => {
+      const { useForm } = await import('./useForm');
 
-    useGlobalState.mockImplementation((select: any) =>
-      select({
-        forms: {},
-      }),
-    );
-    const options = {
-      wait: false,
-      silent: false,
-      message: '',
-      onSubmit() {
-        return Promise.resolve();
-      },
-      onChange: undefined,
-      emptyData: {},
-    };
-    const { setFormData } = useForm({}, undefined, options, 'id');
-    setFormData({
-      foo: 'a',
-      bar: 'b',
-    } as any);
-    expect(setStateFake).toHaveBeenCalledTimes(2);
-    expect(setStateFake).toHaveBeenNthCalledWith(
-      2,
-      'id',
-      {
-        active: true,
-        currentData: {},
-        initialData: {},
-        changed: false,
-        submitting: false,
-        error: undefined,
-      },
-      {
-        currentData: {
-          foo: 'a',
-          bar: 'b',
+      useGlobalState.mockImplementation((select: any) =>
+        select({
+          forms: {},
+        }),
+      );
+      const options = {
+        wait: false,
+        silent: false,
+        message: '',
+        onSubmit() {
+          return Promise.resolve();
         },
-        changed: true,
-        error: undefined,
-      },
-    );
-  });
+        onChange: undefined,
+        emptyData: {},
+      };
+      const { setFormData } = useForm({}, undefined as any, options, 'id');
+      setFormData({
+        foo: 'a',
+        bar: 'b',
+      } as any);
+      expect(setStateFake).toHaveBeenCalledTimes(2);
+      expect(setStateFake).toHaveBeenNthCalledWith(
+        2,
+        'id',
+        {
+          active: true,
+          currentData: {},
+          initialData: {},
+          changed: false,
+          submitting: false,
+          error: undefined,
+        },
+        {
+          currentData: {
+            foo: 'a',
+            bar: 'b',
+          },
+          changed: true,
+          error: undefined,
+        },
+      );
+    },
+    testOptions,
+  );
 
-  it('Resets changes to initial data', () => {
-    const { useForm } = require('./useForm');
+  it(
+    'Resets changes to initial data',
+    async () => {
+      const { useForm } = await import('./useForm');
 
-    useGlobalState.mockImplementation((select: any) =>
-      select({
-        forms: {
-          id: {
-            active: true,
-            changed: true,
-            currentData: {
-              a: 'foo',
+      useGlobalState.mockImplementation((select: any) =>
+        select({
+          forms: {
+            id: {
+              active: true,
+              changed: true,
+              currentData: {
+                a: 'foo',
+              },
+              initialData: {
+                a: '',
+              },
+              submitting: false,
+              error: undefined,
             },
-            initialData: {
-              a: '',
-            },
-            submitting: false,
-            error: undefined,
           },
+        }),
+      );
+      const options = {
+        wait: false,
+        silent: false,
+        message: '',
+        onSubmit() {
+          return Promise.resolve();
         },
-      }),
-    );
-    const options = {
-      wait: false,
-      silent: false,
-      message: '',
-      onSubmit() {
-        return Promise.resolve();
-      },
-      onChange: undefined,
-      emptyData: {},
-    };
-    const { reset } = useForm({}, undefined, options, 'id');
-    reset();
-    expect(setStateFake).toHaveBeenCalledTimes(2);
-    expect(setStateFake).toHaveBeenNthCalledWith(
-      2,
-      'id',
-      {
-        active: true,
-        currentData: {
-          a: 'foo',
-        },
-        initialData: {
-          a: '',
+        onChange: undefined,
+        emptyData: {},
+      };
+      const { reset } = useForm({}, undefined as any, options, 'id');
+      reset();
+      expect(setStateFake).toHaveBeenCalledTimes(2);
+      expect(setStateFake).toHaveBeenNthCalledWith(
+        2,
+        'id',
+        {
+          active: true,
+          currentData: {
+            a: 'foo',
+          },
+          initialData: {
+            a: '',
+          },
+          changed: true,
+          submitting: false,
+          error: undefined,
         },
-        changed: true,
-        submitting: false,
-        error: undefined,
-      },
-      {
-        currentData: {
-          a: '',
+        {
+          currentData: {
+            a: '',
+          },
+          changed: false,
+          error: undefined,
         },
-        changed: false,
-        error: undefined,
-      },
-    );
-  });
+      );
+    },
+    testOptions,
+  );
 
-  it('onChange should be triggered with full data set', () => {
-    const { useForm } = require('./useForm');
-    const onChange = jest.fn((data) => Promise.resolve(data));
+  it(
+    'onChange should be triggered with full data set',
+    async () => {
+      const { useForm } = await import('./useForm');
+      const onChange = vitest.fn((data) => Promise.resolve(data));
 
-    useGlobalState.mockImplementation((select: any) =>
-      select({
-        forms: {
-          id: {
-            active: true,
-            changed: true,
-            currentData: {
-              a: 'foo',
-            },
-            initialData: {
-              a: '',
+      useGlobalState.mockImplementation((select: any) =>
+        select({
+          forms: {
+            id: {
+              active: true,
+              changed: true,
+              currentData: {
+                a: 'foo',
+              },
+              initialData: {
+                a: '',
+              },
+              submitting: false,
+              error: undefined,
             },
-            submitting: false,
-            error: undefined,
           },
+        }),
+      );
+      const options = {
+        wait: false,
+        silent: false,
+        message: '',
+        onChange,
+        onSubmit() {
+          return Promise.resolve();
         },
-      }),
-    );
-    const options = {
-      wait: false,
-      silent: false,
-      message: '',
-      onChange,
-      onSubmit() {
-        return Promise.resolve();
-      },
-      emptyData: {},
-    };
-    const { setFormData } = useForm({}, undefined, options, 'id');
-    setFormData({ a: 'b' });
-    expect(onChange).toHaveBeenCalledWith({ a: 'b' });
-  });
+        emptyData: {},
+      };
+      const { setFormData } = useForm({}, undefined as any, options, 'id');
+      setFormData({ a: 'b' });
+      expect(onChange).toHaveBeenCalledWith({ a: 'b' });
+    },
+    testOptions,
+  );
 
-  it('onChange which fails should be handled gracefully', () => {
-    const { useForm } = require('./useForm');
-    const onChange = jest.fn((data) => Promise.reject('my error'));
+  it(
+    'onChange which fails should be handled gracefully',
+    async () => {
+      const { useForm } = await import('./useForm');
+      const onChange = vitest.fn((data) => Promise.reject('my error'));
 
-    useGlobalState.mockImplementation((select: any) =>
-      select({
-        forms: {},
-      }),
-    );
-    const options = {
-      wait: false,
-      silent: false,
-      message: '',
-      onChange,
-      onSubmit() {
-        return Promise.resolve();
-      },
-      emptyData: {},
-    };
-    const { setFormData } = useForm({}, undefined, options);
-    setFormData({ a: 'b' });
-    expect(onChange).toHaveBeenCalledWith({ a: 'b' });
-  });
+      useGlobalState.mockImplementation((select: any) =>
+        select({
+          forms: {},
+        }),
+      );
+      const options = {
+        wait: false,
+        silent: false,
+        message: '',
+        onChange,
+        onSubmit() {
+          return Promise.resolve();
+        },
+        emptyData: {},
+      };
+      const { setFormData } = useForm({}, undefined as any, options);
+      setFormData({ a: 'b' });
+      expect(onChange).toHaveBeenCalledWith({ a: 'b' });
+    },
+    testOptions,
+  );
 
-  it('cleanup sets active to false', () => {
-    const { useForm } = require('./useForm');
-    (React as any).useEffect = jest.fn((cb) => cb()());
+  it(
+    'cleanup sets active to false',
+    async () => {
+      const { useForm } = await import('./useForm');
+      (React as any).useEffect = vitest.fn((cb) => cb()());
 
-    useGlobalState.mockImplementation((select: any) =>
-      select({
-        forms: {},
-      }),
-    );
-    const options = {
-      wait: false,
-      silent: false,
-      message: '',
-      onChange: undefined,
-      onSubmit() {
-        return Promise.resolve();
-      },
-      emptyData: {},
-    };
-    useForm({}, undefined, options, 'id');
-    expect(setStateFake).toHaveBeenCalledTimes(2);
-    expect(setStateFake).toHaveBeenNthCalledWith(
-      2,
-      'id',
-      {
-        active: true,
-        changed: false,
-        currentData: {},
-        error: undefined,
-        initialData: {},
-        submitting: false,
-      },
-      { active: false },
-    );
-  });
+      useGlobalState.mockImplementation((select: any) =>
+        select({
+          forms: {},
+        }),
+      );
+      const options = {
+        wait: false,
+        silent: false,
+        message: '',
+        onChange: undefined,
+        onSubmit() {
+          return Promise.resolve();
+        },
+        emptyData: {},
+      };
+      useForm({}, undefined as any, options, 'id');
+      expect(setStateFake).toHaveBeenCalledTimes(2);
+      expect(setStateFake).toHaveBeenNthCalledWith(
+        2,
+        'id',
+        {
+          active: true,
+          changed: false,
+          currentData: {},
+          error: undefined,
+          initialData: {},
+          submitting: false,
+        },
+        { active: false },
+      );
+    },
+    testOptions,
+  );
 });

package/src/usePromise.test.ts

@@ -1,12 +1,16 @@
+/**
+ * @vitest-environment jsdom
+ */
 import * as React from 'react';
+import { describe, it, expect, vitest } from 'vitest';
 import { usePromise } from './usePromise';
 
-jest.mock('react');
+vitest.mock('react');
 
 describe('Promise Module', () => {
   it('directly reports loading', () => {
-    const usedEffect = jest.fn();
-    const setState = jest.fn();
+    const usedEffect = vitest.fn();
+    const setState = vitest.fn();
     (React as any).useEffect = usedEffect;
     (React as any).useState = (current) => [current, setState];
     const result = usePromise(() => Promise.resolve());
@@ -18,8 +22,8 @@ describe('Promise Module', () => {
   });
 
   it('reports loading after the effect is done', () => {
-    const usedEffect = jest.fn((fn) => fn());
-    const setState = jest.fn();
+    const usedEffect = vitest.fn((fn) => fn());
+    const setState = vitest.fn();
     (React as any).useEffect = usedEffect;
     (React as any).useState = (current) => [current, setState];
     const result = usePromise(() => Promise.resolve());
@@ -31,8 +35,8 @@ describe('Promise Module', () => {
   });
 
   it('reports done when the loading finished', async () => {
-    const usedEffect = jest.fn((fn) => fn());
-    const setState = jest.fn();
+    const usedEffect = vitest.fn((fn) => fn());
+    const setState = vitest.fn();
     (React as any).useEffect = usedEffect;
     (React as any).useState = (current) => [current, setState];
     usePromise(() => Promise.resolve('123'));
@@ -48,8 +52,8 @@ describe('Promise Module', () => {
   });
 
   it('reports error when the loading finished', async () => {
-    const usedEffect = jest.fn((fn) => fn());
-    const setState = jest.fn();
+    const usedEffect = vitest.fn((fn) => fn());
+    const setState = vitest.fn();
     (React as any).useEffect = usedEffect;
     (React as any).useState = (current) => [current, setState];
     usePromise(() => Promise.reject('123'));
@@ -65,8 +69,8 @@ describe('Promise Module', () => {
   });
 
   it('does not set the state on cancel', async () => {
-    const usedEffect = jest.fn((fn) => fn()());
-    const setState = jest.fn();
+    const usedEffect = vitest.fn((fn) => fn()());
+    const setState = vitest.fn();
     (React as any).useEffect = usedEffect;
     (React as any).useState = (current) => [current, setState];
     usePromise(() => Promise.reject('123'));

package/src/usePrompt.test.ts

@@ -1,16 +1,22 @@
+/**
+ * @vitest-environment jsdom
+ */
 import * as React from 'react';
+import { describe, it, expect, vitest } from 'vitest';
 import { usePrompt } from './usePrompt';
 
+vitest.mock('react');
+
 describe('Prompt Hook Module', () => {
   it('does not do anything when its not active', () => {
     const originalAdd = window.addEventListener;
     const originalRemove = window.addEventListener;
-    window.addEventListener = jest.fn();
-    window.removeEventListener = jest.fn();
-    const usedEffect = jest.fn();
+    window.addEventListener = vitest.fn();
+    window.removeEventListener = vitest.fn();
+    const usedEffect = vitest.fn();
     const history = {
-      block: jest.fn(() => () => {}),
-      listen: jest.fn(() => () => {}),
+      block: vitest.fn(() => () => {}),
+      listen: vitest.fn(() => () => {}),
     };
     (React as any).useEffect = usedEffect;
     usePrompt(false, history as any, 'blocked');
@@ -27,12 +33,12 @@ describe('Prompt Hook Module', () => {
   it('does integrate blockers when its active', () => {
     const originalAdd = window.addEventListener;
     const originalRemove = window.addEventListener;
-    window.addEventListener = jest.fn();
-    window.removeEventListener = jest.fn();
-    const usedEffect = jest.fn();
+    window.addEventListener = vitest.fn();
+    window.removeEventListener = vitest.fn();
+    const usedEffect = vitest.fn();
     const history = {
-      block: jest.fn(() => () => {}),
-      listen: jest.fn(() => () => {}),
+      block: vitest.fn(() => () => {}),
+      listen: vitest.fn(() => () => {}),
     };
     (React as any).useEffect = usedEffect;
     usePrompt(true, history as any, 'blocked');
@@ -49,12 +55,12 @@ describe('Prompt Hook Module', () => {
   it('returns with the provided message when the blocker is triggered', () => {
     const originalAdd = window.addEventListener;
     const originalRemove = window.addEventListener;
-    window.addEventListener = jest.fn();
-    window.removeEventListener = jest.fn();
-    const usedEffect = jest.fn();
+    window.addEventListener = vitest.fn();
+    window.removeEventListener = vitest.fn();
+    const usedEffect = vitest.fn();
     const history = {
-      block: jest.fn(() => () => {}),
-      listen: jest.fn(() => () => {}),
+      block: vitest.fn(() => () => {}),
+      listen: vitest.fn(() => () => {}),
     };
     (React as any).useEffect = usedEffect;
     usePrompt(true, history as any, 'blocked');
@@ -69,12 +75,12 @@ describe('Prompt Hook Module', () => {
   it('returns with the message from the callback when the blocker is triggered', () => {
     const originalAdd = window.addEventListener;
     const originalRemove = window.addEventListener;
-    window.addEventListener = jest.fn();
-    window.removeEventListener = jest.fn();
-    const usedEffect = jest.fn();
+    window.addEventListener = vitest.fn();
+    window.removeEventListener = vitest.fn();
+    const usedEffect = vitest.fn();
     const history = {
-      block: jest.fn(() => () => {}),
-      listen: jest.fn(() => () => {}),
+      block: vitest.fn(() => () => {}),
+      listen: vitest.fn(() => () => {}),
     };
     (React as any).useEffect = usedEffect;
     usePrompt(true, history as any, () => 'block!');

package/src/withForm.test.tsx

@@ -1,14 +1,18 @@
+/**
+ * @vitest-environment jsdom
+ */
 import * as React from 'react';
 import * as piralCore from 'piral-core';
 import * as useForm from './useForm';
 import * as usePromise from './usePromise';
+import { describe, it, expect, vitest } from 'vitest';
 import { MemoryRouter } from 'react-router-dom';
 import { render } from '@testing-library/react';
 import { withForm } from './withForm';
 
-jest.mock('piral-core');
-jest.mock('./useForm');
-jest.mock('./usePromise');
+vitest.mock('piral-core');
+vitest.mock('./useForm');
+vitest.mock('./usePromise');
 
 const mountWithRouter = (node, url = '/') =>
   render(
@@ -32,10 +36,10 @@ ErrorComponent.displayName = 'ErrorComponent';
 describe('withForm Module', () => {
   it('shows error component if nothing is loading and no data is available', () => {
     const options: any = { emptyData: {} };
-    const usedForm = jest.fn(() => ({
+    const usedForm = vitest.fn(() => ({
       submit() {},
     }));
-    const usedPromise = jest.fn(() => ({
+    const usedPromise = vitest.fn(() => ({
       loading: false,
       data: undefined,
       error: undefined,
@@ -49,10 +53,10 @@ describe('withForm Module', () => {
 
   it('shows data component if nothing is loading and data is available', () => {
     const options: any = { emptyData: {} };
-    const usedForm = jest.fn(() => ({
+    const usedForm = vitest.fn(() => ({
       submit() {},
     }));
-    const usedPromise = jest.fn(() => ({
+    const usedPromise = vitest.fn(() => ({
       loading: false,
       data: {},
       error: undefined,
@@ -66,10 +70,10 @@ describe('withForm Module', () => {
 
   it('shows loading component if it is loading', () => {
     const options: any = { emptyData: {} };
-    const usedForm = jest.fn(() => ({
+    const usedForm = vitest.fn(() => ({
       submit() {},
     }));
-    const usedPromise = jest.fn(() => ({
+    const usedPromise = vitest.fn(() => ({
       loading: true,
       data: undefined,
       error: undefined,
@@ -82,11 +86,11 @@ describe('withForm Module', () => {
   });
 
   it('calls load data if its there', () => {
-    const loadData = jest.fn(() => () => Promise.resolve({}));
-    const usedForm = jest.fn(() => ({
+    const loadData = vitest.fn(() => () => Promise.resolve({}));
+    const usedForm = vitest.fn(() => ({
       submit() {},
     }));
-    const usedPromise = jest.fn((fn) => {
+    const usedPromise = vitest.fn((fn) => {
       fn();
       return {
         loading: false,
@@ -105,10 +109,10 @@ describe('withForm Module', () => {
 
   it('does not call load data if its missing', () => {
     const loadData = undefined;
-    const usedForm = jest.fn(() => ({
+    const usedForm = vitest.fn(() => ({
       submit() {},
     }));
-    const usedPromise = jest.fn((fn) => {
+    const usedPromise = vitest.fn((fn) => {
       const data = fn();
       return {
         loading: false,