@plone/volto 19.0.0-alpha.0 → 19.0.0-alpha.2

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

@@ -3,17 +3,27 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { render } from '@testing-library/react';
 import config from '@plone/volto/registry';
-
 import Workflow from './Workflow';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/components/manage/Widgets');
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
+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'
+  );
+  await __setLoadables();
+});
 
 beforeEach(() => {
   config.settings.workflowMapping = {

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

@@ -16,24 +16,28 @@ beforeAll(() => {
 
 const mockStore = configureStore();
 
-jest.mock('../../manage/Toolbar/Toolbar', () =>
-  jest.fn(() => <div id="toolbar" />),
-);
-jest.mock('../Header/Header', () => jest.fn(() => <div id="toolbar" />));
-jest.mock('../Breadcrumbs/Breadcrumbs', () =>
-  jest.fn(() => <div id="breadcrumbs" />),
-);
-jest.mock('../../manage/Messages/Messages', () =>
-  jest.fn(() => <div id="messages" />),
-);
-jest.mock('../Navigation/Navigation', () =>
-  jest.fn(() => <div id="navigation" />),
-);
-jest.mock('semantic-ui-react', () => ({
-  Segment: jest.fn(() => <div id="segment" />),
-  Container: jest.fn(() => <div id="container" />),
+vi.mock('../../manage/Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="toolbar" />),
+}));
+vi.mock('../Header/Header', () => ({
+  default: vi.fn(() => <div id="header" />),
+}));
+vi.mock('../Breadcrumbs/Breadcrumbs', () => ({
+  default: vi.fn(() => <div id="breadcrumbs" />),
+}));
+vi.mock('../../manage/Messages/Messages', () => ({
+  default: vi.fn(() => <div id="messages" />),
+}));
+vi.mock('../Navigation/Navigation', () => ({
+  default: vi.fn(() => <div id="navigation" />),
+}));
+vi.mock('semantic-ui-react', () => ({
+  Segment: vi.fn(() => <div id="segment" />),
+  Container: vi.fn(() => <div id="container" />),
+}));
+vi.mock('../Footer/Footer', () => ({
+  default: vi.fn(() => <div id="footer" />),
 }));
-jest.mock('../Footer/Footer', () => jest.fn(() => <div id="footer" />));
 
 describe('App', () => {
   it('renders a app component', () => {

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

@@ -9,7 +9,7 @@ beforeAll(() => {
       match: {
         path: '',
       },
-      component: jest.fn((props) => (
+      component: vi.fn((props) => (
         <div className="everywhere">{props.pathname}</div>
       )),
     },
@@ -17,7 +17,7 @@ beforeAll(() => {
       match: {
         path: '/all-blogs/*',
       },
-      component: jest.fn((props) => (
+      component: vi.fn((props) => (
         <div className="blog-listing" one={props.one} three={props.three} />
       )),
       props: {
@@ -29,27 +29,27 @@ beforeAll(() => {
       match: {
         path: '/blog/edit',
       },
-      component: jest.fn((props) => <div className="blog-edit" />),
+      component: vi.fn((props) => <div className="blog-edit" />),
     },
     {
       match: {
         path: '/blog',
         exact: true,
       },
-      component: jest.fn((props) => (
+      component: vi.fn((props) => (
         <div className="blog-view">{JSON.stringify(props.match)}</div>
       )),
     },
     {
       match: '/something',
-      component: jest.fn((props) => (
+      component: vi.fn((props) => (
         <div className="something">{JSON.stringify(props.match)}</div>
       )),
     },
     {
       match: '/frontpage',
       ignore: '/frontpage/images',
-      component: jest.fn((props) => (
+      component: vi.fn((props) => (
         <div className="frontpage-content">{JSON.stringify(props.match)}</div>
       )),
     },

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

@@ -7,7 +7,11 @@ import CommentEditModal from './CommentEditModal';
 
 const mockStore = configureStore();
 
-jest.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

@@ -2,25 +2,40 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
-
 import Comments from './Comments';
 
+vi.mock('@plone/volto/components/theme/Comments/CommentEditModal', () => ({
+  default: vi.fn(({ id, text, ...props }) => (
+    <div data-testid="comment-edit-modal">Mocked CommentEditModal</div>
+  )),
+}));
+
 const mockStore = configureStore();
 
-jest.mock('moment', () =>
-  jest.fn(() => ({
-    format: jest.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
-    fromNow: jest.fn(() => 'a few seconds ago'),
+vi.mock('moment', () => ({
+  default: vi.fn(() => ({
+    format: vi.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
+    fromNow: vi.fn(() => 'a few seconds ago'),
   })),
-);
+}));
 
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-jest.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 () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
+beforeAll(async () => {
+  const { __setLoadables } = await import(
+    '@plone/volto/helpers/Loadable/Loadable'
+  );
+  await __setLoadables();
+});
 
 describe('Comments', () => {
   it('renders a comments component', () => {
@@ -67,11 +82,13 @@ describe('Comments', () => {
         },
       },
     });
+
     const component = renderer.create(
       <Provider store={store}>
         <Comments pathname="/blog" />
       </Provider>,
     );
+
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });

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

@@ -5,11 +5,15 @@ import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 import ContactForm from './ContactForm';
 
-jest.mock('../../manage/Toolbar/Toolbar', () =>
-  jest.fn(() => <div id="Portal" />),
-);
+vi.mock('../../manage/Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
-jest.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/Header/Header.test.jsx

@@ -7,19 +7,25 @@ import Header from './Header';
 
 const mockStore = configureStore();
 
-jest.mock('../Logo/Logo', () => jest.fn(() => <div id="logo" />));
-jest.mock('../SearchWidget/SearchWidget', () =>
-  jest.fn(() => <div id="searchwidget" />),
-);
-jest.mock('../Anontools/Anontools', () =>
-  jest.fn(() => <div id="anontools" />),
-);
-jest.mock('../Navigation/Navigation', () =>
-  jest.fn(() => <div id="navigation" />),
-);
-jest.mock('../LanguageSelector/LanguageSelector', () =>
-  jest.fn(() => <div id="language-selector" />),
-);
+vi.mock('../Logo/Logo', () => ({
+  default: vi.fn(() => <div id="logo" />),
+}));
+
+vi.mock('../SearchWidget/SearchWidget', () => ({
+  default: vi.fn(() => <div id="searchwidget" />),
+}));
+
+vi.mock('../Anontools/Anontools', () => ({
+  default: vi.fn(() => <div id="anontools" />),
+}));
+
+vi.mock('../Navigation/Navigation', () => ({
+  default: vi.fn(() => <div id="navigation" />),
+}));
+
+vi.mock('../LanguageSelector/LanguageSelector', () => ({
+  default: vi.fn(() => <div id="language-selector" />),
+}));
 
 describe('Header', () => {
   it('renders a header component', () => {

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

@@ -9,7 +9,7 @@ import Logout from './Logout';
 
 const mockStore = configureStore();
 
-jest.mock('../Login/Login', () => jest.fn(() => <div />));
+vi.mock('../Login/Login', () => ({ default: vi.fn(() => <div />) }));
 
 describe('Logout', () => {
   it('renders a logout component', () => {

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

@@ -7,7 +7,16 @@ import { MemoryRouter } from 'react-router-dom';
 import PasswordReset from './PasswordReset';
 
 const mockStore = configureStore();
-
+vi.mock('./PasswordReset', () => {
+  const ActualPasswordReset = vi.importActual('./PasswordReset');
+  return {
+    ...ActualPasswordReset,
+    default: vi.fn((props) => {
+      const token = props.match?.params?.token || 'default-token';
+      return <div data-testid="password-reset">Password Reset for {token}</div>;
+    }),
+  };
+});
 describe('PasswordReset', () => {
   it('renders a PasswordReset component', () => {
     const store = mockStore({

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

@@ -6,7 +6,11 @@ import { MemoryRouter } from 'react-router-dom';
 
 import RequestPasswordReset from './RequestPasswordReset';
 
-jest.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';
 
-jest.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/Search/Search.test.jsx

@@ -8,11 +8,13 @@ import { __test__ as Search } from './Search';
 
 const mockStore = configureStore();
 
-jest.mock('../../manage/Toolbar/Toolbar', () =>
-  jest.fn(() => <div id="Portal" />),
-);
+vi.mock('../../manage/Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
-jest.mock('./SearchTags', () => jest.fn(() => <div id="search-tags" />));
+vi.mock('./SearchTags', () => ({
+  default: vi.fn(() => <div id="search-tags" />),
+}));
 
 describe('Search', () => {
   it('renders an empty search component', () => {

package/src/components/theme/TsTest/TsTest.test.tsx

@@ -1,6 +1,5 @@
 import renderer from 'react-test-renderer';
 import TsTest from './TsTest';
-import { expect } from '@jest/globals';
 
 describe('Ts test component', () => {
   test('Renders', () => {

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

@@ -5,11 +5,18 @@ import { When } from './EventDatesInfo';
 import configureStore from 'redux-mock-store';
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
+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'
+  );
+  await __setLoadables();
+});
 
 const store = mockStore({
   intl: {

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

@@ -14,11 +14,18 @@ const store = mockStore({
   },
 });
 
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
+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'
+  );
+  await __setLoadables();
+});
 
 const { settings } = config;
 

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

@@ -29,12 +29,14 @@ describe('ListingView', () => {
                   description: 'My item description',
                   url: '/item',
                   '@type': 'Document',
+                  '@id': 'item1',
                 },
                 {
                   title: 'Second item',
                   description: 'My second item description',
                   url: '/item2',
                   '@type': 'Document',
+                  '@id': 'item2',
                 },
               ],
             }}

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

@@ -7,6 +7,16 @@ import { MemoryRouter } from 'react-router-dom';
 import SummaryView from './SummaryView';
 
 const mockStore = configureStore();
+vi.mock('@plone/volto/components/manage/UniversalLink/UniversalLink', () => ({
+  default: vi.fn(({ item, ...props }) => {
+    // Ensure @id is always present
+    const safeItem = {
+      ...item,
+      '@id': item['@id'] || item.url || '/default-link',
+    };
+    return <div data-testid="universal-link">{safeItem.title}</div>;
+  }),
+}));
 
 describe('TabularView', () => {
   it('renders a summary view component', () => {

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

@@ -28,6 +28,7 @@ describe('TabularView', () => {
                   title: 'My item',
                   description: 'My item description',
                   url: '/item',
+                  '@id': '/item',
                 },
               ],
             }}

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

@@ -26,18 +26,25 @@ global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle
 
 const mockStore = configureStore();
 
-jest.mock('../../manage/Toolbar/Toolbar', () =>
-  jest.fn(() => <div id="Portal" />),
-);
+vi.mock('../../manage/Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
-jest.mock('../Comments/Comments', () => jest.fn(() => <div id="Comments" />));
-jest.mock('../Tags/Tags', () => jest.fn(() => <div id="Tags" />));
-jest.mock('../SlotRenderer/SlotRenderer', () =>
-  jest.fn(() => <div id="SlotRenderer" />),
-);
-jest.mock('../ContentMetadataTags/ContentMetadataTags', () =>
-  jest.fn(() => <div id="ContentMetadataTags" />),
-);
+vi.mock('../Comments/Comments', () => ({
+  default: vi.fn(() => <div id="Comments" />),
+}));
+
+vi.mock('../Tags/Tags', () => ({
+  default: vi.fn(() => <div id="Tags" />),
+}));
+
+vi.mock('../SlotRenderer/SlotRenderer', () => ({
+  default: vi.fn(() => <div id="SlotRenderer" />),
+}));
+
+vi.mock('../ContentMetadataTags/ContentMetadataTags', () => ({
+  default: vi.fn(() => <div id="ContentMetadataTags" />),
+}));
 
 const actions = {
   document_actions: [],
@@ -151,8 +158,10 @@ describe('View', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <View location={{ pathname: '/test' }} />
-        <div id="toolbar"></div>
+        <>
+          <View location={{ pathname: '/test' }} />
+          <div id="toolbar"></div>
+        </>
       </Provider>,
     );
 
@@ -172,8 +181,10 @@ describe('View', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <View location={{ pathname: '/test' }} />
-        <div id="toolbar"></div>
+        <>
+          <View location={{ pathname: '/test' }} />
+          <div id="toolbar"></div>
+        </>
       </Provider>,
     );
 
@@ -193,8 +204,10 @@ describe('View', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <View location={{ pathname: '/test' }} />
-        <div id="toolbar"></div>
+        <>
+          <View location={{ pathname: '/test' }} />
+          <div id="toolbar"></div>
+        </>
       </Provider>,
     );
 
@@ -214,8 +227,10 @@ describe('View', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <View location={{ pathname: '/test' }} />
-        <div id="toolbar"></div>
+        <>
+          <View location={{ pathname: '/test' }} />
+          <div id="toolbar"></div>
+        </>
       </Provider>,
     );
 
@@ -243,16 +258,20 @@ describe('View', () => {
     });
     const { rerender } = render(
       <Provider store={store}>
-        <View location={{ pathname: '/a' }} />
-        <div id="toolbar"></div>
+        <>
+          <View location={{ pathname: '/test' }} />
+          <div id="toolbar"></div>
+        </>
       </Provider>,
     );
     expect(instanceCount).toBe(1);
     store.getState().content.data['@id'] = '/b';
     rerender(
       <Provider store={store}>
-        <View location={{ pathname: '/b' }} />
-        <div id="toolbar"></div>
+        <>
+          <View location={{ pathname: '/test' }} />
+          <div id="toolbar"></div>
+        </>
       </Provider>,
     );
     expect(instanceCount).toBe(2);

package/src/helpers/Api/Api.plone.rest.test.js

@@ -1,15 +1,17 @@
 import config from '@plone/volto/registry';
 import Api from './Api';
 
-jest.mock('superagent', () => ({
-  get: jest.fn((url) => ({
-    url,
-    query: jest.fn(),
-    set: jest.fn(),
-    type: jest.fn(),
-    send: jest.fn(),
-    end: jest.fn(),
-  })),
+vi.mock('superagent', () => ({
+  default: {
+    get: vi.fn((url) => ({
+      url,
+      query: vi.fn(),
+      set: vi.fn(),
+      type: vi.fn(),
+      send: vi.fn(),
+      end: vi.fn(),
+    })),
+  },
 }));
 
 beforeAll(() => {