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

package/.eslintignore

@@ -1 +1,2 @@
 /types/
+!types/react-router-hash-link.d.ts

package/.eslintrc

@@ -91,5 +91,7 @@
     "jest": true,
     "socket": true,
     "webpackIsomorphicTools": true,
+    "vitest":true,
+    "vi":true
   },
 }

package/CHANGELOG.md

@@ -17,6 +17,50 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 19.0.0-alpha.1 (2025-05-16)
+
+### Feature
+
+- Volto core has migrated from Jest to Vitest as its unit test runner. @Abhishek-17h [#6326](https://github.com/plone/volto/issues/6326)
+- Refactor the UniversalLink component using typescript.
+  Use union types for deciding between href or item.
+  Modify tsconfig, include types located in `types` folder, otherwise d.ts files will noch be recognized in .tsx files, e.g. inside components. I need this for the `react-router-hash-link` package, that we use in the UniversalLink component. The specific file is `/types/react-router-hash-link.d.ts`.
+  Modify lint-staged.config.js to exclude d.ts files.
+  Use newest version of classnames (with types).
+  Create tests and negative tests for optimization with React.memo (add render counter for testing this behavior)
+
+  @tomschall [#6826](https://github.com/plone/volto/issues/6826)
+- `ConditionalLink` in TypeScript. @sneridagh [#6959](https://github.com/plone/volto/issues/6959)
+- Allow `object_list` widget to receive a `schemaName` prop, mapped to an utility. @sneridagh [#7007](https://github.com/plone/volto/issues/7007)
+- Added current evaluated `querystring` as a parameter in expander's `querystring` key when it's a function. @sneridagh [#7012](https://github.com/plone/volto/issues/7012)
+- Move `MaybeWrap` to TypeScript. @sneridagh [#7029](https://github.com/plone/volto/issues/7029)
+- Rename `vitest.config.ts` to `vitest.config.mjs` for allowing it to be loaded from add-ons. @sneridagh [#7035](https://github.com/plone/volto/issues/7035)
+- Added `contained` class if `isContainer` prop is passed (from containers). @sneridagh [#7043](https://github.com/plone/volto/issues/7043)
+- The `Add` component can now optionally receive `initialFormData` from the `CreateTranslation` component. This makes it possible for a custom `CreateTranslation` implementation to fully control the initial translation. @Tishasoumya-02 [#7073](https://github.com/plone/volto/issues/7073)
+
+### Bugfix
+
+- Fixed broken tests in add-ons in Volto 18.12.0. @Abhishek-17h [#6989](https://github.com/plone/volto/issues/6989)
+- Add support for both Vitest and Jest in `__mocks__` folders of Volto core. Add-on tests using Jest relies on them. @Abhishek-17h [#7000](https://github.com/plone/volto/issues/7000)
+- Added missing dependency for `sgvo`. Fixed `svgo` library loading in `./vite-plugins/svg.js`. @sneridagh [#7035](https://github.com/plone/volto/issues/7035)
+- Rename `./vite-plugins/svg.js` to proper extension `vite-plugins/svg.mjs`. @sneridagh [#7035](https://github.com/plone/volto/issues/7035)
+- Fixed stuck states in the Image Upload Widget by resetting uploading after failed size validation and dragging after image deletion or drag events, ensuring proper functionality and user feedback. [#7045](https://github.com/plone/volto/issues/7045)
+- Improve typings in ConditionalLink component, add TS tests to catch the bad typings. @sneridagh [#7057](https://github.com/plone/volto/issues/7057)
+
+### Internal
+
+- Fixed types of #6826 in build:types. @sneridagh 
+
+### Documentation
+
+- Pin plone-sphinx-theme to prepare for PLIP 4097. See https://github.com/plone/Products.CMFPlone/issues/4097. @stevepiercy [#7015](https://github.com/plone/volto/issues/7015)
+- Corrected Redux-related docs.
+  Better word wrapping in Redux-related docs.
+  Added link to Redux development add-on for Firefox.
+  @silviubogan [#7023](https://github.com/plone/volto/issues/7023)
+- Updated documentation code example from Jest to Vitest in the "Bundle size optimization" chapter. @Abhishek-17h [#7024](https://github.com/plone/volto/issues/7024)
+- Add version added admonition to Upgrade Guide for migrating grid blocks, and link from Upgrade Guide to Grid Block documentation. @ionlizarazu [#7027](https://github.com/plone/volto/issues/7027)
+
 ## 19.0.0-alpha.0 (2025-04-12)
 
 ### Breaking
@@ -67,7 +111,7 @@ myst:
 - Add Russian translation in Volto. @toropok [#6874](https://github.com/plone/volto/issues/6874)
 - Enhance the `ImageInput` component to only accept image files. [@jnptk] [#6926](https://github.com/plone/volto/issues/6926)
 - Fix translations default of ContentsDeleteModal: 'linkintegrity: delete' -> 'delete' if no link to break. @ksuess [#6964](https://github.com/plone/volto/issues/6964)
-- Use Plone 6.1.1 final. @sneridagh 
+- Use Plone 6.1.1 final. @sneridagh
 
 ### Bugfix
 
@@ -1946,7 +1990,7 @@ myst:
 - (FIX): put padding so the text is not clipped #5305 @dobri1408 [#5305](https://github.com/plone/volto/issues/5305)
 - Fix compare translations view @sneridagh [#5327](https://github.com/plone/volto/issues/5327)
 - Fix DatetimeWidget on FF, the button default if no type is set is sending the form. @sneridagh
-  See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formmethod [#5343](https://github.com/plone/volto/issues/5343)
+  See https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#formmethod [#5343](https://github.com/plone/volto/issues/5343)
 
 ### Internal
 

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "19.0.0-alpha.0",
+  "version": "19.0.0-alpha.1",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -150,7 +150,7 @@
     "@loadable/component": "5.14.1",
     "@loadable/server": "5.14.0",
     "@redux-devtools/extension": "^3.3.0",
-    "classnames": "2.2.6",
+    "classnames": "2.5.1",
     "connected-react-router": "6.8.0",
     "debug": "4.3.2",
     "decorate-component-with-props": "1.2.1",
@@ -236,9 +236,9 @@
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^8.3.2",
-    "@plone/volto-slate": "19.0.0-alpha.0",
-    "@plone/scripts": "4.0.0-alpha.0",
-    "@plone/registry": "3.0.0-alpha.2"
+    "@plone/registry": "3.0.0-alpha.3",
+    "@plone/volto-slate": "19.0.0-alpha.1",
+    "@plone/scripts": "4.0.0-alpha.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -276,6 +276,7 @@
     "@types/jest": "^29.5.8",
     "@types/loadable__component": "^5.13.9",
     "@types/lodash": "^4.14.201",
+    "@types/node": "^22.13.0",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/react-router-dom": "^5.3.3",
@@ -283,6 +284,8 @@
     "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "^7.7.0",
     "@typescript-eslint/parser": "^7.7.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/ui": "^2.1.8",
     "autoprefixer": "10.4.8",
     "axe-core": "4.4.2",
     "babel-loader": "9.1.0",
@@ -315,6 +318,7 @@
     "jest": "26.6.3",
     "jest-environment-jsdom": "^26",
     "jest-file": "1.0.0",
+    "jiti": "^2.4.2",
     "jsdom": "^16.7.0",
     "jsonwebtoken": "9.0.0",
     "less": "3.11.1",
@@ -345,6 +349,7 @@
     "stylelint-config-idiomatic-order": "10.0.0",
     "stylelint-prettier": "5.0.0",
     "svg-loader": "0.0.2",
+    "svgo": "^3.0.0",
     "svgo-loader": "3.0.3",
     "terser-webpack-plugin": "5.3.6",
     "tmp": "0.2.1",
@@ -352,13 +357,14 @@
     "ts-loader": "9.4.4",
     "typescript": "^5.7.3",
     "use-trace-update": "1.3.2",
+    "vitest": "^3.0.4",
     "wait-on": "6.0.0",
     "webpack": "5.90.1",
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-dev-server": "4.11.1",
     "webpack-node-externals": "3.0.0",
     "why": "0.6.2",
-    "@plone/types": "2.0.0-alpha.1",
+    "@plone/types": "2.0.0-alpha.3",
     "@plone/volto-coresandbox": "1.0.0"
   },
   "volta": {
@@ -370,10 +376,11 @@
     "start:coresandbox": "make build-deps && ADDONS=coresandbox razzle start",
     "build": "make build-deps && razzle build --noninteractive",
     "build:types": "tsc --project tsconfig.declarations.json",
+    "vitest": "vitest",
+    "coverage": "vitest run --coverage",
     "test": "razzle test --maxWorkers=50%",
     "test:ci": "CI=true NODE_ICU_DATA=node_modules/full-icu razzle test",
     "test:husky": "CI=true yarn test --bail --findRelatedTests",
-    "test:debug": "node --inspect node_modules/.bin/jest --runInBand",
     "start:prod": "NODE_ENV=production node build/server.js",
     "prettier": "prettier --single-quote --check '{src,cypress}/**/*.{js,jsx,ts,tsx}' --check '*.js'",
     "prettier:fix": "prettier --single-quote --write '{src,cypress}/**/*.{js,jsx,ts,tsx}' --write '*.js'",

package/src/actions/actions/actions.test.js

@@ -7,9 +7,9 @@ describe('Actions action', () => {
       const url = 'http://localhost';
       const action = listActions(url);
 
-      expect(action.type).toEqual(LIST_ACTIONS);
-      expect(action.request.op).toEqual('get');
-      expect(action.request.path).toEqual(`${url}/@actions`);
+      expect(action.type).toBe(LIST_ACTIONS);
+      expect(action.request.op).toBe('get');
+      expect(action.request.path).toBe(`${url}/@actions`);
     });
   });
 });

package/src/actions/addons/addons.test.js

@@ -16,35 +16,38 @@ describe('Addons action', () => {
     it('should create an action to install an addon', () => {
       const id = 'plone.app.example';
       const action = installAddon(id);
-      expect(action.type).toEqual(INSTALL_ADDON);
-      expect(action.request.op).toEqual('post');
-      expect(action.request.path).toEqual(`/@addons/${id}/install`);
+      expect(action.type).toBe(INSTALL_ADDON);
+      expect(action.request.op).toBe('post');
+      expect(action.request.path).toBe(`/@addons/${id}/install`);
     });
   });
+
   describe('uninstallAddon', () => {
     it('should create an action to uninstall an addon', () => {
       const id = 'plone.app.example';
       const action = uninstallAddon(id);
-      expect(action.type).toEqual(UNINSTALL_ADDON);
-      expect(action.request.op).toEqual('post');
-      expect(action.request.path).toEqual(`/@addons/${id}/uninstall`);
+      expect(action.type).toBe(UNINSTALL_ADDON);
+      expect(action.request.op).toBe('post');
+      expect(action.request.path).toBe(`/@addons/${id}/uninstall`);
     });
   });
+
   describe('upgradeAddon', () => {
     it('should create an action to upgrade an addon', () => {
       const id = 'plone.app.example';
       const action = upgradeAddon(id);
-      expect(action.type).toEqual(UPGRADE_ADDON);
-      expect(action.request.op).toEqual('post');
-      expect(action.request.path).toEqual(`/@addons/${id}/upgrade`);
+      expect(action.type).toBe(UPGRADE_ADDON);
+      expect(action.request.op).toBe('post');
+      expect(action.request.path).toBe(`/@addons/${id}/upgrade`);
     });
   });
+
   describe('listAddons', () => {
     it('should create an action to list all addons', () => {
       const action = listAddons();
-      expect(action.type).toEqual(LIST_ADDONS);
-      expect(action.request.op).toEqual('get');
-      expect(action.request.path).toEqual(`/@addons`);
+      expect(action.type).toBe(LIST_ADDONS);
+      expect(action.request.op).toBe('get');
+      expect(action.request.path).toBe(`/@addons`);
     });
   });
 });

package/src/actions/aliases/aliases.test.js

@@ -1,5 +1,4 @@
 import { getAliases, addAliases, removeAliases } from './aliases';
-
 import {
   GET_ALIASES,
   ADD_ALIASES,
@@ -18,6 +17,7 @@ describe('Aliases action', () => {
       );
     });
   });
+
   describe('addAliases', () => {
     it('should create an action to add aliases', () => {
       const url = '/news';

package/src/actions/querystring/querystring.test.js

@@ -5,7 +5,7 @@ describe('Querystring action', () => {
   describe('getQuerystring', () => {
     it('should create an action to get the querystring config', () => {
       const getState = () => ({});
-      const dispatch = jest.fn();
+      const dispatch = vi.fn();
       getQuerystring()(dispatch, getState);
       expect(dispatch).toHaveBeenCalledWith({
         type: GET_QUERYSTRING,
@@ -21,7 +21,7 @@ describe('Querystring action', () => {
           data: { '@id': 'http://localhost:3000/some/content' },
         },
       });
-      const dispatch = jest.fn();
+      const dispatch = vi.fn();
       getQuerystring()(dispatch, getState);
       expect(dispatch).toHaveBeenCalledWith({
         type: GET_QUERYSTRING,

package/src/actions/types/types.test.js

@@ -10,7 +10,7 @@ describe('Types action', () => {
         },
       });
       const url = '/blog';
-      const dispatch = jest.fn();
+      const dispatch = vi.fn();
 
       getTypes(url)(dispatch, getState);
 

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

@@ -8,7 +8,11 @@ import Actions from './Actions';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/components/manage/Contents');
+vi.mock('@plone/volto/components/manage/Contents', async () => {
+  return await import(
+    '@plone/volto/components/manage/Contents/__mocks__/index.vitest.tsx'
+  );
+});
 
 describe('Actions', () => {
   it('renders an actions component', () => {

package/src/components/manage/Add/Add.jsx

@@ -359,27 +359,29 @@ class Add extends Component {
             }
             schema={this.props.schema}
             type={this.props.type}
-            formData={{
-              ...(blocksFieldname && {
-                [blocksFieldname]:
-                  initialBlocks ||
-                  this.props.schema.properties[blocksFieldname]?.default,
-              }),
-              ...(blocksLayoutFieldname && {
-                [blocksLayoutFieldname]: {
-                  items:
-                    initialBlocksLayout ||
-                    this.props.schema.properties[blocksLayoutFieldname]?.default
-                      ?.items,
+            formData={
+              this.props.location?.state?.initialFormData || {
+                ...(blocksFieldname && {
+                  [blocksFieldname]:
+                    initialBlocks ||
+                    this.props.schema.properties[blocksFieldname]?.default,
+                }),
+                ...(blocksLayoutFieldname && {
+                  [blocksLayoutFieldname]: {
+                    items:
+                      initialBlocksLayout ||
+                      this.props.schema.properties[blocksLayoutFieldname]
+                        ?.default?.items,
+                  },
+                }),
+                // Copy the Language Independent Fields values from the to-be translated content
+                // into the default values of the translated content Add form.
+                ...lifData(),
+                parent: {
+                  '@id': this.props.content?.['@id'] || '',
                 },
-              }),
-              // Copy the Language Independent Fields values from the to-be translated content
-              // into the default values of the translated content Add form.
-              ...lifData(),
-              parent: {
-                '@id': this.props.content?.['@id'] || '',
-              },
-            }}
+              }
+            }
             requestError={this.state.error}
             onSubmit={this.onSubmit}
             hideActions

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

@@ -3,7 +3,6 @@ import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import config from '@plone/volto/registry';
-
 import Add from './Add';
 
 const mockStore = configureStore();
@@ -16,9 +15,13 @@ beforeAll(() => {
   config.settings.loadables = {};
 });
 
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
-jest.mock('../Form/Form', () => jest.fn(() => <div className="Form" />));
+vi.mock('../Form/Form', () => ({
+  default: vi.fn(() => <div className="Form" />),
+}));
 
 describe('Add', () => {
   it('renders an empty add component', () => {

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

@@ -9,9 +9,13 @@ import Aliases from './Aliases';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
-jest.mock('../Toolbar/More', () => jest.fn(() => <div className="More" />));
+vi.mock('../Toolbar/More', () => ({
+  default: vi.fn(() => <div className="More" />),
+}));
 
 describe('Aliases', () => {
   it('renders aliases object control', () => {
@@ -27,11 +31,7 @@ describe('Aliases', () => {
           loading: false,
           error: null,
         },
-        get: {
-          loading: false,
-          loaded: true,
-          error: null,
-        },
+        get: { __esModule: true, loading: false, loaded: true, error: null },
         items: [],
       },
       content: {

package/src/components/manage/Blocks/Block/BlocksForm.jsx

@@ -359,6 +359,7 @@ const BlocksForm = (props) => {
                 editable,
                 showBlockChooser: selectedBlock === childId,
                 detached: isContainer,
+                isContainer,
                 // Properties to pass to the BlocksForm to match the View ones
                 content: properties,
                 history,

package/src/components/manage/Blocks/Block/BlocksForm.test.jsx

@@ -3,25 +3,50 @@ import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 import BlocksForm from './BlocksForm';
 import { render } from '@testing-library/react';
-
 import config from '@plone/volto/registry';
 
 config.experimental = { addBlockButton: { enabled: false } };
 
-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'
+  );
+});
 
-let mockSerial = 0;
+beforeAll(async () => {
+  const { __setLoadables } = await import(
+    '@plone/volto/helpers/Loadable/Loadable'
+  );
+  await __setLoadables();
+});
 
-jest.mock('uuid', () => {
+let mockSerial = 0;
+vi.mock('uuid', () => {
   return {
-    v4: jest.fn().mockImplementation(() => `id-${mockSerial++}`),
+    v4: vi.fn().mockImplementation(() => `id-${mockSerial++}`),
   };
 });
 
+vi.mock('react-beautiful-dnd', () => ({
+  DragDropContext: ({ children }) => <div>{children}</div>,
+  Droppable: ({ children }) =>
+    children({
+      innerRef: () => {},
+      droppableProps: {},
+      placeholder: <div />,
+    }),
+  Draggable: ({ children }) =>
+    children({
+      innerRef: () => {},
+      draggableProps: {},
+      dragHandleProps: {},
+    }),
+}));
+
+vi.mock('./Order/Order', () => ({
+  default: () => <div>Order Component</div>,
+}));
+
 const mockStore = configureStore();
 
 test('Allow override of blocksConfig', () => {
@@ -70,10 +95,13 @@ test('Allow override of blocksConfig', () => {
 
   const { container } = render(
     <Provider store={store}>
-      <BlocksForm {...data} />
-      <div id="sidebar-order"></div>
+      <div>
+        <BlocksForm {...data} />
+        <div id="sidebar-order"></div>
+      </div>
     </Provider>,
   );
+
   expect(container).toMatchSnapshot();
 });
 
@@ -88,7 +116,7 @@ test('Removes invalid blocks on saving', () => {
     },
   });
 
-  const onChangeFormData = jest.fn(() => {});
+  const onChangeFormData = vi.fn(() => {});
 
   const data = {
     pathname: '/test',
@@ -126,18 +154,22 @@ test('Removes invalid blocks on saving', () => {
 
   render(
     <Provider store={store}>
-      <BlocksForm {...data} />
-      <div id="sidebar-order"></div>
+      <div>
+        <BlocksForm {...data} />
+        <div id="sidebar-order"></div>
+      </div>
     </Provider>,
   );
-  expect(onChangeFormData).toBeCalledWith({
+
+  expect(onChangeFormData).toHaveBeenCalledWith({
     blocks: {
       a: { '@type': 'custom', text: 'a' },
       b: { '@type': 'custom', text: 'b' },
     },
     blocks_layout: { items: ['a', 'b', 'MISSING-YOU-1'] },
   });
-  expect(onChangeFormData).toBeCalledWith({
+
+  expect(onChangeFormData).toHaveBeenCalledWith({
     blocks: {
       a: { '@type': 'custom', text: 'a' },
       b: { '@type': 'custom', text: 'b' },

package/src/components/manage/Blocks/Block/Edit.jsx

@@ -122,7 +122,7 @@ export class Edit extends Component {
    */
   render() {
     const { blocksConfig = config.blocks.blocksConfig } = this.props;
-    const { editable, type } = this.props;
+    const { editable, type, isContainer: parentIsContainer } = this.props;
 
     const disableNewBlocks = this.props.data?.disableNewBlocks;
 
@@ -198,6 +198,7 @@ export class Edit extends Component {
               {...this.props}
               blockNode={this.blockNode}
               data={this.props.data}
+              className={cx({ contained: parentIsContainer })}
             />
             {this.props.manage && (
               <SidebarPortal

package/src/components/manage/Blocks/Block/Settings.test.jsx

@@ -5,7 +5,11 @@ import configureStore from 'redux-mock-store';
 import config from '@plone/volto/registry';
 import { Provider } from 'react-intl-redux';
 
-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/manage/Blocks/Block/StyleWrapper.jsx

@@ -9,7 +9,13 @@ import {
 const StyleWrapper = (props) => {
   let classNames,
     style = [];
-  const { block, children, content, data = {}, isContainer } = props;
+  const {
+    block,
+    children,
+    content,
+    data = {},
+    isContainer: parentIsContainer,
+  } = props;
   classNames = buildStyleClassNamesFromData(data.styles);
 
   classNames = buildStyleClassNamesExtenders({
@@ -24,14 +30,16 @@ const StyleWrapper = (props) => {
     '',
     // If we are rendering blocks inside a container, then pass also the data from the container
     // This is needed in order to calculate properly the styles for the blocks inside the container
-    isContainer && content.blocks ? content : {},
+    parentIsContainer && content.blocks ? content : {},
   );
 
   const rewrittenChildren = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {
       const childProps = {
         ...props,
-        className: cx([child.props.className, ...classNames]),
+        className: cx([child.props.className, ...classNames], {
+          contained: parentIsContainer,
+        }),
         style: { ...child.props.style, ...style },
       };
       return React.cloneElement(child, childProps);

package/src/components/manage/Blocks/Description/View.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import View from './View';
 
-test('renders a view description component', () => {
+it('renders a view description component', () => {
   const component = renderer.create(
     <View properties={{ description: 'My Description' }} />,
   );

package/src/components/manage/Blocks/HTML/Edit.test.jsx

@@ -7,11 +7,18 @@ import Edit from './Edit';
 
 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();
+});
 
 test('renders an edit html block component', async () => {
   const store = mockStore({

package/src/components/manage/Blocks/HTML/View.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import View from './View';
 
-test('renders a view html component', () => {
+it('renders a view html component', () => {
   const component = renderer.create(<View data={{ html: '<h1></h1>' }} />);
   const json = component.toJSON();
   expect(json).toMatchSnapshot();

package/src/components/manage/Blocks/Image/ImageSidebar.test.jsx

@@ -5,11 +5,15 @@ import { Provider } from 'react-intl-redux';
 
 import ImageSidebar from './ImageSidebar';
 
-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();
 
-test('renders an Image Block Sidebar component', () => {
+it('renders an Image Block Sidebar component', () => {
   const store = mockStore({
     content: {
       create: {},