Ensured DeleteServerModal is not removed from the DOM before close transition has finished

test/servers/DeleteServerModal.test.tsx

@@ -1,25 +1,37 @@
-import { screen } from '@testing-library/react';
+import { FC } from 'react';
+import { screen, waitFor } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import { useNavigate } from 'react-router-dom';
 import { DeleteServerModal } from '../../src/servers/DeleteServerModal';
 import { ServerWithId } from '../../src/servers/data';
 import { renderWithEvents } from '../__helpers__/setUpTest';
+import { useToggle } from '../../src/utils/helpers/hooks';
 
 jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() }));
 
+const DeleteServerModalWrapper: FC<{ name: string; deleteServer: () => void }> = ({ name, deleteServer }) => {
+  const [isOpen, toggle] = useToggle(true);
+
+  return (
+    <DeleteServerModal
+      server={Mock.of<ServerWithId>({ name })}
+      toggle={toggle}
+      isOpen={isOpen}
+      deleteServer={deleteServer}
+    />
+  );
+};
+
 describe('<DeleteServerModal />', () => {
   const deleteServerMock = jest.fn();
   const navigate = jest.fn();
-  const toggleMock = jest.fn();
   const serverName = 'the_server_name';
   const setUp = () => {
     (useNavigate as any).mockReturnValue(navigate);
 
     return renderWithEvents(
-      <DeleteServerModal
-        server={Mock.of<ServerWithId>({ name: serverName })}
-        toggle={toggleMock}
-        isOpen
+      <DeleteServerModalWrapper
+        name={serverName}
         deleteServer={deleteServerMock}
       />,
     );
@@ -47,10 +59,8 @@ describe('<DeleteServerModal />', () => {
   ])('toggles when clicking cancel button', async (getButton) => {
     const { user } = setUp();
 
-    expect(toggleMock).not.toHaveBeenCalled();
     await user.click(getButton());
 
-    expect(toggleMock).toHaveBeenCalledTimes(1);
     expect(deleteServerMock).not.toHaveBeenCalled();
     expect(navigate).not.toHaveBeenCalled();
   });
@@ -58,13 +68,11 @@ describe('<DeleteServerModal />', () => {
   it('deletes server when clicking accept button', async () => {
     const { user } = setUp();
 
-    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);
-    expect(navigate).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(deleteServerMock).toHaveBeenCalledTimes(1));
+    await waitFor(() => expect(navigate).toHaveBeenCalledTimes(1));
   });
 });