@instructure/ui-top-nav-bar 9.2.1-snapshot-0 → 9.2.1-snapshot-2

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [9.2.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v9.2.0...v9.2.1-snapshot-0) (2024-07-09)
+## [9.2.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v9.2.0...v9.2.1-snapshot-2) (2024-07-10)
 
 **Note:** Version bump only for package @instructure/ui-top-nav-bar
 

package/README.md

@@ -4,8 +4,8 @@ category: packages
 
 ## ui-top-nav-bar
 
-[![npm][npm]][npm-url] 
-[![MIT License][license-badge]][license] 
+[![npm][npm]][npm-url]
+[![MIT License][license-badge]][license]
 [![Code of Conduct][coc-badge]][coc]
 
 A UI component library made by Instructure Inc.

package/es/TopNavBar/TopNavBarActionItems/__new-tests__/TopNavBarActionItems.test.js

@@ -24,6 +24,7 @@
 
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { avatarExample, getActionItems, SmallViewportModeWrapper } from '../../utils/exampleHelpers';
 // eslint-disable-next-line no-restricted-imports
@@ -31,15 +32,17 @@ import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11y
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import { TopNavBarActionItems } from '../index';
 import TopNavBarActionItemsExamples from '../__examples__/TopNavBarActionItems.examples';
-const originalResizeObserver = global.ResizeObserver;
 describe('<TopNavBarActionItems />', () => {
-  beforeAll(() => {
-    // Mock for ResizeObserver browser API
-    global.ResizeObserver = jest.fn().mockImplementation(() => ({
-      observe: jest.fn(),
-      unobserve: jest.fn(),
-      disconnect: jest.fn()
-    }));
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
   });
   it('should render', () => {
     const _render = render(getActionItems({
@@ -59,7 +62,7 @@ describe('<TopNavBarActionItems />', () => {
   });
   describe('elementRef prop should return a ref to the root element', () => {
     it('in desktop mode', () => {
-      const elementRef = jest.fn();
+      const elementRef = vi.fn();
       const _render3 = render(getActionItems({
           actionItemsCount: 6,
           actionItemsProps: {
@@ -72,7 +75,7 @@ describe('<TopNavBarActionItems />', () => {
       expect(actionItems.tagName).toBe('UL');
     });
     it('in smallViewport mode', () => {
-      const elementRef = jest.fn();
+      const elementRef = vi.fn();
       const _render4 = render( /*#__PURE__*/React.createElement(SmallViewportModeWrapper, null, getActionItems({
           actionItemsCount: 6,
           actionItemsProps: {
@@ -222,7 +225,6 @@ describe('<TopNavBarActionItems />', () => {
   });
   describe('item types:', () => {
     it('should not allow avatars', () => {
-      const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
       render(getActionItems({
         actionItemsCount: 1,
         actionItemsItemProps: {
@@ -230,11 +232,9 @@ describe('<TopNavBarActionItems />', () => {
         }
       }));
       const expectedErrorMessage = 'Warning: Items in <TopNavBar.ActionItems> are not allowed to have avatars, please remove it from item with the id "Search".';
-      expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-      consoleWarningSpy.mockRestore();
+      expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
     });
     it('should render items without icons in smallViewport mode', () => {
-      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
       const _render10 = render( /*#__PURE__*/React.createElement(SmallViewportModeWrapper, null, getActionItems({
           actionItemsCount: 6,
           actionItemsItemProps: id => id === 'Search' ? {
@@ -248,8 +248,7 @@ describe('<TopNavBarActionItems />', () => {
       const expectedErrorMessage = 'Warning: Items in <TopNavBar.ActionItems> are required to have the `renderIcon` prop, because only the icons are displayed due to the lack of space. Please add an icon to the item with the id "Search".';
       expect(listItems.length).toEqual(5);
       expect(icons.length).toEqual(5);
-      expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-      consoleErrorSpy.mockRestore();
+      expect(consoleErrorMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
     });
     it('should be converted to icon variant in smallViewport mode', () => {
       const _render11 = render( /*#__PURE__*/React.createElement(SmallViewportModeWrapper, null, getActionItems({
@@ -290,7 +289,4 @@ describe('<TopNavBarActionItems />', () => {
       expect(axeCheck).toBe(true);
     });
   });
-  afterAll(() => {
-    global.ResizeObserver = originalResizeObserver;
-  });
 });

package/es/TopNavBar/TopNavBarBreadcrumb/__new-tests__/TopNavBarBreadcrumb.test.js

@@ -25,6 +25,7 @@ var _Breadcrumb, _BaseExample, _BaseExample2, _BaseExample3, _BaseExample4;
 
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
+import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 
 // eslint-disable-next-line no-restricted-imports
@@ -32,31 +33,20 @@ import { runAxeCheck } from '@instructure/ui-axe-check';
 import { TopNavBarBreadcrumb } from '../index';
 import { Breadcrumb } from '@instructure/ui-breadcrumb';
 import TopNavBarContext from '../../TopNavBarContext';
-let originalResizeObserver;
 let originalMatchMedia;
 beforeAll(() => {
-  originalResizeObserver = global.ResizeObserver;
   originalMatchMedia = window.matchMedia;
-  class MockResizeObserver {
-    constructor() {
-      this.observe = jest.fn();
-      this.unobserve = jest.fn();
-      this.disconnect = jest.fn();
-    }
-  }
-  global.ResizeObserver = MockResizeObserver;
-  window.matchMedia = jest.fn().mockImplementation(query => {
+  window.matchMedia = vi.fn().mockImplementation(query => {
     return {
       matches: false,
       media: query,
       onchange: null,
-      addListener: jest.fn(),
-      removeListener: jest.fn()
+      addListener: vi.fn(),
+      removeListener: vi.fn()
     };
   });
 });
 afterAll(() => {
-  global.ResizeObserver = originalResizeObserver;
   window.matchMedia = originalMatchMedia;
 });
 const TEST_BREADCRUMB_LABEL = 'You are here:';
@@ -81,6 +71,17 @@ BaseExample.defaultProps = {
   onClick: () => {}
 };
 describe('<TopNavBarBreadcrumb />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
   it('should render', () => {
     const _render = render(_BaseExample || (_BaseExample = /*#__PURE__*/React.createElement(BaseExample, {
         inverseColor: true,
@@ -91,7 +92,6 @@ describe('<TopNavBarBreadcrumb />', () => {
     expect(element).toBeInTheDocument();
   });
   it('should warn if inverseColor is false', () => {
-    const consoleMock = jest.spyOn(console, 'error').mockImplementation();
     const _render2 = render(_BaseExample2 || (_BaseExample2 = /*#__PURE__*/React.createElement(BaseExample, {
         inverseColor: false,
         layout: "desktop"
@@ -99,7 +99,7 @@ describe('<TopNavBarBreadcrumb />', () => {
       queryByLabelText = _render2.queryByLabelText;
     const element = queryByLabelText(TEST_BREADCRUMB_LABEL);
     expect(element).not.toBeInTheDocument();
-    expect(consoleMock.mock.calls[0][0]).toEqual('Warning: [TopNavBarBreadcrumb] If the inverseColor prop is not set to true, TopNavBarBreadcrumb fails to render.');
+    expect(consoleErrorMock.mock.calls[0][0]).toEqual('Warning: [TopNavBarBreadcrumb] If the inverseColor prop is not set to true, TopNavBarBreadcrumb fails to render.');
   });
   it('should render last but one crumb in smallViewPort mode', () => {
     const _render3 = render(_BaseExample3 || (_BaseExample3 = /*#__PURE__*/React.createElement(BaseExample, {
@@ -119,7 +119,7 @@ describe('<TopNavBarBreadcrumb />', () => {
     expect(page5).not.toBeInTheDocument();
   });
   it('should fire onClick', () => {
-    const onClick = jest.fn();
+    const onClick = vi.fn();
     const _render4 = render( /*#__PURE__*/React.createElement(BaseExample, {
         inverseColor: true,
         layout: "desktop",

package/es/TopNavBar/TopNavBarItem/__new-tests__/TopNavBarItem.test.js

@@ -25,6 +25,7 @@ var _TopNavBarItem, _TopNavBarItem2, _TopNavBarItem3, _TopNavBarItem4, _TopNavBa
 
 import React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 
@@ -39,6 +40,17 @@ import { avatarExample, SmallViewportModeWrapper, itemSubmenuExample, getCustomP
 const ITEM_TEXT = 'Menu Item';
 const variants = ['default', 'button', 'icon', 'avatar'];
 describe('<TopNavBarItem />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
   describe('variant prop', () => {
     // TODO convert to e2e
     // describe('should have "inverse" color focus ring', () => {
@@ -163,14 +175,12 @@ describe('<TopNavBarItem />', () => {
     });
     describe('with "icon" variant', () => {
       it('should throw error if no icon is provided', () => {
-        const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
         render(_TopNavBarItem3 || (_TopNavBarItem3 = /*#__PURE__*/React.createElement(TopNavBarItem, {
           id: "item",
           variant: "icon"
         }, "Menu Item")));
         const expectedErrorMessage = 'The "renderIcon" prop is required for the `variant="icon"` type <TopNavBar.Item> components, but the item with id "item" is missing it.';
-        expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-        consoleErrorSpy.mockRestore();
+        expect(consoleErrorMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
       });
       it('should render the icon', () => {
         const _render3 = render(_TopNavBarItem4 || (_TopNavBarItem4 = /*#__PURE__*/React.createElement(TopNavBarItem, {
@@ -212,7 +222,6 @@ describe('<TopNavBarItem />', () => {
       // })
 
       it('should not allow the "renderAvatar" prop', () => {
-        const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
         const _render5 = render(_TopNavBarItem6 || (_TopNavBarItem6 = /*#__PURE__*/React.createElement(TopNavBarItem, {
             id: "item",
             variant: "icon",
@@ -223,10 +232,9 @@ describe('<TopNavBarItem />', () => {
         const avatar = container.querySelector("[class$='inlineBlock-avatar']");
         const icon = container.querySelector('svg');
         const expectedErrorMessage = 'Warning: <TopNavBar.Item> components with icons cannot display avatars, so the "renderAvatar" config prop will be ignored for item with id "item".';
-        expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
+        expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
         expect(avatar).not.toBeInTheDocument();
         expect(icon).toBeVisible();
-        consoleWarningSpy.mockRestore();
       });
 
       // TODO convert to e2e
@@ -248,7 +256,6 @@ describe('<TopNavBarItem />', () => {
     });
     describe('with "avatar" variant', () => {
       it('should throw error if no avatar is provided', () => {
-        const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
         const _render6 = render(_TopNavBarItem7 || (_TopNavBarItem7 = /*#__PURE__*/React.createElement(TopNavBarItem, {
             id: "item",
             variant: "avatar"
@@ -256,12 +263,10 @@ describe('<TopNavBarItem />', () => {
           container = _render6.container;
         const avatar = container.querySelector("[class$='inlineBlock-avatar']");
         const expectedErrorMessage = `Warning: The "renderAvatar" config is required for the 'variant="avatar"' type <TopNavBar.Item> components, but received none for the item with id "item".`;
-        expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
+        expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
         expect(avatar).not.toBeInTheDocument();
-        consoleWarningSpy.mockRestore();
       });
       it('should throw error if no "renderAvatar.avatarName" is provided', () => {
-        const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
         const _render7 = render(
           /*#__PURE__*/
           // @ts-expect-error We are passing it incorrectly on purpose
@@ -273,9 +278,8 @@ describe('<TopNavBarItem />', () => {
           container = _render7.container;
         const avatar = container.querySelector("[class$='inlineBlock-avatar']");
         const expectedErrorMessage = `Warning: The "avatarName" prop is required for for <TopNavBar.Item> components with avatar, but the item with id "item" is missing it.`;
-        expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
+        expect(consoleErrorMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
         expect(avatar).not.toBeInTheDocument();
-        consoleErrorSpy.mockRestore();
       });
       it('should render the avatar', () => {
         const _render8 = render(_TopNavBarItem8 || (_TopNavBarItem8 = /*#__PURE__*/React.createElement(TopNavBarItem, {
@@ -308,7 +312,6 @@ describe('<TopNavBarItem />', () => {
       // })
 
       it('should have either string type "children" or "avatarAlt"', () => {
-        const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
         render( /*#__PURE__*/React.createElement(SmallViewportModeWrapper, null, /*#__PURE__*/React.createElement(TopNavBarItem, {
           id: "item",
           variant: "avatar",
@@ -318,8 +321,7 @@ describe('<TopNavBarItem />', () => {
           }
         }, _span || (_span = /*#__PURE__*/React.createElement("span", null, "Text")))));
         const expectedErrorMessage = 'Warning: Please supply a label for the avatar with either the "renderAvatar.avatarAlt" or the "children" (as string) prop. It is needed for screen reader support, but missing on the item with the id: "item".';
-        expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-        consoleWarningSpy.mockRestore();
+        expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
       });
     });
   });
@@ -377,7 +379,6 @@ describe('<TopNavBarItem />', () => {
       variants.forEach(variant => {
         const isDefaultVariant = variant === 'default';
         it(`should be${!isDefaultVariant ? ' not' : ''} allowed for "${variant}" variant items`, () => {
-          const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
           render( /*#__PURE__*/React.createElement(TopNavBarItem, {
             id: "item",
             variant: variant,
@@ -391,34 +392,29 @@ describe('<TopNavBarItem />', () => {
           // const activeIndicatorStyle = await component.getActiveIndicatorStyle()
 
           if (isDefaultVariant) {
-            expect(consoleWarningSpy).not.toHaveBeenCalled();
+            expect(consoleWarningMock).not.toHaveBeenCalled();
             // expect(activeIndicatorStyle?.backgroundColor).to.equal('rgb(255, 255, 255)')
-            consoleWarningSpy.mockRestore();
           } else {
             const expectedErrorMessage = `Warning: Only \`variant="default"\` <TopNavBar.Item> components can be set to active, but item with id "item" has variant: "${variant}".`;
-            expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
+            expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
             // expect(activeIndicatorStyle?.backgroundColor).to.equal('rgba(0, 0, 0, 0)')
-
-            consoleWarningSpy.mockRestore();
           }
         });
       });
       it('should not be allowed with avatar + text items', () => {
-        const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
         render(_TopNavBarItem9 || (_TopNavBarItem9 = /*#__PURE__*/React.createElement(TopNavBarItem, {
           id: "item",
           status: "active",
           renderAvatar: avatarExample
         }, "Menu Item")));
         const expectedErrorMessage = `Warning: <TopNavBar.Item> components with avatar cannot have "active" status, so the "active" status on the item with id "item" will be ignored.`;
-        expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
+        expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
 
         // TODO convert to e2e
         // const activeIndicatorStyle = await component.getActiveIndicatorStyle()
         // expect(activeIndicatorStyle?.backgroundColor).to.equal(
         //   'rgba(0, 0, 0, 0)'
         // )
-        consoleWarningSpy.mockRestore();
       });
     });
     describe('with "disabled" status', () => {
@@ -462,7 +458,6 @@ describe('<TopNavBarItem />', () => {
   });
   describe('renderSubmenu prop', () => {
     it('should not accept non-Drilldown elements', () => {
-      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
       const _render11 = render(_TopNavBarItem11 || (_TopNavBarItem11 = /*#__PURE__*/React.createElement(TopNavBarItem, {
           id: "item",
           renderSubmenu: /*#__PURE__*/React.createElement("div", null, "submenu")
@@ -470,8 +465,7 @@ describe('<TopNavBarItem />', () => {
         container = _render11.container;
       const submenuTrigger = container.querySelector("[class$='submenuTriggerContainer']");
       expect(submenuTrigger).not.toBeInTheDocument();
-      expect(consoleErrorSpy).toHaveBeenCalled();
-      consoleErrorSpy.mockRestore();
+      expect(consoleErrorMock).toHaveBeenCalled();
     });
     it('should render submenu', async () => {
       const _render12 = render(_TopNavBarItem12 || (_TopNavBarItem12 = /*#__PURE__*/React.createElement(TopNavBarItem, {
@@ -502,12 +496,11 @@ describe('<TopNavBarItem />', () => {
       });
     });
     it('should throw warning about controlled Drilldown', () => {
-      const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
       render( /*#__PURE__*/React.createElement(TopNavBarItem, {
         id: "item",
         renderSubmenu: /*#__PURE__*/React.createElement(Drilldown, {
           rootPageId: "root",
-          onToggle: jest.fn(),
+          onToggle: vi.fn(),
           show: true
         }, _Drilldown$Page || (_Drilldown$Page = /*#__PURE__*/React.createElement(Drilldown.Page, {
           id: "root"
@@ -517,11 +510,9 @@ describe('<TopNavBarItem />', () => {
         }, "Link One"))))
       }, "Menu Item"));
       const expectedErrorMessage = `Warning: TopNavBar.Item Drilldown submenus are controlled by the component. The "show" prop will be ignored on the submenu of the item with id: "item".`;
-      expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-      consoleWarningSpy.mockRestore();
+      expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
     });
     it('should throw warning when trigger is passed to Drilldown', () => {
-      const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
       render(_TopNavBarItem13 || (_TopNavBarItem13 = /*#__PURE__*/React.createElement(TopNavBarItem, {
         id: "item",
         renderSubmenu: /*#__PURE__*/React.createElement(Drilldown, {
@@ -535,8 +526,7 @@ describe('<TopNavBarItem />', () => {
         }, "Link One")))
       }, "Menu Item")));
       const expectedErrorMessage = `Warning: TopNavBar.Item submenus have the item itself as their trigger. The "trigger" prop will be ignored on the Drilldown submenu of item with id: "item".`;
-      expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-      consoleWarningSpy.mockRestore();
+      expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
     });
     it('should open on ArrowDown', async () => {
       const _render13 = render(_TopNavBarItem14 || (_TopNavBarItem14 = /*#__PURE__*/React.createElement(TopNavBarItem, {
@@ -588,7 +578,6 @@ describe('<TopNavBarItem />', () => {
       expect(popoverContent).toBeInTheDocument();
     });
     it('should throw error when passed to item with submenu', () => {
-      const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
       render( /*#__PURE__*/React.createElement(TopNavBarItem, {
         id: "item",
         renderSubmenu: itemSubmenuExample,
@@ -598,11 +587,9 @@ describe('<TopNavBarItem />', () => {
       expect(button).toHaveAttribute('aria-haspopup', 'menu');
       expect(button).toHaveAttribute('aria-expanded', 'false');
       const expectedErrorMessage = `Warning: TopNavBar.Items are not allowed to have both the "renderSubmenu" and "customPopoverConfig" props. For submenus, pass a Drilldown component via the "renderSubmenu" prop, and only use "customPopoverConfig" for custom features. Item with id: "item" will ignore the "customPopoverConfig" prop.`;
-      expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-      consoleWarningSpy.mockRestore();
+      expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
     });
     it('should throw warning when no content is passed', () => {
-      const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
       const _render14 = render( /*#__PURE__*/React.createElement(TopNavBarItem, {
           id: "item",
           customPopoverConfig: getCustomPopoverConfig(false, {
@@ -613,11 +600,9 @@ describe('<TopNavBarItem />', () => {
       const customElementInitialPopover = container.querySelector("span[class$='-position']");
       expect(customElementInitialPopover).not.toBeInTheDocument();
       const expectedErrorMessage = `Warning: Pass the content of the custom Popover as "customPopoverConfig.children" for the item with id: "item".`;
-      expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-      consoleWarningSpy.mockRestore();
+      expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
     });
     it('should throw warning when renderTrigger is passed in the config', () => {
-      const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
       render( /*#__PURE__*/React.createElement(TopNavBarItem, {
         id: "item",
         customPopoverConfig: getCustomPopoverConfig(false, {
@@ -626,8 +611,7 @@ describe('<TopNavBarItem />', () => {
         })
       }, "Menu Item"));
       const expectedErrorMessage = `Warning: TopNavBar.Item popovers have the item itself as their trigger. The "renderTrigger" prop will be ignored on the popover of item with id: "item".`;
-      expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-      consoleWarningSpy.mockRestore();
+      expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
     });
     describe('should not put aria-expanded on the popover trigger, just the button', () => {
       it('when popover `shouldContainFocus="true"`', async () => {
@@ -1021,7 +1005,6 @@ describe('<TopNavBarItem />', () => {
     });
     describe('throws warning', () => {
       it('when not passed to "avatar" variant', () => {
-        const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
         const _render28 = render(_TopNavBarItem20 || (_TopNavBarItem20 = /*#__PURE__*/React.createElement(TopNavBarItem, {
             id: "item",
             variant: "avatar"
@@ -1030,11 +1013,9 @@ describe('<TopNavBarItem />', () => {
         const avatar = container.querySelector("span[class$='inlineBlock-avatar']");
         expect(avatar).not.toBeInTheDocument();
         const expectedErrorMessage = `Warning: The "renderAvatar" config is required for the 'variant="avatar"' type <TopNavBar.Item> components, but received none for the item with id "item".`;
-        expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-        consoleWarningSpy.mockRestore();
+        expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
       });
       it('when passed to item with "renderIcon"', () => {
-        const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
         const _render29 = render(_TopNavBarItem21 || (_TopNavBarItem21 = /*#__PURE__*/React.createElement(TopNavBarItem, {
             id: "item",
             renderIcon: IconSearchLine,
@@ -1044,11 +1025,9 @@ describe('<TopNavBarItem />', () => {
         const avatar = container.querySelector("span[class$='inlineBlock-avatar']");
         expect(avatar).not.toBeInTheDocument();
         const expectedErrorMessage = `Warning: <TopNavBar.Item> components with icons cannot display avatars, so the "renderAvatar" config prop will be ignored for item with id "item".`;
-        expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-        consoleWarningSpy.mockRestore();
+        expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
       });
       it('when passed to item with "active" status', () => {
-        const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
         const _render30 = render(_TopNavBarItem22 || (_TopNavBarItem22 = /*#__PURE__*/React.createElement(TopNavBarItem, {
             id: "item",
             renderAvatar: avatarExample,
@@ -1058,7 +1037,7 @@ describe('<TopNavBarItem />', () => {
         const avatar = container.querySelector("span[class$='inlineBlock-avatar']");
         expect(avatar).toBeInTheDocument();
         const expectedErrorMessage = `Warning: <TopNavBar.Item> components with avatar cannot have "active" status, so the "active" status on the item with id "item" will be ignored.`;
-        expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
+        expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
 
         // TODO convert to e2e
         // topNavBarItem__container ::after
@@ -1066,11 +1045,8 @@ describe('<TopNavBarItem />', () => {
         // expect(activeIndicatorStyle?.backgroundColor).to.equal(
         //     'rgba(0, 0, 0, 0)'
         // )
-
-        consoleWarningSpy.mockRestore();
       });
       it('when there is no string type "children" or "avatarAlt" passed', () => {
-        const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
         const _render31 = render( /*#__PURE__*/React.createElement(TopNavBarItem, {
             id: "item",
             renderAvatar: {
@@ -1082,8 +1058,7 @@ describe('<TopNavBarItem />', () => {
         const avatar = container.querySelector("span[class$='inlineBlock-avatar']");
         expect(avatar).toBeInTheDocument();
         const expectedErrorMessage = `Warning: Please supply a label for the avatar with either the "renderAvatar.avatarAlt" or the "children" (as string) prop. It is needed for screen reader support, but missing on the item with the id: "item".`;
-        expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-        consoleWarningSpy.mockRestore();
+        expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
       });
     });
   });
@@ -1189,7 +1164,6 @@ describe('<TopNavBarItem />', () => {
       expect(button).toHaveAttribute('href', '/#TopNavBar');
     });
     it('should not be allowed for items with submenu', () => {
-      const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
       const _render38 = render(_TopNavBarItem27 || (_TopNavBarItem27 = /*#__PURE__*/React.createElement(TopNavBarItem, {
           id: "item",
           href: "/#TopNavBar",
@@ -1200,22 +1174,21 @@ describe('<TopNavBarItem />', () => {
       expect(button.tagName).toBe('BUTTON');
       expect(button).not.toHaveAttribute('href');
       const expectedErrorMessage = `Warning: TopNavBar.Items with submenus are not allowed to have 'href' property, but received href "/#TopNavBar" for item with the id: "item".`;
-      expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-      consoleWarningSpy.mockRestore();
+      expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
     });
   });
   describe('onClick prop', () => {
     it('should render item as button', () => {
       render( /*#__PURE__*/React.createElement(TopNavBarItem, {
         id: "item",
-        onClick: jest.fn()
+        onClick: vi.fn()
       }, "Menu Item"));
       const button = screen.getByRole('button');
       expect(button).toBeInTheDocument();
       expect(button.tagName).toBe('BUTTON');
     });
     it('should fire onClick on click', () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
       render( /*#__PURE__*/React.createElement(TopNavBarItem, {
         id: "item",
         onClick: onClick
@@ -1225,7 +1198,7 @@ describe('<TopNavBarItem />', () => {
       expect(onClick).toHaveBeenCalled();
     });
     it('should work combined with "href" prop', () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
       const _render39 = render( /*#__PURE__*/React.createElement(TopNavBarItem, {
           id: "item",
           onClick: onClick,
@@ -1237,8 +1210,7 @@ describe('<TopNavBarItem />', () => {
       expect(button).toHaveAttribute('href', '/#TopNavBar');
     });
     it('should not be allowed for items with submenu', () => {
-      const onClick = jest.fn();
-      const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      const onClick = vi.fn();
       render( /*#__PURE__*/React.createElement(TopNavBarItem, {
         id: "item",
         onClick: onClick,
@@ -1248,13 +1220,12 @@ describe('<TopNavBarItem />', () => {
       fireEvent.click(button);
       expect(onClick).not.toHaveBeenCalled();
       const expectedErrorMessage = `Warning: TopNavBar.Items with submenus are not allowed to have 'onClick' property, but received onClick for item with the id: "item".Use the \`onSubmenuToggle\` prop instead. OnClick:`;
-      expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-      consoleWarningSpy.mockRestore();
+      expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
     });
   });
   describe('onSubmenuToggle prop', () => {
     it('should be called on submenu toggle', () => {
-      const onSubmenuToggle = jest.fn();
+      const onSubmenuToggle = vi.fn();
       render( /*#__PURE__*/React.createElement(TopNavBarItem, {
         id: "item",
         onSubmenuToggle: onSubmenuToggle,
@@ -1277,8 +1248,8 @@ describe('<TopNavBarItem />', () => {
   });
   describe('other event handlers', () => {
     it('onMouseOver and onMouseOut should be called', () => {
-      const onMouseOver = jest.fn();
-      const onMouseOut = jest.fn();
+      const onMouseOver = vi.fn();
+      const onMouseOut = vi.fn();
       render( /*#__PURE__*/React.createElement(TopNavBarItem, {
         id: "item",
         onMouseOver: onMouseOver,
@@ -1291,8 +1262,8 @@ describe('<TopNavBarItem />', () => {
       expect(onMouseOut).toHaveBeenCalled();
     });
     it('onFocus and onBlur should be called', () => {
-      const onFocus = jest.fn();
-      const onBlur = jest.fn();
+      const onFocus = vi.fn();
+      const onBlur = vi.fn();
       render( /*#__PURE__*/React.createElement(TopNavBarItem, {
         id: "item",
         onFocus: onFocus,
@@ -1305,8 +1276,8 @@ describe('<TopNavBarItem />', () => {
       expect(onBlur).toHaveBeenCalled();
     });
     it('onKeyDown and onKeyUp should be called', () => {
-      const onKeyDown = jest.fn();
-      const onKeyUp = jest.fn();
+      const onKeyDown = vi.fn();
+      const onKeyUp = vi.fn();
       render( /*#__PURE__*/React.createElement(TopNavBarItem, {
         id: "item",
         onKeyDown: onKeyDown,
@@ -1325,7 +1296,7 @@ describe('<TopNavBarItem />', () => {
   });
   describe('refs', () => {
     it('elementRef should return root element', () => {
-      const elementRef = jest.fn();
+      const elementRef = vi.fn();
       const _render40 = render( /*#__PURE__*/React.createElement(TopNavBarItem, {
           id: "item",
           elementRef: elementRef
@@ -1335,7 +1306,7 @@ describe('<TopNavBarItem />', () => {
       expect(elementRef).toHaveBeenCalledWith(topNavBarItem);
     });
     it('itemRef should return the button element', () => {
-      const itemRef = jest.fn();
+      const itemRef = vi.fn();
       render( /*#__PURE__*/React.createElement(TopNavBarItem, {
         id: "item",
         itemRef: itemRef