test: Fix jest warnings

Makefile

@@ -90,7 +90,7 @@ cypress-run:	## Run cypress integration tests
 
 .PHONY: test
 test:			## Run jest tests
-	${DOCKER_COMPOSE} run -e CI=1 frontend test
+	COMPOSE_IGNORE_ORPHANS=1 ${DOCKER_COMPOSE} run -e CI=1 -e BROWSERSLIST_IGNORE_OLD_DATA=1 frontend test
 
 .PHONY: test-update
 test-update:	## Update jest tests snapshots

docker-compose.yml

@@ -1,4 +1,3 @@
-version: "3"
 services:
   backend:
     image: eeacms/plone-backend

src/components/theme/Banner/View.jsx

@@ -183,7 +183,7 @@ const View = (props) => {
               />
             )}
             {rssLinks?.map((rssLink, index) => (
-              <>
+              <React.Fragment key={rssLink.href || index}>
                 <Helmet
                   link={[
                     {
@@ -205,7 +205,7 @@ const View = (props) => {
                   href={rssLink.href}
                   target="_blank"
                 />
-              </>
+              </React.Fragment>
             ))}
           </>
         }

src/components/theme/Widgets/ContributorsViewWidget.jsx

@@ -4,16 +4,16 @@ const ContributorsViewWidget = ({ value, content, children, className }) => {
   const resolvedValue = content?.contributors_fullname || value || [];
   return resolvedValue ? (
     <span className={cx(className, 'array', 'widget')}>
-      {resolvedValue.map((item, key) => (
-        <>
-          {key ? ', ' : ''}
-          <span key={item.token || item.title || item}>
-            {children
-              ? children(item.title || item.token || item)
-              : item.title || item.token || item}
+      {resolvedValue.map((item, index) => {
+        const label = item?.title || item?.token || item;
+        const key = `${label}-${index}`;
+        return (
+          <span key={key}>
+            {index ? ', ' : ''}
+            {children ? children(label) : label}
           </span>
-        </>
-      ))}
+        );
+      })}
     </span>
   ) : (
     ''

src/components/theme/Widgets/CreatorsViewWidget.jsx

@@ -4,16 +4,16 @@ const CreatorsViewWidget = ({ value, content, children, className }) => {
   const resolvedValue = content?.creators_fullname || value || [];
   return resolvedValue ? (
     <span className={cx(className, 'array', 'widget')}>
-      {resolvedValue.map((item, key) => (
-        <>
-          {key ? ', ' : ''}
-          <span key={item.token || item.title || item}>
-            {children
-              ? children(item.title || item.token || item)
-              : item.title || item.token || item}
+      {resolvedValue.map((item, index) => {
+        const label = item?.title || item?.token || item;
+        const key = `${label}-${index}`;
+        return (
+          <span key={key}>
+            {index ? ', ' : ''}
+            {children ? children(label) : label}
           </span>
-        </>
-      ))}
+        );
+      })}
     </span>
   ) : (
     ''

src/components/theme/Widgets/NavigationBehaviorWidget.test.jsx

@@ -101,7 +101,7 @@ jest.mock('@plone/volto/components/manage/Widgets/ObjectWidget', () => {
 
 // Mock semantic-ui-react components
 jest.mock('semantic-ui-react', () => {
-  const MockAccordion = ({ children, ...props }) => (
+  const MockAccordion = ({ children, fluid, styled, ...props }) => (
     <div className="ui accordion" data-testid="accordion" {...props}>
       {children}
     </div>

src/components/theme/Widgets/__snapshots__/ContributorsViewWidget.test.jsx.snap

@@ -4,12 +4,12 @@ exports[`ContributorsViewWidget renders a full vocabulary array view widget comp
 <span
   className="metadata array widget"
 >
-
   <span>
+
     Foo
   </span>
-  , 
   <span>
+    , 
     Bar
   </span>
 </span>
@@ -19,14 +19,14 @@ exports[`ContributorsViewWidget renders a full vocabulary array view widget comp
 <span
   className="metadata array widget"
 >
-
   <span>
+
     <strong>
       Foo
     </strong>
   </span>
-  , 
   <span>
+    , 
     <strong>
       Bar
     </strong>
@@ -38,12 +38,12 @@ exports[`ContributorsViewWidget renders a simple array view widget component 1`]
 <span
   className="metadata array widget"
 >
-
   <span>
+
     foo
   </span>
-  , 
   <span>
+    , 
     bar
   </span>
 </span>
@@ -53,12 +53,12 @@ exports[`ContributorsViewWidget renders a vocabulary array view widget component
 <span
   className="metadata array widget"
 >
-
   <span>
+
     Foo
   </span>
-  , 
   <span>
+    , 
     Bar
   </span>
 </span>

src/components/theme/Widgets/__snapshots__/CreatorsViewWidget.test.jsx.snap

@@ -4,12 +4,12 @@ exports[`CreatorsViewWidget renders a full vocabulary array view widget componen
 <span
   className="metadata array widget"
 >
-
   <span>
+
     Foo
   </span>
-  , 
   <span>
+    , 
     Bar
   </span>
 </span>
@@ -19,14 +19,14 @@ exports[`CreatorsViewWidget renders a full vocabulary array view widget componen
 <span
   className="metadata array widget"
 >
-
   <span>
+
     <strong>
       Foo
     </strong>
   </span>
-  , 
   <span>
+    , 
     <strong>
       Bar
     </strong>
@@ -38,12 +38,12 @@ exports[`CreatorsViewWidget renders a simple array view widget component 1`] = `
 <span
   className="metadata array widget"
 >
-
   <span>
+
     foo
   </span>
-  , 
   <span>
+    , 
     bar
   </span>
 </span>
@@ -53,12 +53,12 @@ exports[`CreatorsViewWidget renders a vocabulary array view widget component 1`]
 <span
   className="metadata array widget"
 >
-
   <span>
+
     Foo
   </span>
-  , 
   <span>
+    , 
     Bar
   </span>
 </span>

src/customizations/volto/components/theme/Comments/Comments.jsx

@@ -438,8 +438,8 @@ class Comments extends Component {
           open={this.state.showEdit}
           onCancel={this.onEditCancel}
           onOk={this.onEditOk}
-          id={this.state.editId}
-          text={this.state.editText}
+          id={this.state.editId ?? ''}
+          text={this.state.editText ?? ''}
         />
         {permissions.can_reply && (
           <div id="comment-add-id">

src/customizations/volto/components/theme/Header/Header.test.jsx

@@ -26,6 +26,21 @@ beforeAll(
     await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
 );
 
+jest.mock('semantic-ui-react', () => {
+  const React = require('react');
+  const actual = jest.requireActual('semantic-ui-react');
+  const Dropdown = React.forwardRef(({ text, trigger, ...props }, ref) => {
+    const resolvedTrigger =
+      trigger || (typeof text === 'function' ? text() : text);
+    return <actual.Dropdown {...props} ref={ref} trigger={resolvedTrigger} />;
+  });
+  Dropdown.Menu = actual.Dropdown.Menu;
+  Dropdown.Item = actual.Dropdown.Item;
+  Dropdown.Header = actual.Dropdown.Header;
+  Dropdown.Divider = actual.Dropdown.Divider;
+  return { ...actual, Dropdown };
+});
+
 describe('Header', () => {
   it('renders a header component with homepage_inverse_view layout', () => {
     const store = mockStore({

src/helpers/setupPrintView.test.js

@@ -383,24 +383,11 @@ describe('setupPrintView', () => {
     });
     document.body.appendChild(iframe);
 
-    // Mock the iframe to never fire load event, causing timeout
-    const originalSetTimeout = global.setTimeout;
-    let timeoutCallback;
-    global.setTimeout = jest.fn((callback, delay) => {
-      if (delay === 5000) {
-        // This is the iframe timeout
-        timeoutCallback = callback;
-      }
-      return originalSetTimeout(callback, delay);
-    });
-
     await act(async () => {
       setupPrintView(dispatch);
 
       // Trigger the iframe timeout to simulate error condition
-      if (timeoutCallback) {
-        timeoutCallback();
-      }
+      jest.advanceTimersByTime(5000);
 
       for (let i = 0; i < 10; i++) {
         jest.runAllTimers();
@@ -410,9 +397,6 @@ describe('setupPrintView', () => {
 
     // Should still call print even with timeout
     expect(window.print).toHaveBeenCalled();
-
-    // Restore original setTimeout
-    global.setTimeout = originalSetTimeout;
   });
 
   it('prevents multiple resets of print state', async () => {