@plone/volto 18.14.0 → 18.15.0

package/src/components/manage/Form/__mocks__/index.vitest.tsx

@@ -0,0 +1,73 @@
+import type { JSONSchema } from '@plone/types';
+import type { Ref } from 'react';
+import { forwardRef } from 'react';
+
+const cleanupSchema = (schema: JSONSchema | null): JSONSchema | null => {
+  if (!schema || !schema.properties) return schema;
+  return {
+    ...schema,
+    properties: Object.entries(schema.properties).reduce<Record<string, any>>(
+      (acc, [key, value]) => {
+        acc[key] = {
+          ...value,
+          description:
+            typeof value.description === 'string'
+              ? value.description
+              : undefined,
+        };
+        return acc;
+      },
+      {},
+    ),
+  };
+};
+
+export const Field = vi.fn((props) => (
+  <div className="Field" id={props.id}>
+    {props.title}
+  </div>
+));
+
+export const InlineForm = vi.fn((props) => (
+  <div
+    id="InlineForm"
+    data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
+  />
+));
+
+export const ModalForm = vi.fn((props) => (
+  <div
+    id="ModalForm"
+    data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
+  />
+));
+
+export const UndoToolbar = vi.fn(() => <div id="UndoToolbar" />);
+
+export const BlocksToolbar = vi.fn(() => <div id="BlocksToolbar" />);
+
+export const BlockDataForm = vi.fn((props) => (
+  <div
+    id="BlockDataForm"
+    data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
+  />
+));
+
+export const BlocksForm = vi.fn((props) => (
+  <div
+    id="BlocksForm"
+    data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
+  />
+));
+
+const MockForm = forwardRef(
+  (props: { schema: JSONSchema | null }, ref: Ref<any>) => (
+    <div
+      id="Form"
+      data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
+      ref={ref}
+    />
+  ),
+);
+
+export const Form = vi.fn((props) => <MockForm {...props} />);

package/src/components/manage/MaybeWrap/MaybeWrap.tsx

@@ -0,0 +1,15 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+
+type MaybeWrapProps<T extends React.ElementType> = {
+  condition: boolean;
+  as: T;
+} & ComponentPropsWithoutRef<React.ElementType extends T ? 'div' : T>;
+
+function MaybeWrap<T extends React.ElementType = 'div'>(
+  props: MaybeWrapProps<T>,
+) {
+  const { as: Component = 'div', condition, ...rest } = props;
+  return condition ? <Component {...rest} /> : props.children;
+}
+
+export default MaybeWrap;

package/src/components/manage/Preferences/ChangePassword.test.jsx

@@ -9,7 +9,12 @@ import ChangePassword from './ChangePassword';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
+
 vi.mock('../Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Portal" />),
 }));

package/src/components/manage/Preferences/PersonalPreferences.test.jsx

@@ -12,8 +12,17 @@ vi.mock('../Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Portal" />),
 }));
 
-vi.mock('@plone/volto/components/manage/Form');
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/ArrayWidget.test.jsx

@@ -8,7 +8,11 @@ import ArrayWidget from './ArrayWidget';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
 
 // Mock react-sortable-hoc to prevent the container error
 vi.mock('react-sortable-hoc', () => ({

package/src/components/manage/Widgets/CheckboxGroupWidget.test.jsx

@@ -7,7 +7,12 @@ import CheckboxGroupWidget from './CheckboxGroupWidget';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/DatetimeWidget.test.jsx

@@ -6,7 +6,11 @@ import { waitFor, render, screen } from '@testing-library/react';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
 
 beforeAll(async () => {
   const { __setLoadables } = await import(

package/src/components/manage/Widgets/ObjectListWidget.test.jsx

@@ -4,8 +4,16 @@ import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import ObjectListWidget from './ObjectListWidget';
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
-vi.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
 
 beforeAll(async () => {
   const { __setLoadables } = await import(

package/src/components/manage/Widgets/ObjectWidget.test.jsx

@@ -5,7 +5,11 @@ import { Provider } from 'react-intl-redux';
 import { render, fireEvent } from '@testing-library/react';
 import ObjectWidget from './ObjectWidget';
 
-vi.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
 
 const mockStore = configureStore();
 

package/src/components/manage/Widgets/RadioGroupWidget.test.jsx

@@ -7,7 +7,12 @@ import RadioGroupWidget from './RadioGroupWidget';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.test.jsx

@@ -5,7 +5,12 @@ import { Provider } from 'react-intl-redux';
 import { waitFor } from '@testing-library/react';
 import RecurrenceWidget from './RecurrenceWidget';
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/SchemaWidget.test.jsx

@@ -5,7 +5,12 @@ import { Provider } from 'react-intl-redux';
 
 import SchemaWidget from './SchemaWidget';
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/SchemaWidgetFieldset.test.jsx

@@ -3,7 +3,12 @@ import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import { render } from '@testing-library/react';
 import SchemaWidgetFieldsetComponent from './SchemaWidgetFieldset';
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/SelectAutoComplete.test.jsx

@@ -6,7 +6,12 @@ import SelectAutoComplete from './SelectAutoComplete';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/SelectWidget.test.jsx

@@ -6,7 +6,12 @@ import SelectWidget from './SelectWidget';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/TimeWidget.test.jsx

@@ -6,7 +6,12 @@ import { waitFor, render, screen } from '@testing-library/react';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/TokenWidget.test.jsx

@@ -7,7 +7,12 @@ import TokenWidget from './TokenWidget';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/VocabularyTermsWidget.test.jsx

@@ -4,8 +4,16 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import VocabularyTermsWidget from './VocabularyTermsWidget';
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
-vi.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
 
 beforeAll(async () => {
   const { __setLoadables } = await import(

package/src/components/manage/Widgets/__mocks__/index.tsx

@@ -1,41 +1,59 @@
-export const AlignWidget = vi.fn(() => <div id="AlignWidget" />);
-export const ButtonsWidget = vi.fn(() => <div id="ButtonsWidget" />);
-export const ArrayWidget = vi.fn(() => <div id="ArrayWidget" />);
-export const CheckboxWidget = vi.fn(() => <div id="CheckboxWidget" />);
-export const FileWidget = vi.fn(() => <div id="FileWidget" />);
-export const IdWidget = vi.fn(() => <div id="IdWidget" />);
-export const PasswordWidget = vi.fn(() => <div id="PasswordWidget" />);
-export const QueryWidget = vi.fn(() => <div id="QueryWidget" />);
-export const QuerySortOnWidget = vi.fn(() => <div id="QuerySortOnWidget" />);
-export const QuerystringWidget = vi.fn(() => <div id="QuerystringWidget" />);
-export const SchemaWidget = vi.fn(() => <div id="SchemaWidget" />);
-export const SelectWidget = vi.fn(() => <div id="SelectWidget" />);
-export const TextareaWidget = vi.fn(() => <div id="TextareaWidget" />);
-export const TextWidget = vi.fn(() => <div id="TextWidget" />);
-export const TokenWidget = vi.fn(() => <div id="TokenWidget" />);
-export const WysiwygWidget = vi.fn(() => <div id="WysiwygWidget" />);
-export const UrlWidget = vi.fn(() => <div id="UrlWidget" />);
-export const InternalUrlWidget = vi.fn(() => <div id="InternalUrlWidget" />);
-export const EmailWidget = vi.fn(() => <div id="EmailWidget" />);
-export const NumberWidget = vi.fn(() => <div id="NumberWidget" />);
-export const ImageSizeWidget = vi.fn(() => <div id="ImageSizeWidget" />);
-export const RegistryImageWidget = vi.fn(() => (
+/* TODO: When the Volto Team removes Jest configuration support from Volto core, update this file with the Vitest version of the mock.
+Then, in the tests, we need to replace:
+
+vi.mock('@plone/volto/components/manage/Widgets', async () => {
+  return await import(
+    '@plone/volto/components/manage/Widgets/__mocks__/index.vitest.tsx'
+  );
+});
+
+with the following:
+
+vi.mock('@plone/volto/components/manage/Widgets');
+
+Finally, remove this comment.
+*/
+
+export const AlignWidget = jest.fn(() => <div id="AlignWidget" />);
+export const ButtonsWidget = jest.fn(() => <div id="ButtonsWidget" />);
+export const ArrayWidget = jest.fn(() => <div id="ArrayWidget" />);
+export const CheckboxWidget = jest.fn(() => <div id="CheckboxWidget" />);
+export const FileWidget = jest.fn(() => <div id="FileWidget" />);
+export const IdWidget = jest.fn(() => <div id="IdWidget" />);
+export const PasswordWidget = jest.fn(() => <div id="PasswordWidget" />);
+export const QueryWidget = jest.fn(() => <div id="QueryWidget" />);
+export const QuerySortOnWidget = jest.fn(() => <div id="QuerySortOnWidget" />);
+export const QuerystringWidget = jest.fn(() => <div id="QuerystringWidget" />);
+export const SchemaWidget = jest.fn(() => <div id="SchemaWidget" />);
+export const SelectWidget = jest.fn(() => <div id="SelectWidget" />);
+export const TextareaWidget = jest.fn(() => <div id="TextareaWidget" />);
+export const TextWidget = jest.fn(() => <div id="TextWidget" />);
+export const TokenWidget = jest.fn(() => <div id="TokenWidget" />);
+export const WysiwygWidget = jest.fn(() => <div id="WysiwygWidget" />);
+export const UrlWidget = jest.fn(() => <div id="UrlWidget" />);
+export const InternalUrlWidget = jest.fn(() => <div id="InternalUrlWidget" />);
+export const EmailWidget = jest.fn(() => <div id="EmailWidget" />);
+export const NumberWidget = jest.fn(() => <div id="NumberWidget" />);
+export const ImageSizeWidget = jest.fn(() => <div id="ImageSizeWidget" />);
+export const RegistryImageWidget = jest.fn(() => (
   <div id="RegistryImageWidget" />
 ));
-export const ReferenceWidget = vi.fn(() => <div id="ReferenceWidget" />);
-export const ObjectBrowserWidget = vi.fn(() => (
+export const ReferenceWidget = jest.fn(() => <div id="ReferenceWidget" />);
+export const ObjectBrowserWidget = jest.fn(() => (
   <div id="ObjectBrowserWidget" />
 ));
-export const ObjectWidget = vi.fn(() => <div id="ObjectWidget" />);
-export const ObjectListWidget = vi.fn(() => <div id="ObjectListWidget" />);
-export const VocabularyTermsWidget = vi.fn(() => (
+export const ObjectWidget = jest.fn(() => <div id="ObjectWidget" />);
+export const ObjectListWidget = jest.fn(() => <div id="ObjectListWidget" />);
+export const VocabularyTermsWidget = jest.fn(() => (
   <div id="VocabularyTermsWidget" />
 ));
-export const SelectMetadataWidget = vi.fn(() => (
+export const SelectMetadataWidget = jest.fn(() => (
   <div id="SelectMetadataWidget" />
 ));
-export const SelectAutoComplete = vi.fn(() => <div id="SelectAutoComplete" />);
-export const ColorPickerWidget = vi.fn(() => <div id="ColorPickerWidget" />);
-export const DatetimeWidget = vi.fn(() => <div id="DatetimeWidget" />);
-export const RecurrenceWidget = vi.fn(() => <div id="RecurrenceWidget" />);
-export const FormFieldWrapper = vi.fn(() => <div id="FormFieldWrapper" />);
+export const SelectAutoComplete = jest.fn(() => (
+  <div id="SelectAutoComplete" />
+));
+export const ColorPickerWidget = jest.fn(() => <div id="ColorPickerWidget" />);
+export const DatetimeWidget = jest.fn(() => <div id="DatetimeWidget" />);
+export const RecurrenceWidget = jest.fn(() => <div id="RecurrenceWidget" />);
+export const FormFieldWrapper = jest.fn(() => <div id="FormFieldWrapper" />);

package/src/components/manage/Widgets/__mocks__/index.vitest.tsx

@@ -0,0 +1,41 @@
+export const AlignWidget = vi.fn(() => <div id="AlignWidget" />);
+export const ButtonsWidget = vi.fn(() => <div id="ButtonsWidget" />);
+export const ArrayWidget = vi.fn(() => <div id="ArrayWidget" />);
+export const CheckboxWidget = vi.fn(() => <div id="CheckboxWidget" />);
+export const FileWidget = vi.fn(() => <div id="FileWidget" />);
+export const IdWidget = vi.fn(() => <div id="IdWidget" />);
+export const PasswordWidget = vi.fn(() => <div id="PasswordWidget" />);
+export const QueryWidget = vi.fn(() => <div id="QueryWidget" />);
+export const QuerySortOnWidget = vi.fn(() => <div id="QuerySortOnWidget" />);
+export const QuerystringWidget = vi.fn(() => <div id="QuerystringWidget" />);
+export const SchemaWidget = vi.fn(() => <div id="SchemaWidget" />);
+export const SelectWidget = vi.fn(() => <div id="SelectWidget" />);
+export const TextareaWidget = vi.fn(() => <div id="TextareaWidget" />);
+export const TextWidget = vi.fn(() => <div id="TextWidget" />);
+export const TokenWidget = vi.fn(() => <div id="TokenWidget" />);
+export const WysiwygWidget = vi.fn(() => <div id="WysiwygWidget" />);
+export const UrlWidget = vi.fn(() => <div id="UrlWidget" />);
+export const InternalUrlWidget = vi.fn(() => <div id="InternalUrlWidget" />);
+export const EmailWidget = vi.fn(() => <div id="EmailWidget" />);
+export const NumberWidget = vi.fn(() => <div id="NumberWidget" />);
+export const ImageSizeWidget = vi.fn(() => <div id="ImageSizeWidget" />);
+export const RegistryImageWidget = vi.fn(() => (
+  <div id="RegistryImageWidget" />
+));
+export const ReferenceWidget = vi.fn(() => <div id="ReferenceWidget" />);
+export const ObjectBrowserWidget = vi.fn(() => (
+  <div id="ObjectBrowserWidget" />
+));
+export const ObjectWidget = vi.fn(() => <div id="ObjectWidget" />);
+export const ObjectListWidget = vi.fn(() => <div id="ObjectListWidget" />);
+export const VocabularyTermsWidget = vi.fn(() => (
+  <div id="VocabularyTermsWidget" />
+));
+export const SelectMetadataWidget = vi.fn(() => (
+  <div id="SelectMetadataWidget" />
+));
+export const SelectAutoComplete = vi.fn(() => <div id="SelectAutoComplete" />);
+export const ColorPickerWidget = vi.fn(() => <div id="ColorPickerWidget" />);
+export const DatetimeWidget = vi.fn(() => <div id="DatetimeWidget" />);
+export const RecurrenceWidget = vi.fn(() => <div id="RecurrenceWidget" />);
+export const FormFieldWrapper = vi.fn(() => <div id="FormFieldWrapper" />);

package/src/components/manage/Workflow/Workflow.test.jsx

@@ -7,8 +7,17 @@ import Workflow from './Workflow';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Widgets');
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/components/manage/Widgets', async () => {
+  return await import(
+    '@plone/volto/components/manage/Widgets/__mocks__/index.vitest.tsx'
+  );
+});
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/theme/Comments/CommentEditModal.test.jsx

@@ -7,7 +7,11 @@ import CommentEditModal from './CommentEditModal';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
 
 describe('CommentEditModal', () => {
   it('renders a comment edit modal component', () => {

package/src/components/theme/Comments/Comments.test.jsx

@@ -19,8 +19,16 @@ vi.mock('moment', () => ({
   })),
 }));
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
-vi.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
 
 beforeAll(async () => {
   const { __setLoadables } = await import(

package/src/components/theme/ContactForm/ContactForm.test.jsx

@@ -9,7 +9,11 @@ vi.mock('../../manage/Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Portal" />),
 }));
 
-vi.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
 
 const mockStore = configureStore();
 describe('Contact form', () => {

package/src/components/theme/PasswordReset/RequestPasswordReset.test.jsx

@@ -6,7 +6,11 @@ import { MemoryRouter } from 'react-router-dom';
 
 import RequestPasswordReset from './RequestPasswordReset';
 
-vi.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
 
 const mockStore = configureStore();
 

package/src/components/theme/Register/Register.test.jsx

@@ -6,7 +6,11 @@ import { MemoryRouter } from 'react-router-dom';
 
 import Register from './Register';
 
-vi.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
 
 const mockStore = configureStore();
 

package/src/components/theme/View/EventDatesInfo.test.jsx

@@ -5,7 +5,12 @@ import { When } from './EventDatesInfo';
 import configureStore from 'redux-mock-store';
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/theme/View/EventView.test.jsx

@@ -14,7 +14,12 @@ const store = mockStore({
   },
 });
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'