Feature/jest to vitest migration

packages/volto/.editorconfig

@@ -32,3 +32,4 @@ indent_size = 2
 indent_style = tab
 indent_size = unset
 tab_width = unset
+

packages/volto/.eslintignore

@@ -1 +1,4 @@
 /types/
+.i18nrc.js
+build/
+dist/

packages/volto/.eslintrc

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

packages/volto/.i18nrc.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+module.exports = {
+  locales: ['en'],
+  extractMessages: true,
+  outputFilePattern: 'build/messages/messages.json',
+  inputFilePattern: [
+    'src/**/*.{js,jsx,ts,tsx}',
+    '__tests__/**/*.{js,jsx,ts,tsx}',
+  ],
+};

packages/volto/__tests__/addon-registry-project.test.js

@@ -4,22 +4,22 @@ import {
   buildDependencyGraph,
   getAddonsLoaderChain,
 } from '@plone/registry/addon-registry';
+import { vi, expect, describe, test, beforeEach, afterEach } from 'vitest';
 
 describe('AddonRegistry - Project', () => {
-  jest.mock(
+  vi.mock(
     `${path.join(
       __dirname,
       'fixtures',
       'test-volto-project',
     )}/node_modules/@plone/volto/package.json`,
     () => ({
-      // TODO: mock the packages folder inside the mocked @plone/volto to work with resolves
       coreAddons: {},
     }),
     { virtual: true },
   );
 
-  it('works in a mock project directory', () => {
+  test('works in a mock project directory', () => {
     const base = path.join(__dirname, 'fixtures', 'test-volto-project');
     const { registry } = AddonRegistry.init(base);
 
@@ -102,7 +102,7 @@ describe('AddonRegistry - Project', () => {
     });
   });
 
-  it('provides aliases for addons', () => {
+  test('provides aliases for addons', () => {
     const base = path.join(__dirname, 'fixtures', 'test-volto-project');
     const { registry } = AddonRegistry.init(base);
     expect(registry.getResolveAliases()).toStrictEqual({
@@ -115,13 +115,13 @@ describe('AddonRegistry - Project', () => {
     });
   });
 
-  it('provides addon extenders', () => {
+  test('provides addon extenders', () => {
     const base = path.join(__dirname, 'fixtures', 'test-volto-project');
     const { registry } = AddonRegistry.init(base);
     expect(registry.getAddonExtenders().length).toBe(1);
   });
 
-  it('provides a list of addon records ordered by initial package declaration', () => {
+  test('provides a list of addon records ordered by initial package declaration', () => {
     const base = path.join(__dirname, 'fixtures', 'test-volto-project');
     const { registry } = AddonRegistry.init(base);
     const addons = registry.getAddons();
@@ -135,7 +135,7 @@ describe('AddonRegistry - Project', () => {
     ]);
   });
 
-  it('provides customization paths declared in a Volto project', () => {
+  test('provides customization paths declared in a Volto project', () => {
     const base = path.join(__dirname, 'fixtures', 'test-volto-project');
     const { registry } = AddonRegistry.init(base);
     expect(registry.getProjectCustomizationPaths()).toStrictEqual({
@@ -148,7 +148,7 @@ describe('AddonRegistry - Project', () => {
     });
   });
 
-  it('provides customization paths declared in addons', () => {
+  test('provides customization paths declared in addons', () => {
     const base = path.join(__dirname, 'fixtures', 'test-volto-project');
     const { registry } = AddonRegistry.init(base);
     expect(registry.getAddonCustomizationPaths()).toStrictEqual({
@@ -220,7 +220,7 @@ describe('Addon via env var - Released addon', () => {
   const originalEnv = process.env;
 
   beforeEach(() => {
-    jest.resetModules();
+    vi.resetModules();
     process.env = {
       ...originalEnv,
       ADDONS: 'test-released-via-addons-env-var',
@@ -231,7 +231,7 @@ describe('Addon via env var - Released addon', () => {
     process.env = originalEnv;
   });
 
-  it('addons can be specified on the fly using ADDONS env var - Released addon', () => {
+  test('addons can be specified on the fly using ADDONS env var - Released addon', () => {
     const base = path.join(__dirname, 'fixtures', 'test-volto-project');
     const { registry } = AddonRegistry.init(base);
     expect(

packages/volto/__tests__/addon-registry-volto.test.js

@@ -1,5 +1,6 @@
 import path from 'path';
 import { AddonRegistry } from '@plone/registry/addon-registry';
+import { describe, expect, it } from 'vitest';
 
 describe('AddonRegistry - Volto', () => {
   it('works in Volto', () => {

packages/volto/__tests__/create-addons-loader.test.js

@@ -5,6 +5,7 @@ import {
   getAddonsLoaderCode,
   nameFromPackage,
 } from '@plone/registry/create-addons-loader';
+import { describe, expect } from 'vitest';
 
 describe('create-addons-loader code generation', () => {
   test('no addon creates simple loader, default = no loadProjectConfig', () => {

packages/volto/__tests__/volto-slate/deserialize.test.js

@@ -1,10 +1,10 @@
 import config from '@plone/volto/registry';
-
 import { JSDOM } from 'jsdom';
 import { deserialize } from '@plone/volto-slate/editor/deserialize';
 import * as htmlUtils from '@plone/volto-slate/editor/utils';
 import { makeEditor } from '@plone/volto-slate/utils/editor';
 import installSlate from '@plone/volto-slate/index';
+import { it, describe, expect } from 'vitest';
 
 const tojson = (html) => {
   const parsed = new JSDOM(html);

packages/volto/__tests__/webpack-relative-resolver.test.js

@@ -1,3 +1,4 @@
+import { describe, it, expect } from 'vitest';
 const path = require('path');
 const { AddonRegistry } = require('@plone/registry/addon-registry');
 const WebpackRelativeResolver = require('../../volto/webpack-plugins/webpack-relative-resolver');

packages/volto/package.json

@@ -35,12 +35,14 @@
   "main": "src/index.js",
   "types": "types/index.d.ts",
   "scripts": {
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "coverage": "vitest run --coverage",
     "analyze": "BUNDLE_ANALYZE=true razzle build",
     "start": "make build-deps && razzle start",
     "start:coresandbox": "make build-deps && ADDONS=coresandbox razzle start",
     "build": "make build-deps && razzle build --noninteractive",
     "build:types": "tsc --project tsconfig.declarations.json",
-    "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",
@@ -315,6 +317,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",
@@ -384,6 +388,7 @@
     "ts-loader": "9.4.4",
     "typescript": "^5.6.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",

packages/volto/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`);
     });
   });
 });

packages/volto/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`);
     });
   });
 });

packages/volto/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';

packages/volto/src/actions/types/types.test.js

@@ -1,5 +1,6 @@
 import { getTypes } from './types';
 import { GET_TYPES } from '@plone/volto/constants/ActionTypes';
+import { vi } from 'vitest';
 
 describe('Types action', () => {
   describe('getTypes', () => {
@@ -10,7 +11,7 @@ describe('Types action', () => {
         },
       });
       const url = '/blog';
-      const dispatch = jest.fn();
+      const dispatch = vi.fn();
 
       getTypes(url)(dispatch, getState);
 

packages/volto/src/components/manage/Actions/Actions.test.jsx

@@ -8,7 +8,7 @@ import Actions from './Actions';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/components/manage/Contents');
+vi.mock('@plone/volto/components/manage/Contents');
 
 describe('Actions', () => {
   it('renders an actions component', () => {

packages/volto/src/components/manage/Actions/__snapshots__/Actions.test.jsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Actions renders an actions component 1`] = `
+exports[`Actions > renders an actions component 1`] = `
 <div
   aria-expanded={false}
   className="ui item dropdown"

packages/volto/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,15 @@ beforeAll(() => {
   config.settings.loadables = {};
 });
 
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../Toolbar/Toolbar', () => ({
+  __esModule: true,
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
-jest.mock('../Form/Form', () => jest.fn(() => <div className="Form" />));
+vi.mock('../Form/Form', () => ({
+  __esModule: true,
+  default: vi.fn(() => <div className="Form" />),
+}));
 
 describe('Add', () => {
   it('renders an empty add component', () => {

packages/volto/src/components/manage/Add/__snapshots__/Add.test.jsx.snap

@@ -1,18 +1,18 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Add renders an add component 1`] = `
+exports[`Add > renders an add component 1`] = `
 <div>
   <div />
 </div>
 `;
 
-exports[`Add renders an add component with schema 1`] = `
+exports[`Add > renders an add component with schema 1`] = `
 <div>
   <div />
 </div>
 `;
 
-exports[`Add renders an empty add component 1`] = `
+exports[`Add > renders an empty add component 1`] = `
 <div>
   <div />
 </div>

packages/volto/src/components/manage/Aliases/Aliases.test.jsx

@@ -9,9 +9,15 @@ import Aliases from './Aliases';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../Toolbar/Toolbar', () => ({
+  __esModule: true,
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
-jest.mock('../Toolbar/More', () => jest.fn(() => <div className="More" />));
+vi.mock('../Toolbar/More', () => ({
+  __esModule: true,
+  default: vi.fn(() => <div className="More" />),
+}));
 
 describe('Aliases', () => {
   it('renders aliases object control', () => {

packages/volto/src/components/manage/Aliases/__snapshots__/Aliases.test.jsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Aliases renders aliases object control 1`] = `
+exports[`Aliases > renders aliases object control 1`] = `
 <div>
   <div
     class="ui container"