migrated tests and fixed test warnings

package.json

@@ -35,12 +35,13 @@
     "update:browserlist": "pnpm --filter @plone/volto add caniuse-lite && pnpm --filter @plone/volto remove caniuse-lite"
   },
   "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
     "concurrently": "^8.2.2",
     "husky": "9.0.11",
     "lint-staged": "15.2.2",
     "tsconfig": "workspace:*",
     "typescript": "^5.6.3",
-    "vitest": "^2.1.3"
+    "vitest": "^2.1.8"
   },
   "packageManager": "[email protected]",
   "pnpm": {

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

@@ -4,21 +4,27 @@ import {
   buildDependencyGraph,
   getAddonsLoaderChain,
 } from '@plone/registry/addon-registry';
-import { vi, expect, describe, test, beforeEach, afterEach } from 'vitest';
 
 describe('AddonRegistry - Project', () => {
-  vi.mock(
-    `${path.join(
-      __dirname,
-      'fixtures',
-      'test-volto-project',
-    )}/node_modules/@plone/volto/package.json`,
-    () => ({
-      coreAddons: {},
-    }),
-    { virtual: true },
-  );
+  beforeEach(async () => {
+    await vi.doMock(
+      path.join(
+        __dirname,
+        'fixtures',
+        'test-volto-project',
+        'node_modules/@plone/volto/package.json',
+      ),
+      () => ({
+        default: {
+          coreAddons: {},
+        },
+      }),
+    );
+  });
 
+  afterEach(() => {
+    vi.resetModules();
+  });
   test('works in a mock project directory', () => {
     const base = path.join(__dirname, 'fixtures', 'test-volto-project');
     const { registry } = AddonRegistry.init(base);
@@ -217,7 +223,7 @@ describe('Addon chain loading dependencies', () => {
 });
 
 describe('Addon via env var - Released addon', () => {
-  const originalEnv = process.env;
+  const originalEnv = { ...process.env };
 
   beforeEach(() => {
     vi.resetModules();

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

@@ -1,6 +1,5 @@
 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__/webpack-relative-resolver.test.js

@@ -1,4 +1,3 @@
-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/news/6326.feature

@@ -0,0 +1 @@
+Volto has migrated from "Jest" to "Vitest" as its unit test runner.@Abhishek-17h 

packages/volto/package.json

@@ -310,6 +310,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",

packages/volto/src/components/manage/Blocks/ToC/variations/DefaultTocRenderer.test.jsx

@@ -8,6 +8,12 @@ const mockStore = configureStore();
 
 const data = { '@type': 'toc', variation: 'default' };
 
+const properties = {
+  title: 'Table of Contents',
+  hide_title: false,
+  ordered: true,
+};
+
 const tocEntries = [
   {
     level: 2,
@@ -35,7 +41,11 @@ test('renders a default toc renderer component', () => {
   const component = renderer.create(
     <Provider store={store}>
       <MemoryRouter>
-        <DefaultTocRenderer data={data} tocEntries={tocEntries} />
+        <DefaultTocRenderer
+          properties={properties}
+          data={data}
+          tocEntries={tocEntries}
+        />
       </MemoryRouter>
     </Provider>,
   );

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

@@ -89,7 +89,14 @@ describe('Contents', () => {
       },
       intl: {
         locale: 'en',
-        messages: {},
+        messages: {
+          ID: 'ID',
+          Title: 'Title',
+          'Publication date': 'Publication date',
+          'Created on': 'Created on',
+          'Last modified': 'Last modified',
+          Type: 'Type',
+        },
       },
     });
     const { container } = render(

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

@@ -57,7 +57,11 @@ describe('Aliases', () => {
       },
       intl: {
         locale: 'en',
-        messages: {},
+        messages: {
+          Both: 'Both',
+          Automatically: 'Automatically',
+          Manually: 'Manually',
+        },
       },
       site: {
         data: {

packages/volto/src/components/manage/Controlpanels/Groups/GroupsControlpanel.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, act } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import jwt from 'jsonwebtoken';
@@ -12,7 +12,7 @@ vi.mock('../../Toolbar/Toolbar', () => ({
 }));
 
 describe('UsersControlpanel', () => {
-  it('renders a user control component', () => {
+  it('renders a user control component', async () => {
     const store = mockStore({
       userSession: {
         token: jwt.sign({ sub: 'john' }, 'secret'),
@@ -38,12 +38,16 @@ describe('UsersControlpanel', () => {
         messages: {},
       },
     });
-    const { container } = render(
-      <Provider store={store}>
-        <GroupsControlpanel location={{ pathname: '/blog' }} />
-        <div id="toolbar"></div>
-      </Provider>,
-    );
+    const { container } = await act(async () => {
+      return render(
+        <Provider store={store}>
+          <>
+            <GroupsControlpanel location={{ pathname: '/blog' }} />
+            <div id="toolbar"></div>
+          </>
+        </Provider>,
+      );
+    });
 
     expect(container).toMatchSnapshot();
   });

packages/volto/src/components/manage/Controlpanels/Rules/AddRule.test.jsx

@@ -24,8 +24,10 @@ describe('AddRule', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <AddRule location={{ pathname: '/controlpanel/rules/add' }} />
-        <div id="toolbar"></div>
+        <>
+          <AddRule location={{ pathname: '/controlpanel/rules/add' }} />
+          <div id="toolbar"></div>
+        </>
       </Provider>,
     );
 

packages/volto/src/components/manage/Controlpanels/Rules/ConfigureRule.test.jsx

@@ -23,10 +23,12 @@ describe('ConfigureRule', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <ConfigureRule
-          location={{ pathname: '/controlpanel/rules/:id/configure' }}
-        />
-        <div id="toolbar"></div>
+        <>
+          <ConfigureRule
+            location={{ pathname: '/controlpanel/rules/:id/configure' }}
+          />
+          <div id="toolbar"></div>
+        </>
       </Provider>,
     );
 

packages/volto/src/components/manage/Controlpanels/Rules/EditRule.test.jsx

@@ -25,8 +25,10 @@ describe('EditRule', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <EditRule location={{ pathname: '/controlpanel/rules/:id/edit' }} />
-        <div id="toolbar"></div>
+        <>
+          <EditRule location={{ pathname: '/controlpanel/rules/:id/edit' }} />
+          <div id="toolbar"></div>
+        </>
       </Provider>,
     );
 

packages/volto/src/components/manage/Controlpanels/Rules/Rules.test.jsx

@@ -66,8 +66,10 @@ describe('Rules', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <Rules location={{ pathname: '/controlpanel/rules' }} />
-        <div id="toolbar"></div>
+        <>
+          <Rules location={{ pathname: '/controlpanel/rules' }} />
+          <div id="toolbar"></div>
+        </>
       </Provider>,
     );
 

packages/volto/src/components/manage/Controlpanels/Users/UsersControlpanel.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, act } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import jwt from 'jsonwebtoken';
@@ -12,7 +12,7 @@ vi.mock('../../Toolbar/Toolbar', () => ({
 }));
 
 describe('UsersControlpanel', () => {
-  it('renders a user control component', () => {
+  it('renders a user control component', async () => {
     const store = mockStore({
       userSession: {
         token: jwt.sign({ sub: 'john' }, 'secret'),
@@ -38,12 +38,16 @@ describe('UsersControlpanel', () => {
         messages: {},
       },
     });
-    const { container } = render(
-      <Provider store={store}>
-        <UsersControlpanel location={{ pathname: '/blog' }} />
-        <div id="toolbar"></div>
-      </Provider>,
-    );
+    const { container } = await act(async () => {
+      return render(
+        <Provider store={store}>
+          <>
+            <UsersControlpanel location={{ pathname: '/blog' }} />
+            <div id="toolbar"></div>
+          </>
+        </Provider>,
+      );
+    });
 
     expect(container).toMatchSnapshot();
   });

packages/volto/src/components/theme/App/App.test.jsx

@@ -7,8 +7,6 @@ import configureStore from 'redux-mock-store';
 
 import { __test__ as App } from './App';
 
-import { vi } from 'vitest';
-
 beforeAll(() => {
   config.settings.navDepth = 1;
   config.views.errorViews = {

packages/volto/src/components/theme/Comments/Comments.test.jsx

@@ -2,11 +2,17 @@ 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';
 import { __setLoadables } from '@plone/volto/helpers/Loadable/Loadable';
 
+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();
+
 vi.mock('moment', () => ({
   default: vi.fn(() => ({
     format: vi.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
@@ -66,11 +72,13 @@ describe('Comments', () => {
         },
       },
     });
+
     const component = renderer.create(
       <Provider store={store}>
         <Comments pathname="/blog" />
       </Provider>,
     );
+
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });

packages/volto/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({

packages/volto/src/components/theme/PasswordReset/__snapshots__/PasswordReset.test.jsx.snap

@@ -1,3 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`PasswordReset > renders a PasswordReset component 1`] = `<div />`;
+exports[`PasswordReset > renders a PasswordReset component 1`] = `
+<div
+  data-testid="password-reset"
+>
+  Password Reset for 
+  a9dd24f9aab74bdea66aba6d80ef651b
+</div>
+`;

packages/volto/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',
                 },
               ],
             }}

packages/volto/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', () => {

packages/volto/src/components/theme/View/TabularView.test.jsx

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