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

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "19.0.0-alpha.2",
+  "version": "19.0.0-alpha.20",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -42,58 +42,6 @@
       }
     ]
   },
-  "jest": {
-    "transform": {
-      "^.+\\.js(x)?$": "babel-jest",
-      "^.+\\.ts(x)?$": "ts-jest",
-      "^.+\\.(png)$": "jest-file",
-      "^.+\\.(jpg)$": "jest-file",
-      "^.+\\.(svg)$": "./jest-svgsystem-transform.js"
-    },
-    "moduleNameMapper": {
-      "@plone/volto/package.json": "<rootDir>/package.json",
-      "@plone/volto/babel": "<rootDir>/babel.js",
-      "@plone/volto/(.*)$": "<rootDir>/src/$1",
-      "@plone/volto-slate/(.*)$": "<rootDir>/../volto-slate/src/$1",
-      "@plone/registry/addon-registry$": "<rootDir>/node_modules/@plone/registry/dist/addon-registry/addon-registry.js",
-      "@plone/registry/create-addons-loader$": "<rootDir>/node_modules/@plone/registry/dist/addon-registry/create-addons-loader.js",
-      "@plone/registry": "<rootDir>/../registry/src",
-      "@plone/registry/(.*)$": "<rootDir>/../registry/src/$1",
-      "@plone/volto": "<rootDir>/src/index.js",
-      "~/config": "<rootDir>/src/config",
-      "~/../locales/${lang}.json": "<rootDir>/locales/en.json",
-      "(.*)/locales/(.*)": "<rootDir>/locales/$2",
-      "load-volto-addons": "<rootDir>/jest-addons-loader.js",
-      "@package/(.*)$": "<rootDir>/src/$1",
-      "@root/config": "<rootDir>/jest-addons-loader.js",
-      "@root/(.*)$": "<rootDir>/src/$1",
-      "@voltoconfig": "<rootDir>/jest-addons-loader.js",
-      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
-    },
-    "coverageThreshold": {
-      "global": {
-        "branches": 10,
-        "functions": 10,
-        "lines": 10,
-        "statements": 10
-      }
-    },
-    "setupFiles": [
-      "./test-setup-globals.js",
-      "./test-setup-config.jsx"
-    ],
-    "globalSetup": "./global-test-setup.js",
-    "setupFilesAfterEnv": [
-      "<rootDir>/jest-setup-afterenv.js"
-    ],
-    "globals": {
-      "__DEV__": true
-    },
-    "testMatch": [
-      "<rootDir>/__tests__/**/?(*.)(spec|test).{js,jsx,mjs,ts,tsx}",
-      "<rootDir>/../**/?(*.)(spec|test).{js,jsx,mjs,ts,tsx}"
-    ]
-  },
   "stylelint": {
     "extends": [
       "stylelint-config-idiomatic-order"
@@ -144,21 +92,26 @@
     "not dead"
   ],
   "engines": {
-    "node": "^20 || ^22"
+    "node": "^22 || ^24"
   },
   "dependencies": {
+    "@dnd-kit/core": "6.0.8",
+    "@dnd-kit/sortable": "7.0.2",
+    "@dnd-kit/utilities": "3.2.2",
     "@loadable/component": "5.14.1",
     "@loadable/server": "5.14.0",
     "@redux-devtools/extension": "^3.3.0",
     "classnames": "2.5.1",
     "connected-react-router": "6.8.0",
-    "debug": "4.3.2",
+    "debug": "4.3.4",
     "decorate-component-with-props": "1.2.1",
     "dependency-graph": "0.10.0",
+    "deepmerge": "^4.2.2",
     "detect-browser": "5.1.0",
     "diff": "3.5.0",
     "express": "4.19.2",
     "filesize": "6",
+    "full-icu": "1.4.0",
     "github-slugger": "1.4.0",
     "history": "4.10.1",
     "hoist-non-react-statics": "3.3.2",
@@ -177,11 +130,12 @@
     "object-assign": "4.1.1",
     "prepend-http": "2",
     "pretty-bytes": "5.3.0",
+    "prettier": "3.2.5",
     "prismjs": "1.27.0",
     "process": "^0.11.10",
     "promise-file-reader": "1.0.2",
     "prop-types": "15.7.2",
-    "query-string": "7.1.0",
+    "query-string": "^9.0.0",
     "rc-time-picker": "3.7.3",
     "react": "18.2.0",
     "react-anchor-link-smooth-scroll": "1.0.12",
@@ -225,9 +179,9 @@
     "semantic-ui-less": "2.4.1",
     "semantic-ui-react": "2.1.5",
     "serialize-javascript": "3.1.0",
-    "slate": "0.100.0",
-    "slate-hyperscript": "0.100.0",
-    "slate-react": "0.98.4",
+    "slate": "0.118.1",
+    "slate-hyperscript": "0.115.0",
+    "slate-react": "0.117.4",
     "superagent": "3.8.2",
     "tlds": "1.203.1",
     "undoo": "0.5.0",
@@ -236,26 +190,19 @@
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^8.3.2",
-    "@plone/scripts": "4.0.0-alpha.1",
-    "@plone/registry": "3.0.0-alpha.3",
-    "@plone/volto-slate": "19.0.0-alpha.2"
+    "@plone/components": "4.0.0-alpha.4",
+    "@plone/scripts": "4.0.0-alpha.4",
+    "@plone/registry": "3.0.0-alpha.8",
+    "@plone/volto-slate": "19.0.0-alpha.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/eslint-parser": "7.22.15",
-    "@babel/plugin-proposal-export-default-from": "7.18.10",
-    "@babel/plugin-proposal-export-namespace-from": "7.18.9",
-    "@babel/plugin-proposal-json-strings": "7.18.6",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
-    "@babel/plugin-proposal-throw-expressions": "7.18.6",
-    "@babel/plugin-syntax-export-namespace-from": "7.8.3",
-    "@babel/runtime": "7.20.6",
+    "@babel/core": "^7.28.5",
+    "@babel/eslint-parser": "^7.28.5",
+    "@babel/plugin-proposal-export-default-from": "^7.27.1",
+    "@babel/plugin-proposal-throw-expressions": "^7.27.1",
+    "@babel/runtime": "^7.28.4",
     "@babel/types": "7.20.5",
-    "@dnd-kit/core": "6.0.8",
-    "@dnd-kit/sortable": "7.0.2",
-    "@dnd-kit/utilities": "3.2.2",
     "@fiverr/afterbuild-webpack-plugin": "^1.0.0",
-    "@jest/globals": "^29.7.0",
     "@loadable/babel-plugin": "5.13.2",
     "@loadable/webpack-plugin": "5.15.2",
     "@sinonjs/fake-timers": "^6.0.1",
@@ -268,19 +215,20 @@
     "@storybook/react": "^8.0.4",
     "@storybook/react-webpack5": "^8.0.4",
     "@storybook/theming": "^8.0.4",
-    "@testing-library/cypress": "10.0.1",
+    "@testing-library/cypress": "10.1.0",
     "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "14.2.0",
+    "@testing-library/react": "14.3.1",
     "@testing-library/react-hooks": "8.0.1",
     "@types/history": "^4.7.11",
-    "@types/jest": "^29.5.8",
     "@types/loadable__component": "^5.13.9",
     "@types/lodash": "^4.14.201",
-    "@types/node": "^22.13.0",
+    "@types/node": "^24",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-intl-redux": "^0.1.19",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-test-renderer": "18.0.7",
+    "@types/redux-mock-store": "^1.5.0",
     "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "^7.7.0",
     "@typescript-eslint/parser": "^7.7.0",
@@ -293,31 +241,27 @@
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-react-intl": "5.1.17",
     "babel-plugin-root-import": "6.1.0",
-    "babel-preset-razzle": "4.2.18",
     "bundlewatch": "0.3.3",
     "circular-dependency-plugin": "5.2.2",
     "css-loader": "5.2.7",
-    "cypress": "13.13.2",
-    "cypress-axe": "1.5.0",
+    "cypress": "15.5.0",
+    "cypress-axe": "1.7.0",
     "cypress-file-upload": "5.0.8",
     "deep-freeze": "0.0.1",
     "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^9.1.2",
     "eslint-config-react-app": "^7.0.1",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-no-only-tests": "^3.3.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "full-icu": "1.4.0",
     "html-webpack-plugin": "5.5.0",
     "identity-obj-proxy": "3.0.0",
-    "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",
@@ -333,17 +277,17 @@
     "postcss-loader": "7.0.2",
     "postcss-overrides": "3.1.4",
     "postcss-scss": "4.0.6",
-    "prettier": "3.2.5",
-    "razzle": "4.2.18",
     "razzle-dev-utils": "4.2.18",
-    "razzle-plugin-scss": "4.2.18",
     "react-docgen-typescript-plugin": "^1.0.5",
     "react-error-overlay": "6.0.9",
     "react-is": "^18.2.0",
-    "release-it": "^17.1.1",
+    "release-it": "^19.0.4",
+    "resolve-url-loader": "^3.1.2",
+    "sass": "1.58.0",
+    "sass-loader": "^10.0.3",
     "semver": "^7.5.4",
     "start-server-and-test": "1.14.0",
-    "storybook": "^8.0.4",
+    "storybook": "^8.6.15",
     "style-loader": "3.3.1",
     "stylelint": "^16.3.1",
     "stylelint-config-idiomatic-order": "10.0.0",
@@ -353,7 +297,6 @@
     "svgo-loader": "3.0.3",
     "terser-webpack-plugin": "5.3.6",
     "tmp": "0.2.1",
-    "ts-jest": "^26.4.2",
     "ts-loader": "9.4.4",
     "typescript": "^5.7.3",
     "use-trace-update": "1.3.2",
@@ -363,9 +306,10 @@
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-dev-server": "4.11.1",
     "webpack-node-externals": "3.0.0",
-    "why": "0.6.2",
+    "@plone/babel-preset-razzle": "^1.0.0-alpha.0",
     "@plone/volto-coresandbox": "1.0.0",
-    "@plone/types": "2.0.0-alpha.3"
+    "@plone/types": "2.0.0-alpha.11",
+    "@plone/razzle": "1.0.0-alpha.0"
   },
   "volta": {
     "node": "20.9.0"
@@ -376,10 +320,9 @@
     "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",
+    "test": "vitest",
     "coverage": "vitest run --coverage",
-    "test": "razzle test --maxWorkers=50%",
-    "test:ci": "CI=true NODE_ICU_DATA=node_modules/full-icu razzle test",
+    "test:ci": "CI=true NODE_ICU_DATA=node_modules/full-icu vitest run",
     "test:husky": "CI=true yarn test --bail --findRelatedTests",
     "start:prod": "NODE_ENV=production node build/server.js",
     "prettier": "prettier --single-quote --check '{src,cypress}/**/*.{js,jsx,ts,tsx}' --check '*.js'",
@@ -388,8 +331,8 @@
     "stylelint": "stylelint 'theme/**/*.{css,less}' 'src/**/*.{css,less}'",
     "stylelint:overrides": "stylelint 'theme/**/*.overrides' 'src/**/*.overrides'",
     "stylelint:fix": "yarn stylelint --fix && yarn stylelint:overrides --fix",
-    "lint": "eslint --max-warnings=0 'src/**/*.{js,jsx,ts,tsx,json}'",
-    "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json}'",
+    "lint": "eslint --max-warnings=0 '{src,cypress}/**/*.{js,jsx,ts,tsx,json}'",
+    "lint:fix": "eslint --fix '{src,cypress}/**/*.{js,jsx,ts,tsx,json}'",
     "lint:husky": "eslint --max-warnings=0 --fix",
     "i18n": "rm -rf build/messages && NODE_ENV=production i18n",
     "i18n:ci": "pnpm i18n && git diff -G'^[^\"POT]' --exit-code",

package/razzle.config.js

@@ -15,7 +15,6 @@ const {
 const { AddonRegistry } = require('@plone/registry/addon-registry');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
 const AfterBuildPlugin = require('@fiverr/afterbuild-webpack-plugin');
 
@@ -116,25 +115,11 @@ const defaultModify = ({
       },
     });
 
-    // This is needed to override Razzle use of the unmaintained CleanCSS
-    // which does not have support for recently CSS features (container queries).
-    // Using the default provided (cssnano) by css-minimizer-webpack-plugin
-    // should be enough see:
-    // (https://github.com/clean-css/clean-css/discussions/1209)
+    // TODO: remove this before merging the Razzle fork into Volto 19
+    // @sneridagh: Tried to remove this now that we have forked Razzle
+    // but I cannot pinpoint where this comes from, and it seems undefined
+    // always.
     delete options.webpackOptions.terserPluginOptions?.sourceMap;
-    if (!dev) {
-      config.optimization = Object.assign({}, config.optimization, {
-        minimizer: [
-          new TerserPlugin(options.webpackOptions.terserPluginOptions),
-          new CssMinimizerPlugin({
-            sourceMap: options.razzleOptions.enableSourceMaps,
-            minimizerOptions: {
-              sourceMap: options.razzleOptions.enableSourceMaps,
-            },
-          }),
-        ],
-      });
-    }
 
     config.plugins.unshift(
       // restrict moment.js locales to supported languages
@@ -414,6 +399,22 @@ const defaultModify = ({
         ]
       : [];
 
+  // If Volto is served under a subpath,
+  // we have to adjust where Webpack assets are served too.
+  const subpathPrefix = process.env.RAZZLE_SUBPATH_PREFIX || '';
+  if (subpathPrefix) {
+    if (target === 'web' && dev) {
+      if (config.devServer.devMiddleware) {
+        config.devServer.devMiddleware.publicPath = subpathPrefix;
+      } else {
+        config.devServer.publicPath += `${subpathPrefix.slice(1)}/`;
+      }
+    }
+    const publicPath = config.output.publicPath;
+    if (publicPath.indexOf(subpathPrefix) === -1) {
+      config.output.publicPath = `${publicPath}${subpathPrefix.slice(1)}/`;
+    }
+  }
   return config;
 };
 
@@ -423,8 +424,7 @@ const defaultPlugins = [
   { object: require('./webpack-plugins/webpack-less-plugin')({ registry }) },
   { object: require('./webpack-plugins/webpack-svg-plugin') },
   { object: require('./webpack-plugins/webpack-bundle-analyze-plugin') },
-  { object: require('./jest-extender-plugin') },
-  'scss',
+  { object: require('./webpack-plugins/webpack-scss-plugin') },
 ];
 
 const plugins = addonExtenders.reduce(

package/src/actions/content/content.js

@@ -164,7 +164,6 @@ export function getContent(
           b_size: settings.defaultPageSize,
         }
       : {},
-    settings.isMultilingual ? { expand: 'translations' } : {},
   );
 
   let qs = Object.keys(query)

package/src/actions/controlpanels/controlpanels.js

@@ -12,6 +12,8 @@ import {
   SYSTEM_INFORMATION,
   DATABASE_INFORMATION,
 } from '@plone/volto/constants/ActionTypes';
+import { getSite } from '@plone/volto/actions/site/site';
+
 /**
  * Get controlpanel function.
  * @function getControlpanel
@@ -86,13 +88,17 @@ export function listControlpanels() {
  * @returns {Object} Update controlpanel action.
  */
 export function updateControlpanel(url, data) {
-  return {
-    type: UPDATE_CONTROLPANEL,
-    request: {
-      op: 'patch',
-      path: url,
-      data,
-    },
+  return (dispatch) => {
+    dispatch({
+      type: UPDATE_CONTROLPANEL,
+      request: {
+        op: 'patch',
+        path: url,
+        data,
+      },
+    }).then(() => {
+      dispatch(getSite());
+    });
   };
 }
 

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

@@ -35,12 +35,18 @@ describe('Controlpanels action', () => {
     it('should create an action to update a controlpanel', () => {
       const url = 'http://localhost';
       const data = 'Hello World!';
-      const action = updateControlpanel(url, data);
 
-      expect(action.type).toEqual(UPDATE_CONTROLPANEL);
-      expect(action.request.op).toEqual('patch');
-      expect(action.request.path).toEqual(url);
-      expect(action.request.data).toEqual(data);
+      const dispatch = vi.fn().mockResolvedValue();
+      updateControlpanel(url, data)(dispatch);
+
+      expect(dispatch).toHaveBeenCalledWith({
+        type: UPDATE_CONTROLPANEL,
+        request: {
+          op: 'patch',
+          path: url,
+          data,
+        },
+      });
     });
   });
 });

package/src/actions/users/users.js

@@ -3,7 +3,7 @@
  * @module actions/users/users
  */
 
-import { stringify } from 'query-string';
+import qs from 'query-string';
 
 import {
   CREATE_USER,
@@ -92,7 +92,7 @@ export function listUsers(options = {}) {
 
   let filterarg =
     groups_filter.length > 0
-      ? stringify(
+      ? qs.stringify(
           { 'groups-filter': groups_filter },
           { arrayFormat: 'colon-list-separator' },
         )

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

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

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

@@ -223,11 +223,10 @@ class Add extends Component {
         ? keys(this.props.schema.definitions)
         : null,
       '@type': this.props.type,
-      ...(config.settings.isMultilingual &&
-        this.props.location?.state?.translationOf && {
-          translation_of: this.props.location.state.translationOf,
-          language: this.props.location.state.language,
-        }),
+      ...(this.props.location?.state?.translationOf && {
+        translation_of: this.props.location.state.translationOf,
+        language: this.props.location.state.language,
+      }),
     });
   }
 
@@ -348,7 +347,7 @@ class Add extends Component {
         <div id="page-add">
           <Helmet
             title={this.props.intl.formatMessage(messages.add, {
-              type: this.props.type,
+              type: this.props?.schema?.title || this.props.type,
             })}
           />
           <Form

package/src/components/manage/BlockChooser/BlockChooser.jsx

@@ -110,6 +110,7 @@ const BlockChooser = ({
         getFormatMessage(block.title)
           .toLowerCase()
           .includes(filterValue.toLowerCase()) ||
+        block.title.toLowerCase().includes(filterValue.toLowerCase()) ||
         filterVariations(block)?.length,
     );
   }

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

@@ -7,11 +7,7 @@ import config from '@plone/volto/registry';
 
 config.experimental = { addBlockButton: { enabled: false } };
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 
 beforeAll(async () => {
   const { __setLoadables } = await import(

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

@@ -187,6 +187,7 @@ export class Edit extends Component {
               selected: this.props.selected || this.props.multiSelected,
               multiSelected: this.props.multiSelected,
               hovered: this.props.hovered === this.props.id,
+              error: !!this.props.blocksErrors?.[this.props.id],
             })}
             style={{ outline: 'none' }}
             ref={this.blockNode}

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

@@ -21,9 +21,13 @@ import BlockChooserButton from '@plone/volto/components/manage/BlockChooser/Bloc
 import trashSVG from '@plone/volto/icons/delete.svg';
 
 const messages = defineMessages({
-  delete: {
-    id: 'delete',
-    defaultMessage: 'delete',
+  delete_block: {
+    id: 'delete_block',
+    defaultMessage: 'delete {type} block',
+  },
+  drag_block: {
+    id: 'drag_block',
+    defaultMessage: 'drag {type} block',
   },
 });
 
@@ -99,6 +103,7 @@ const EditBlockWrapper = (props) => {
           }}
           {...draginfo.dragHandleProps}
           className="drag handle wrapper"
+          aria-label={intl.formatMessage(messages.drag_block, { type })}
         >
           <Icon name={dragSVG} size="18px" />
         </div>
@@ -111,7 +116,7 @@ const EditBlockWrapper = (props) => {
               basic
               onClick={() => onDeleteBlock(block, true)}
               className="delete-button"
-              aria-label={intl.formatMessage(messages.delete)}
+              aria-label={intl.formatMessage(messages.delete_block, { type })}
             >
               <Icon name={trashSVG} size="18px" />
             </Button>

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

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

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

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

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

@@ -20,7 +20,11 @@ function Edit(props) {
 
   const handleChange = React.useCallback(
     async (id, image, { title, image_field, image_scales } = {}) => {
-      const url = image ? image['@id'] || image : '';
+      const url = Array.isArray(image)
+        ? image?.[0]?.['@id']
+        : image
+          ? image['@id'] || image
+          : '';
 
       props.onChangeBlock(props.block, {
         ...props.data,

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

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

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

@@ -43,13 +43,13 @@ const Edit = (props) => {
       {!hasImage && (
         <Message>
           <center>
-            <img src={imageBlockSVG} alt="" />
+            <Image src={imageBlockSVG} alt="" />
             <div className="message-text">{placeholder}</div>
           </center>
         </Message>
       )}
       {hasImage && hasImageData && (
-        <img
+        <Image
           className={className}
           src={`data:${properties.image['content-type']};base64,${properties.image.data}`}
           width={properties.image.width}

package/src/components/manage/Blocks/LeadImage/LeadImageSidebar.jsx

@@ -96,7 +96,7 @@ const LeadImageSidebar = ({
           <Segment className="sidebar-metadata-container" secondary>
             {properties.image.filename}
             {properties.image.data && (
-              <img
+              <Image
                 // TODO understand when this actually happens
                 src={`data:${properties.image['content-type']};base64,${properties.image.data}`}
                 width={properties.image.width}

package/src/components/manage/Blocks/LeadImage/LeadImageSidebar.test.jsx

@@ -6,11 +6,7 @@ import { Provider } from 'react-intl-redux';
 import LeadImageSidebar from './LeadImageSidebar';
 
 vi.mock('@plone/volto/components/manage/Widgets');
-vi.mock('@plone/volto/components/manage/Widgets', async () => {
-  return await import(
-    '@plone/volto/components/manage/Widgets/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Widgets');
 
 const mockStore = configureStore();