@plone/volto 18.14.0 → 18.14.1

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'

package/src/helpers/Loadable/__mocks__/Loadable.jsx

@@ -1,4 +1,19 @@
-import React from 'react';
+/* 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/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
+with the following:
+
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
+
+Finally, remove this comment.
+*/
+
 import config from '@plone/volto/registry';
 const loadables = config.settings.loadables;
 
@@ -18,21 +33,21 @@ export const __setLoadables = async () => {
 };
 
 // TODO: filter mockAllLoadables
-export const injectLazyLibs = vi.fn().mockImplementation(function ([
+export const injectLazyLibs = jest.fn().mockImplementation(function ([
   libraries,
 ]) {
-  return vi.fn((WrappedComponent) =>
-    vi.fn((props) => {
+  return jest.fn((WrappedComponent) =>
+    jest.fn((props) => {
       return <WrappedComponent {...props} {...mockAllLoadables} />;
     }),
   );
 });
 
-export const preloadLazyLibs = vi.fn().mockImplementation(function ([
+export const preloadLazyLibs = jest.fn().mockImplementation(function ([
   libraries,
 ]) {
-  return vi.fn((WrappedComponent) =>
-    vi.fn((props) => {
+  return jest.fn((WrappedComponent) =>
+    jest.fn((props) => {
       return <WrappedComponent {...props} />;
     }),
   );

package/src/helpers/Loadable/__mocks__/Loadable.vitest.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import config from '@plone/volto/registry';
+const loadables = config.settings.loadables;
+
+let mockAllLoadables = Object.create(null);
+
+export const __setLoadables = async () => {
+  if (Object.keys(mockAllLoadables).length > 0) return;
+  const resolved = await Promise.all(
+    Object.keys(loadables).map(async (n) => {
+      const lib = await Promise.resolve(loadables[n].load());
+      return [n, { current: lib }];
+    }),
+  );
+  resolved.forEach(([name, { current }]) => {
+    mockAllLoadables[name] = current;
+  });
+};
+
+// TODO: filter mockAllLoadables
+export const injectLazyLibs = vi.fn().mockImplementation(function ([
+  libraries,
+]) {
+  return vi.fn((WrappedComponent) =>
+    vi.fn((props) => {
+      return <WrappedComponent {...props} {...mockAllLoadables} />;
+    }),
+  );
+});
+
+export const preloadLazyLibs = vi.fn().mockImplementation(function ([
+  libraries,
+]) {
+  return vi.fn((WrappedComponent) =>
+    vi.fn((props) => {
+      return <WrappedComponent {...props} />;
+    }),
+  );
+});

package/tsconfig.declarations.json

@@ -10,7 +10,7 @@
     "jsx": "react-jsx",
     "preserveSymlinks": true,
     "downlevelIteration": true,
-    "types": ["vitest/globals"],
+    "types": ["vitest/globals", "jest"],
     "paths": {
       "@plone/volto/*": ["./src/*"],
       "react": ["./node_modules/@types/react"],

package/tsconfig.json

@@ -7,7 +7,8 @@
       "ESNext"
     ],
     "types": [
-      "vitest/globals"
+      "vitest/globals",
+      "jest"
     ],
     "module": "commonjs",
     "allowJs": true,

package/types/components/manage/Contents/__mocks__/index.d.ts

@@ -1,2 +1,2 @@
-export declare const Contents: any;
-export declare const ContentsRenameModal: any;
+export declare const Contents: jest.Mock<import("react/jsx-runtime").JSX.Element, [], any>;
+export declare const ContentsRenameModal: jest.Mock<import("react/jsx-runtime").JSX.Element, [], any>;

package/types/components/manage/Contents/__mocks__/index.vitest.d.ts

@@ -0,0 +1,2 @@
+export declare const Contents: any;
+export declare const ContentsRenameModal: any;