Migrated DeleteServerModal test to react testing library

src/servers/DeleteServerModal.tsx

@@ -26,7 +26,7 @@ export const DeleteServerModal: FC<DeleteServerModalConnectProps> = (
 
   return (
     <Modal isOpen={isOpen} toggle={toggle} centered>
-      <ModalHeader toggle={toggle}><span className="text-danger">Remove server</span></ModalHeader>
+      <ModalHeader toggle={toggle} className="text-danger">Remove server</ModalHeader>
       <ModalBody>
         <p>Are you sure you want to remove <b>{server ? server.name : ''}</b>?</p>
         <p>

test/servers/DeleteServerModal.test.tsx

@@ -1,5 +1,5 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
-import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import userEvent from '@testing-library/user-event';
 import { Mock } from 'ts-mockery';
 import { useNavigate } from 'react-router-dom';
 import { DeleteServerModal } from '../../src/servers/DeleteServerModal';
@@ -8,56 +8,63 @@ import { ServerWithId } from '../../src/servers/data';
 jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() }));
 
 describe('<DeleteServerModal />', () => {
-  let wrapper: ShallowWrapper;
   const deleteServerMock = jest.fn();
   const navigate = jest.fn();
   const toggleMock = jest.fn();
   const serverName = 'the_server_name';
-
+  const setUp = () => {
-  beforeEach(() => {
     (useNavigate as any).mockReturnValue(navigate);
 
-    wrapper = shallow(
+    return {
-      <DeleteServerModal
+      user: userEvent.setup(),
-        server={Mock.of<ServerWithId>({ name: serverName })}
+      ...render(
-        toggle={toggleMock}
+        <DeleteServerModal
-        isOpen
+          server={Mock.of<ServerWithId>({ name: serverName })}
-        deleteServer={deleteServerMock}
+          toggle={toggleMock}
-      />,
+          isOpen
-    );
+          deleteServer={deleteServerMock}
-  });
+        />,
-  afterEach(() => wrapper.unmount());
+      ),
+    };
+  };
+
   afterEach(jest.clearAllMocks);
 
   it('renders a modal window', () => {
-    expect(wrapper.find(Modal)).toHaveLength(1);
+    setUp();
-    expect(wrapper.find(ModalHeader)).toHaveLength(1);
+
-    expect(wrapper.find(ModalBody)).toHaveLength(1);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
-    expect(wrapper.find(ModalFooter)).toHaveLength(1);
+    expect(screen.getByRole('heading')).toHaveTextContent('Remove server');
   });
 
   it('displays the name of the server as part of the content', () => {
-    const modalBody = wrapper.find(ModalBody);
+    setUp();
 
-    expect(modalBody.find('p').first().text()).toEqual(
+    expect(screen.getByText(/^Are you sure you want to remove/)).toBeInTheDocument();
-      `Are you sure you want to remove ${serverName}?`,
+    expect(screen.getByText(serverName)).toBeInTheDocument();
-    );
   });
 
-  it('toggles when clicking cancel button', () => {
+  it.each([
-    const cancelBtn = wrapper.find(Button).first();
+    [() => screen.getByRole('button', { name: 'Cancel' })],
+    [() => screen.getByLabelText('Close')],
+  ])('toggles when clicking cancel button', async (getButton) => {
+    const { user } = setUp();
 
-    cancelBtn.simulate('click');
+    expect(toggleMock).not.toHaveBeenCalled();
+    await user.click(getButton());
 
     expect(toggleMock).toHaveBeenCalledTimes(1);
     expect(deleteServerMock).not.toHaveBeenCalled();
     expect(navigate).not.toHaveBeenCalled();
   });
 
-  it('deletes server when clicking accept button', () => {
+  it('deletes server when clicking accept button', async () => {
-    const acceptBtn = wrapper.find(Button).last();
+    const { user } = setUp();
 
-    acceptBtn.simulate('click');
+    expect(toggleMock).not.toHaveBeenCalled();
+    expect(deleteServerMock).not.toHaveBeenCalled();
+    expect(navigate).not.toHaveBeenCalled();
+    await user.click(screen.getByRole('button', { name: 'Delete' }));
 
     expect(toggleMock).toHaveBeenCalledTimes(1);
     expect(deleteServerMock).toHaveBeenCalledTimes(1);