(test) Reuse renderWithRouter wrapper

openmrs · Nov 14, 2024 · 920348e · 920348e
1 parent 7fc67b1
commit 920348e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 39 deletions.
diff --git a/packages/esm-patient-search-app/src/compact-patient-search/compact-patient-search.test.tsx b/packages/esm-patient-search-app/src/compact-patient-search/compact-patient-search.test.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { getDefaultsFromConfigSchema, navigate, useConfig, useSession } from '@openmrs/esm-framework';
+import { renderWithRouter } from 'tools';
 import { mockSession } from '__mocks__';
 import { configSchema, type PatientSearchConfig } from '../config-schema';
 import CompactPatientSearchComponent from './compact-patient-search.component';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 const mockUseConfig = jest.mocked(useConfig<PatientSearchConfig>);
 const mockUseSession = jest.mocked(useSession);
@@ -18,27 +18,20 @@ describe('CompactPatientSearchComponent', () => {
   });
 
   it('renders a compact search bar', () => {
-    render(
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<CompactPatientSearchComponent isSearchPage initialSearchTerm="" />} />
-        </Routes>
-      </BrowserRouter>,
-    );
+    renderWithRouter(<CompactPatientSearchComponent isSearchPage={false} initialSearchTerm="" />);
+
     expect(screen.getByPlaceholderText(/Search for a patient by name or identifier number/i)).toBeInTheDocument();
   });
 
   it('renders search results when search term is not empty', async () => {
     const user = userEvent.setup();
-    render(
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<CompactPatientSearchComponent isSearchPage={false} initialSearchTerm="" />} />
-        </Routes>
-      </BrowserRouter>,
-    );
+
+    renderWithRouter(<CompactPatientSearchComponent isSearchPage={false} initialSearchTerm="" />);
+
     const searchbox = screen.getByPlaceholderText(/Search for a patient by name or identifier number/i);
+
     await user.type(searchbox, 'John');
+
     const searchResultsContainer = screen.getByTestId('floatingSearchResultsContainer');
     expect(searchResultsContainer).toBeInTheDocument();
   });
@@ -51,39 +44,28 @@ describe('CompactPatientSearchComponent', () => {
         disableTabletSearchOnKeyUp: true,
       } as PatientSearchConfig['search'],
     });
-    render(
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<CompactPatientSearchComponent isSearchPage={false} initialSearchTerm="" />} />
-        </Routes>
-      </BrowserRouter>,
-    );
+
+    renderWithRouter(<CompactPatientSearchComponent isSearchPage={false} initialSearchTerm="" />);
+
     const searchResultsContainer = screen.getByTestId('floatingSearchResultsContainer');
     expect(searchResultsContainer).toBeInTheDocument();
   });
 
   it('navigates to the advanced search page with the correct query string when the Search button is clicked', async () => {
     const user = userEvent.setup();
-    render(
-      <BrowserRouter>
-        <Routes>
-          <Route
-            path="/"
-            element={
-              <CompactPatientSearchComponent
-                isSearchPage={false}
-                initialSearchTerm=""
-                shouldNavigateToPatientSearchPage
-              />
-            }
-          />
-        </Routes>
-      </BrowserRouter>,
+
+    renderWithRouter(
+      <CompactPatientSearchComponent isSearchPage={false} initialSearchTerm="" shouldNavigateToPatientSearchPage />,
     );
+
     const searchbox = screen.getByRole('searchbox');
+
     await user.type(searchbox, 'John');
+
     const searchButton = screen.getByRole('button', { name: /search/i });
+
     await user.click(searchButton);
+
     expect(mockNavigate).toHaveBeenCalledWith({ to: expect.stringMatching(/.*\/search\?query=John/) });
   });
 });
diff --git a/tools/test-utils.tsx b/tools/test-utils.tsx
@@ -1,5 +1,5 @@
-import { Route, Routes, MemoryRouter } from 'react-router-dom';
 import React, { type ReactElement } from 'react';
+import { Route, Routes, MemoryRouter } from 'react-router-dom';
 import { SWRConfig } from 'swr';
 import { type RenderOptions, render, screen, waitForElementToBeRemoved } from '@testing-library/react';