Migrated src/components/manage to vitest and other files

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

@@ -55,8 +55,8 @@
     "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:husky": "eslint --max-warnings=0 --fix",
-    "i18n": "rm -rf build/messages && NODE_ENV=production i18n",
+    "lint:husky": "eslint --max-warnings=1 --fix",
+    "i18n": "NODE_ENV=production i18n",
     "i18n:ci": "pnpm i18n && git diff -G'^[^\"POT]' --exit-code",
     "typecheck": "tsc --project tsconfig.json --noEmit",
     "dry-release": "release-it --dry-run",

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"

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

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`BlocksChooser Fallback BlockChooser component onMutateBlock 1`] = `
+exports[`BlocksChooser > Fallback BlockChooser component onMutateBlock 1`] = `
 <div>
   <div
     class="blocks-chooser"
@@ -42,8 +42,6 @@ exports[`BlocksChooser Fallback BlockChooser component onMutateBlock 1`] = `
           <svg
             class="icon"
             style="height: 20px; width: auto; fill: currentColor;"
-            viewBox=""
-            xmlns=""
           />
         </div>
       </div>
@@ -111,8 +109,6 @@ exports[`BlocksChooser Fallback BlockChooser component onMutateBlock 1`] = `
           <svg
             class="icon"
             style="height: 20px; width: auto; fill: currentColor;"
-            viewBox=""
-            xmlns=""
           />
         </div>
       </div>
@@ -154,8 +150,6 @@ exports[`BlocksChooser Fallback BlockChooser component onMutateBlock 1`] = `
           <svg
             class="icon"
             style="height: 20px; width: auto; fill: currentColor;"
-            viewBox=""
-            xmlns=""
           />
         </div>
       </div>
@@ -223,8 +217,6 @@ exports[`BlocksChooser Fallback BlockChooser component onMutateBlock 1`] = `
           <svg
             class="icon"
             style="height: 20px; width: auto; fill: currentColor;"
-            viewBox=""
-            xmlns=""
           />
         </div>
       </div>
@@ -325,7 +317,7 @@ exports[`BlocksChooser Fallback BlockChooser component onMutateBlock 1`] = `
 </div>
 `;
 
-exports[`BlocksChooser renders a BlockChooser component 1`] = `
+exports[`BlocksChooser > renders a BlockChooser component 1`] = `
 <div>
   <div
     class="blocks-chooser"
@@ -367,8 +359,6 @@ exports[`BlocksChooser renders a BlockChooser component 1`] = `
           <svg
             class="icon"
             style="height: 20px; width: auto; fill: currentColor;"
-            viewBox=""
-            xmlns=""
           />
         </div>
       </div>
@@ -436,8 +426,6 @@ exports[`BlocksChooser renders a BlockChooser component 1`] = `
           <svg
             class="icon"
             style="height: 20px; width: auto; fill: currentColor;"
-            viewBox=""
-            xmlns=""
           />
         </div>
       </div>
@@ -479,8 +467,6 @@ exports[`BlocksChooser renders a BlockChooser component 1`] = `
           <svg
             class="icon"
             style="height: 20px; width: auto; fill: currentColor;"
-            viewBox=""
-            xmlns=""
           />
         </div>
       </div>
@@ -548,8 +534,6 @@ exports[`BlocksChooser renders a BlockChooser component 1`] = `
           <svg
             class="icon"
             style="height: 20px; width: auto; fill: currentColor;"
-            viewBox=""
-            xmlns=""
           />
         </div>
       </div>

packages/volto/src/components/manage/BlockChooser/__snapshots__/BlockChooserButton.test.jsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Can render a custom button 1`] = `
 <div>
@@ -19,8 +19,6 @@ exports[`Renders a button 1`] = `
     <svg
       class="icon block-add-button"
       style="height: 19px; width: auto; fill: currentColor;"
-      viewBox=""
-      xmlns=""
     />
   </button>
 </div>

packages/volto/src/components/manage/BlockChooser/__snapshots__/BlockChooserSearch.test.jsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`BlocksChooserSearch renders a BlockChooserSearch component 1`] = `
+exports[`BlocksChooserSearch > renders a BlockChooserSearch component 1`] = `
 <div>
   <form
     class="ui form"