@axinom/mosaic-ui 0.69.0-rc.2 → 0.69.0-rc.21

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.spec.tsx

@@ -1,10 +1,10 @@
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { Link, BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { describe, expect, it, vi } from 'vitest';
 import { noop } from '../../../helpers/utils';
-import { TextButton } from '../../Buttons';
-import { ConfirmDialog, ConfirmationConfig } from '../../ConfirmDialog';
+import { ConfirmationConfig } from '../../ConfirmDialog';
 import { IconName } from '../../Icons';
 import {
   PageHeaderAction,
@@ -24,25 +24,25 @@ const defaultProps: PageHeaderActionProps = {
 describe('PageHeaderAction', () => {
   describe('PageHeaderJSAction', () => {
     it('renders the component without crashing', () => {
-      const wrapper = shallow(<PageHeaderAction {...defaultProps} />);
+      const { container } = render(<PageHeaderAction {...defaultProps} />);
 
-      expect(wrapper).toBeTruthy();
+      expect(container).toBeTruthy();
     });
 
     it('renders a label', () => {
       const mockLabel = 'test-label';
-      const wrapper = mount(
+      const { container } = render(
         <PageHeaderAction {...defaultProps} label={mockLabel} />,
       );
 
-      const label = wrapper.find('span');
+      const label = container.querySelector('span');
 
-      expect(label.text()).toBe(mockLabel);
+      expect(label?.textContent).toBe(mockLabel);
     });
 
     it('renders a Icon, if set', () => {
       const mockLabel = 'test-label';
-      const wrapper = mount(
+      const { container } = render(
         <PageHeaderAction
           {...defaultProps}
           label={mockLabel}
@@ -50,14 +50,14 @@ describe('PageHeaderAction', () => {
         />,
       );
 
-      const Icon = wrapper.find('.icons');
+      const Icon = container.querySelector('.icons');
 
-      expect(Icon.exists()).toBe(true);
+      expect(Icon).toBeInTheDocument();
     });
 
     it('image is used instead of icon if icon prop is a string', () => {
       const mockLabel = 'test-label';
-      const wrapper = mount(
+      const { container } = render(
         <PageHeaderAction
           {...defaultProps}
           label={mockLabel}
@@ -66,27 +66,29 @@ describe('PageHeaderAction', () => {
         />,
       );
 
-      const Icon = wrapper.find('.icons');
+      const Icon = container.querySelector('.icons');
 
-      expect(Icon.exists()).toBe(false);
+      expect(Icon).not.toBeInTheDocument();
     });
 
     it('raises onActionSelected', () => {
-      const spy = jest.fn();
-      const wrapper = mount(
+      const spy = vi.fn();
+      const { container } = render(
         <PageHeaderAction {...defaultProps} onClick={spy} />,
       );
 
-      const container = wrapper.find('.container');
-      container.simulate('click');
+      const actionContainer = container.querySelector(
+        '.container',
+      ) as HTMLElement;
+      fireEvent.click(actionContainer);
 
       expect(spy).toHaveBeenCalledTimes(1);
     });
 
     describe('confirmation', () => {
       it(`'Simple' mode changes the background color when clicked for the first time`, () => {
-        const spy = jest.fn();
-        const wrapper = mount(
+        const spy = vi.fn();
+        const { container } = render(
           <PageHeaderAction
             {...defaultProps}
             label={'test-label'}
@@ -94,22 +96,23 @@ describe('PageHeaderAction', () => {
             onClick={spy}
           />,
         );
-        let container = wrapper.find('.container');
-        expect(container.hasClass('hasConfirm')).toBe(false);
+        let actionContainer = container.querySelector(
+          '.container',
+        ) as HTMLElement;
+        expect(actionContainer.classList.contains('hasConfirm')).toBe(false);
 
-        wrapper.simulate('click');
-        wrapper.update();
+        fireEvent.click(actionContainer);
 
-        container = wrapper.find('.container');
+        actionContainer = container.querySelector('.container') as HTMLElement;
 
-        expect(container.hasClass('hasConfirm')).toBe(true);
+        expect(actionContainer.classList.contains('hasConfirm')).toBe(true);
       });
 
       it(`'Simple' mode renders a confirmation message, raises the 'onClick' event after confirmation, and resets the action label`, () => {
         const mockLabel = 'test-label';
         const confirmationMsg = 'Click again to confirm';
-        const spy = jest.fn();
-        const wrapper = mount(
+        const spy = vi.fn();
+        const { container } = render(
           <PageHeaderAction
             {...defaultProps}
             label={mockLabel}
@@ -118,31 +121,34 @@ describe('PageHeaderAction', () => {
           />,
         );
 
-        let span = wrapper.find('span');
+        let span = container.querySelector('span') as HTMLElement;
 
-        expect(span.text()).toBe(mockLabel);
+        expect(span.textContent).toBe(mockLabel);
 
-        wrapper.simulate('click');
+        const actionContainer = container.querySelector(
+          '.container',
+        ) as HTMLElement;
+        fireEvent.click(actionContainer);
 
-        span = wrapper.find('span');
+        span = container.querySelector('span') as HTMLElement;
 
-        expect(span.text()).toBe(confirmationMsg);
+        expect(span.textContent).toBe(confirmationMsg);
 
-        wrapper.simulate('click');
+        fireEvent.click(actionContainer);
 
-        span = wrapper.find('span');
+        span = container.querySelector('span') as HTMLElement;
 
         expect(spy).toHaveBeenCalledTimes(1);
-        expect(span.text()).toBe(mockLabel);
+        expect(span.textContent).toBe(mockLabel);
       });
 
       it(`'Simple' mode renders a confirmation message, and doesn't raise the 'onClick' event on 'mouseleave' when confirmation is required`, async () => {
         const mockLabel = 'test-label';
         const confirmationMsg = 'Click again to confirm';
-        const spy = jest.fn();
-        jest.useFakeTimers();
+        const spy = vi.fn();
+        vi.useFakeTimers();
 
-        const wrapper = mount(
+        const { container } = render(
           <PageHeaderAction
             {...defaultProps}
             label={mockLabel}
@@ -151,39 +157,42 @@ describe('PageHeaderAction', () => {
           />,
         );
 
+        const actionContainer = container.querySelector(
+          '.container',
+        ) as HTMLElement;
+
         await act(async () => {
-          wrapper.simulate('click');
+          fireEvent.click(actionContainer);
         });
-        wrapper.update();
 
-        let span = wrapper.find('span');
-        let container = wrapper.find('.container');
+        let span = container.querySelector('span') as HTMLElement;
+        let containerElement = container.querySelector(
+          '.container',
+        ) as HTMLElement;
 
-        expect(container.hasClass('hasConfirm')).toBe(true);
-        expect(span.text()).toBe(confirmationMsg);
+        expect(containerElement.classList.contains('hasConfirm')).toBe(true);
+        expect(span.textContent).toBe(confirmationMsg);
         expect(spy).not.toHaveBeenCalled();
 
         await act(async () => {
-          await wrapper.simulate('mouseleave');
+          fireEvent.mouseLeave(actionContainer);
         });
-        wrapper.update();
 
         await act(async () => {
-          jest.runAllTimers();
+          vi.runAllTimers();
         });
-        wrapper.update();
 
-        span = wrapper.find('span');
-        container = wrapper.find('.container');
+        span = container.querySelector('span') as HTMLElement;
+        containerElement = container.querySelector('.container') as HTMLElement;
 
-        expect(span.text()).toBe(mockLabel);
+        expect(span.textContent).toBe(mockLabel);
         expect(spy).not.toHaveBeenCalled();
-        expect(container.hasClass('hasConfirm')).toBe(false);
+        expect(containerElement.classList.contains('hasConfirm')).toBe(false);
       });
 
       it(`'Advanced' mode changes the background color when clicked for the first time`, async () => {
-        const spy = jest.fn();
-        const wrapper = mount(
+        const spy = vi.fn();
+        const { container } = render(
           <PageHeaderAction
             {...defaultProps}
             label={'test-label'}
@@ -191,22 +200,23 @@ describe('PageHeaderAction', () => {
             onClick={spy}
           />,
         );
-        let container = wrapper.find('.container').first();
-        expect(container.hasClass('hasConfirm')).toBe(false);
+        let actionContainer = container.querySelector(
+          '.container',
+        ) as HTMLElement;
+        expect(actionContainer.classList.contains('hasConfirm')).toBe(false);
 
         await act(async () => {
-          await wrapper.simulate('click');
+          fireEvent.click(actionContainer);
         });
-        wrapper.update();
 
-        container = wrapper.find('.container').first();
+        actionContainer = container.querySelector('.container') as HTMLElement;
 
-        expect(container.hasClass('hasConfirm')).toBe(true);
+        expect(actionContainer.classList.contains('hasConfirm')).toBe(true);
       });
 
       it(`'Advanced' mode confirmation pop up, raises the 'onClick' event after the 'Confirm' button is clicked, and finally dismisses the confirmation pop up`, async () => {
-        const spy = jest.fn();
-        const wrapper = mount(
+        const spy = vi.fn();
+        const { container } = render(
           <PageHeaderAction
             {...defaultProps}
             label={'test-label'}
@@ -214,35 +224,45 @@ describe('PageHeaderAction', () => {
             onClick={spy}
           />,
         );
-        let confirmation = wrapper.find(ConfirmDialog);
+        let confirmation = container.querySelector('.confirmDialog');
+
+        expect(confirmation).not.toBeInTheDocument();
 
-        expect(confirmation.exists()).toBe(false);
+        const actionContainer = container.querySelector(
+          '.container',
+        ) as HTMLElement;
 
         await act(async () => {
-          await wrapper.simulate('click');
+          fireEvent.click(actionContainer);
         });
-        wrapper.update();
-
-        confirmation = wrapper.find(ConfirmDialog);
 
-        expect(confirmation.exists()).toBe(true);
+        await waitFor(() => {
+          confirmation = document.querySelector('.confirm-dialog-container');
+          expect(confirmation).toBeInTheDocument();
+        });
 
-        const confirmButton = wrapper.find(TextButton).last();
+        const confirmButton = document.querySelector(
+          '[data-test-id="confirm"]',
+        ) as HTMLButtonElement;
 
         act(() => {
-          confirmButton.simulate('click');
+          fireEvent.click(confirmButton);
         });
-        wrapper.update();
 
-        confirmation = wrapper.find(ConfirmDialog);
+        await waitFor(
+          () => {
+            confirmation = document.querySelector('.confirm-dialog-container');
+            expect(confirmation).not.toBeInTheDocument();
+          },
+          { timeout: 1000 },
+        );
 
-        expect(confirmation.exists()).toBe(false);
         expect(spy).toHaveBeenCalledTimes(1);
       });
 
       it(`'Advanced' mode confirmation pop up, does not raise the 'onClick' event after the 'Cancel' button is clicked, and finally dismisses the confirmation pop up`, async () => {
-        const spy = jest.fn();
-        const wrapper = mount(
+        const spy = vi.fn();
+        const { container } = render(
           <PageHeaderAction
             {...defaultProps}
             label={'test-label'}
@@ -250,37 +270,47 @@ describe('PageHeaderAction', () => {
             onClick={spy}
           />,
         );
-        let confirmation = wrapper.find(ConfirmDialog);
+        let confirmation = container.querySelector('.confirmDialog');
+
+        expect(confirmation).not.toBeInTheDocument();
 
-        expect(confirmation.exists()).toBe(false);
+        const actionContainer = container.querySelector(
+          '.container',
+        ) as HTMLElement;
 
         await act(async () => {
-          await wrapper.simulate('click');
+          fireEvent.click(actionContainer);
         });
-        wrapper.update();
 
-        confirmation = wrapper.find(ConfirmDialog);
-
-        expect(confirmation.exists()).toBe(true);
+        await waitFor(() => {
+          confirmation = document.querySelector('.confirm-dialog-container');
+          expect(confirmation).toBeInTheDocument();
+        });
 
-        const confirmButton = wrapper.find(TextButton).first();
+        const cancelButton = document.querySelector(
+          '[data-test-id="cancel"]',
+        ) as HTMLButtonElement;
 
         act(() => {
-          confirmButton.simulate('click');
+          fireEvent.click(cancelButton);
         });
-        wrapper.update();
 
-        confirmation = wrapper.find(ConfirmDialog);
+        await waitFor(
+          () => {
+            confirmation = document.querySelector('.confirm-dialog-container');
+            expect(confirmation).not.toBeInTheDocument();
+          },
+          { timeout: 1000 },
+        );
 
-        expect(confirmation.exists()).toBe(false);
         expect(spy).not.toHaveBeenCalled();
       });
 
       it(`'Advanced' mode renders a confirmation pop up, does not raise the 'onClick' event when the mouse leaves component, and finally dismisses the confirmation pop up`, async () => {
-        const spy = jest.fn();
-        jest.useFakeTimers();
+        const spy = vi.fn();
+        vi.useFakeTimers();
 
-        const wrapper = mount(
+        const { container } = render(
           <PageHeaderAction
             {...defaultProps}
             label={'test-label'}
@@ -288,33 +318,35 @@ describe('PageHeaderAction', () => {
             onClick={spy}
           />,
         );
-        let confirmation = wrapper.find(ConfirmDialog);
+        let confirmation = container.querySelector('.confirmDialog');
 
-        expect(confirmation.exists()).toBe(false);
+        expect(confirmation).not.toBeInTheDocument();
+
+        const actionContainer = container.querySelector(
+          '.container',
+        ) as HTMLElement;
 
         await act(async () => {
-          await wrapper.simulate('click');
+          fireEvent.click(actionContainer);
         });
-        wrapper.update();
-
-        confirmation = wrapper.find(ConfirmDialog);
 
-        expect(confirmation.exists()).toBe(true);
+        await waitFor(() => {
+          confirmation = document.querySelector('.confirm-dialog-container');
+          expect(confirmation).toBeInTheDocument();
+        });
 
         await act(async () => {
-          await wrapper.simulate('mouseleave');
+          fireEvent.mouseLeave(actionContainer);
         });
-        wrapper.update();
 
         await act(async () => {
-          jest.runAllTimers();
+          vi.runAllTimers();
         });
-        wrapper.update();
 
-        confirmation = wrapper.find(ConfirmDialog);
+        confirmation = container.querySelector('.confirmDialog');
 
         // TODO: Debug why this isn't passing
-        // expect(confirmation.exists()).toBe(false);
+        // expect(confirmation).not.toBeInTheDocument();
         expect(spy).not.toHaveBeenCalled();
       });
 
@@ -326,7 +358,7 @@ describe('PageHeaderAction', () => {
           confirmButtonText: 'test-confirm',
         };
 
-        const wrapper = mount(
+        const { container } = render(
           <PageHeaderAction
             {...defaultProps}
             label={'test-label'}
@@ -335,27 +367,31 @@ describe('PageHeaderAction', () => {
           />,
         );
 
+        const actionContainer = container.querySelector(
+          '.container',
+        ) as HTMLElement;
+
         await act(async () => {
-          await wrapper.simulate('click');
+          fireEvent.click(actionContainer);
         });
-        wrapper.update();
-
-        const confirmation = wrapper.find(ConfirmDialog);
 
-        expect(confirmation.prop('title')).toBe(mockConfig.title);
-        expect(confirmation.prop('children')).toBe(mockConfig.body);
-        expect(confirmation.prop('cancelButtonText')).toBe(
-          mockConfig.cancelButtonText,
-        );
-        expect(confirmation.prop('confirmButtonText')).toBe(
-          mockConfig.confirmButtonText,
-        );
+        await waitFor(() => {
+          const confirmation = document.querySelector(
+            '.confirm-dialog-container',
+          );
+          expect(confirmation).toBeInTheDocument();
+          // Check rendered content instead of props
+          expect(container.textContent).toContain(mockConfig.title);
+          expect(container.textContent).toContain(mockConfig.body);
+          expect(container.textContent).toContain(mockConfig.cancelButtonText);
+          expect(container.textContent).toContain(mockConfig.confirmButtonText);
+        });
       });
 
       it(`'Simple' raises onConfirmOpen if set`, () => {
-        const confirmToggleSpy = jest.fn();
+        const confirmToggleSpy = vi.fn();
 
-        const wrapper = mount(
+        const { container } = render(
           <PageHeaderAction
             {...defaultProps}
             label={'test-label'}
@@ -364,16 +400,20 @@ describe('PageHeaderAction', () => {
           />,
         );
 
+        const actionContainer = container.querySelector(
+          '.container',
+        ) as HTMLElement;
+
         // toggle confirmation on
         act(() => {
-          wrapper.simulate('click');
+          fireEvent.click(actionContainer);
         });
 
         expect(confirmToggleSpy).toHaveBeenCalledTimes(1);
 
         // toggle confirmation off
         act(() => {
-          wrapper.simulate('click');
+          fireEvent.click(actionContainer);
         });
 
         expect(confirmToggleSpy).toHaveBeenCalledTimes(2);
@@ -386,11 +426,11 @@ describe('PageHeaderAction', () => {
       });
 
       it(`'Simple' raises onConfirmOpen when 'mouseleave' if set`, async () => {
-        const confirmToggleSpy = jest.fn();
+        const confirmToggleSpy = vi.fn();
 
-        jest.useFakeTimers();
+        vi.useFakeTimers();
 
-        const wrapper = mount(
+        const { container } = render(
           <PageHeaderAction
             {...defaultProps}
             label={'test-label'}
@@ -399,20 +439,21 @@ describe('PageHeaderAction', () => {
           />,
         );
 
+        const actionContainer = container.querySelector(
+          '.container',
+        ) as HTMLElement;
+
         await act(async () => {
-          wrapper.simulate('click');
+          fireEvent.click(actionContainer);
         });
-        wrapper.update();
 
         await act(async () => {
-          await wrapper.simulate('mouseleave');
+          fireEvent.mouseLeave(actionContainer);
         });
-        wrapper.update();
 
         await act(async () => {
-          jest.runAllTimers();
+          vi.runAllTimers();
         });
-        wrapper.update();
 
         expect(confirmToggleSpy).toHaveBeenCalledTimes(2);
         expect(confirmToggleSpy).toHaveBeenNthCalledWith(1, true, {
@@ -423,10 +464,10 @@ describe('PageHeaderAction', () => {
         });
       });
 
-      it(`'Advanced' raises onConfirmOpen when 'Cancel' is clicked, if set`, () => {
-        const confirmToggleSpy = jest.fn();
+      it(`'Advanced' raises onConfirmOpen when 'Cancel' is clicked, if set`, async () => {
+        const confirmToggleSpy = vi.fn();
 
-        const wrapper = mount(
+        const { container } = render(
           <PageHeaderAction
             {...defaultProps}
             label={'test-label'}
@@ -435,32 +476,48 @@ describe('PageHeaderAction', () => {
           />,
         );
 
+        const actionContainer = container.querySelector(
+          '.container',
+        ) as HTMLElement;
+
         // toggle confirmation on
         act(() => {
-          wrapper.simulate('click');
+          fireEvent.click(actionContainer);
         });
-        wrapper.update();
-
-        const cancelButton = wrapper.find(TextButton).first();
 
-        act(() => {
-          cancelButton.simulate('click');
+        await waitFor(() => {
+          const confirmation = document.querySelector(
+            '.confirm-dialog-container',
+          );
+          expect(confirmation).toBeInTheDocument();
         });
-        wrapper.update();
 
-        expect(confirmToggleSpy).toHaveBeenCalledTimes(2);
+        expect(confirmToggleSpy).toHaveBeenCalledTimes(1);
         expect(confirmToggleSpy).toHaveBeenNthCalledWith(1, true, {
           mode: 'Advanced',
         });
+
+        const cancelButton = document.querySelector(
+          '[data-test-id="cancel"]',
+        ) as HTMLButtonElement;
+
+        act(() => {
+          fireEvent.click(cancelButton);
+        });
+
+        await waitFor(() => {
+          expect(confirmToggleSpy).toHaveBeenCalledTimes(2);
+        });
+
         expect(confirmToggleSpy).toHaveBeenNthCalledWith(2, false, {
           mode: 'Advanced',
         });
       });
 
-      it(`'Advanced' raises onConfirmOpen when 'Confirm' is clicked, if set`, () => {
-        const confirmToggleSpy = jest.fn();
+      it(`'Advanced' raises onConfirmOpen when 'Confirm' is clicked, if set`, async () => {
+        const confirmToggleSpy = vi.fn();
 
-        const wrapper = mount(
+        const { container } = render(
           <PageHeaderAction
             {...defaultProps}
             label={'test-label'}
@@ -469,23 +526,39 @@ describe('PageHeaderAction', () => {
           />,
         );
 
+        const actionContainer = container.querySelector(
+          '.container',
+        ) as HTMLElement;
+
         // toggle confirmation on
         act(() => {
-          wrapper.simulate('click');
+          fireEvent.click(actionContainer);
         });
-        wrapper.update();
 
-        const confirmButton = wrapper.find(TextButton).last();
-
-        act(() => {
-          confirmButton.simulate('click');
+        await waitFor(() => {
+          const confirmation = document.querySelector(
+            '.confirm-dialog-container',
+          );
+          expect(confirmation).toBeInTheDocument();
         });
-        wrapper.update();
 
-        expect(confirmToggleSpy).toHaveBeenCalledTimes(2);
+        expect(confirmToggleSpy).toHaveBeenCalledTimes(1);
         expect(confirmToggleSpy).toHaveBeenNthCalledWith(1, true, {
           mode: 'Advanced',
         });
+
+        const confirmButton = document.querySelector(
+          '[data-test-id="confirm"]',
+        ) as HTMLButtonElement;
+
+        act(() => {
+          fireEvent.click(confirmButton);
+        });
+
+        await waitFor(() => {
+          expect(confirmToggleSpy).toHaveBeenCalledTimes(2);
+        });
+
         expect(confirmToggleSpy).toHaveBeenNthCalledWith(2, false, {
           mode: 'Advanced',
         });
@@ -493,8 +566,8 @@ describe('PageHeaderAction', () => {
     });
 
     it(`sets background color when actionType is 'Context'`, () => {
-      const spy = jest.fn();
-      const wrapper = mount(
+      const spy = vi.fn();
+      const { container } = render(
         <PageHeaderAction
           label={'action-label'}
           actionType={PageHeaderActionType.Context}
@@ -502,14 +575,16 @@ describe('PageHeaderAction', () => {
         />,
       );
 
-      const container = wrapper.find('.container');
+      const actionContainer = container.querySelector(
+        '.container',
+      ) as HTMLElement;
 
-      expect(container.hasClass('context')).toBe(true);
+      expect(actionContainer.classList.contains('context')).toBe(true);
     });
 
     it(`sets background color when actionType is 'Active'`, () => {
-      const spy = jest.fn();
-      const wrapper = mount(
+      const spy = vi.fn();
+      const { container } = render(
         <PageHeaderAction
           label={'action-label'}
           actionType={PageHeaderActionType.Active}
@@ -517,14 +592,16 @@ describe('PageHeaderAction', () => {
         />,
       );
 
-      const container = wrapper.find('.container');
+      const actionContainer = container.querySelector(
+        '.container',
+      ) as HTMLElement;
 
-      expect(container.hasClass('active')).toBe(true);
+      expect(actionContainer.classList.contains('active')).toBe(true);
     });
 
     it(`disallows interactions when action is set to disabled`, () => {
-      const spy = jest.fn();
-      const wrapper = mount(
+      const spy = vi.fn();
+      const { container } = render(
         <PageHeaderAction
           label={'action-label'}
           disabled={true}
@@ -532,11 +609,14 @@ describe('PageHeaderAction', () => {
         />,
       );
 
-      const disabledAttribute = wrapper.find('.container').prop('disabled');
+      const actionContainer = container.querySelector(
+        '.container',
+      ) as HTMLElement;
+      const disabledAttribute = actionContainer.getAttribute('disabled');
 
-      wrapper.simulate('click');
+      fireEvent.click(actionContainer);
 
-      expect(disabledAttribute).toBe(true);
+      expect(disabledAttribute).not.toBeNull();
       expect(spy).not.toHaveBeenCalled();
     });
   });
@@ -548,38 +628,40 @@ describe('PageHeaderAction', () => {
     };
 
     it('renders the component without crashing', () => {
-      const wrapper = shallow(
-        <PageHeaderAction {...defaultProps} path="/test" />,
+      const { container } = render(
+        <Router>
+          <PageHeaderAction {...defaultProps} path="/test" />
+        </Router>,
       );
-      expect(wrapper).toBeTruthy();
+      expect(container).toBeTruthy();
     });
 
     it('renders a Link when path is provided', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <PageHeaderAction {...defaultProps} />
         </Router>,
       );
 
-      expect(wrapper.find(Link)).toHaveLength(1);
+      const link = container.querySelector('a');
+      expect(link).toBeInTheDocument();
     });
 
     it('renders a label', () => {
       const mockLabel = 'test-label';
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <PageHeaderAction {...defaultProps} label={mockLabel} path="/test" />
         </Router>,
       );
-      const label = wrapper.find('span');
-      expect(label.text()).toBe(mockLabel);
+      const label = container.querySelector('span');
+      expect(label?.textContent).toBe(mockLabel);
     });
 
     it('renders an icon, if set', () => {
       const mockLabel = 'test-label';
-      const wrapper = mount(
+      const { container } = render(
         <Router>
-          {' '}
           <PageHeaderAction
             {...defaultProps}
             label={mockLabel}
@@ -588,13 +670,13 @@ describe('PageHeaderAction', () => {
           />
         </Router>,
       );
-      const icon = wrapper.find('.icons');
-      expect(icon.exists()).toBe(true);
+      const icon = container.querySelector('.icons');
+      expect(icon).toBeInTheDocument();
     });
 
     it('renders an image instead of icon if icon prop is a string', () => {
       const mockLabel = 'test-label';
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <PageHeaderAction
             {...defaultProps}
@@ -605,35 +687,35 @@ describe('PageHeaderAction', () => {
           />
         </Router>,
       );
-      const icon = wrapper.find('.icons');
-      expect(icon.exists()).toBe(false);
-      const image = wrapper.find('img');
-      expect(image.exists()).toBe(true);
+      const icon = container.querySelector('.icons');
+      expect(icon).not.toBeInTheDocument();
+      const image = container.querySelector('img');
+      expect(image).toBeInTheDocument();
     });
 
     it('renders a link with correct path', () => {
       const mockPath = '/test-path';
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <PageHeaderAction {...defaultProps} path={mockPath} />
         </Router>,
       );
-      const link = wrapper.find('Link');
-      expect(link.prop('to')).toBe(mockPath);
+      const link = container.querySelector('a') as HTMLAnchorElement;
+      expect(link.getAttribute('href')).toBe(mockPath);
     });
 
     it('opens link in a new tab if openInNewTab is true', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <PageHeaderAction {...defaultProps} path="/test" openInNewTab />
         </Router>,
       );
-      const link = wrapper.find('a');
-      expect(link.prop('target')).toBe('_blank');
+      const link = container.querySelector('a') as HTMLAnchorElement;
+      expect(link.target).toBe('_blank');
     });
 
     it('does not open link in a new tab if openInNewTab is false', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <PageHeaderAction
             {...defaultProps}
@@ -642,8 +724,8 @@ describe('PageHeaderAction', () => {
           />
         </Router>,
       );
-      const link = wrapper.find('Link');
-      expect(link.prop('target')).toBeUndefined();
+      const link = container.querySelector('a') as HTMLAnchorElement;
+      expect(link.target).toBe('');
     });
   });
 });