(test) Add renderWithRouter wrapper (#1373)

This adds a wrapper for rendering components with react-router-dom for testing purposes. This is needed because components that use routing features require a Router context to work properly. Its parameters are: - component: The component to render. - initialRoute: The initial route to set for the router. Defaults to `/`, the root path. It uses `MemoryRouter` instead of `BrowserRouter` because `MemoryRouter` stores its history in memory, which is suitable for testing purposes. - initialEntries: The initial entries to set for the router. Defaults to `['/']`, the root path. - it sets up a basic Routes configuration with a single Route that matches the root path and renders the component passed to the wrapper.
openmrs · Nov 14, 2024 · 7fc67b1 · 7fc67b1
1 parent e009969
commit 7fc67b1
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 64 deletions.
diff --git a/...stration-app/src/patient-registration/input/custom-input/autosuggest/autosuggest.test.tsx b/...stration-app/src/patient-registration/input/custom-input/autosuggest/autosuggest.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { BrowserRouter } from 'react-router-dom';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { renderWithRouter } from 'tools';
 import { Autosuggest } from './autosuggest.component';
 
 const mockPersons = [
@@ -33,18 +33,16 @@ const mockHandleSuggestionSelected = jest.fn((field, value) => [field, value]);
 
 describe('Autosuggest', () => {
   it('renders a search box', () => {
-    render(
-      <BrowserRouter>
-        <Autosuggest
-          getSearchResults={mockGetSearchResults}
-          getDisplayValue={(item) => item.display}
-          getFieldValue={(item) => item.uuid}
-          id="person"
-          labelText=""
-          onSuggestionSelected={mockHandleSuggestionSelected}
-          placeholder="Find Person"
-        />
-      </BrowserRouter>,
+    renderWithRouter(
+      <Autosuggest
+        getSearchResults={mockGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockHandleSuggestionSelected}
+        placeholder="Find Person"
+      />,
     );
 
     expect(screen.getByRole('searchbox')).toBeInTheDocument();
@@ -54,18 +52,16 @@ describe('Autosuggest', () => {
   it('renders matching search results in a list when the user types a query', async () => {
     const user = userEvent.setup();
 
-    render(
-      <BrowserRouter>
-        <Autosuggest
-          getSearchResults={mockGetSearchResults}
-          getDisplayValue={(item) => item.display}
-          getFieldValue={(item) => item.uuid}
-          id="person"
-          labelText=""
-          onSuggestionSelected={mockHandleSuggestionSelected}
-          placeholder="Find Person"
-        />
-      </BrowserRouter>,
+    renderWithRouter(
+      <Autosuggest
+        getSearchResults={mockGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockHandleSuggestionSelected}
+        placeholder="Find Person"
+      />,
     );
 
     const searchbox = screen.getByRole('searchbox');
@@ -82,18 +78,16 @@ describe('Autosuggest', () => {
   it('clears the list of suggestions when a suggestion is selected', async () => {
     const user = userEvent.setup();
 
-    render(
-      <BrowserRouter>
-        <Autosuggest
-          getSearchResults={mockGetSearchResults}
-          getDisplayValue={(item) => item.display}
-          getFieldValue={(item) => item.uuid}
-          id="person"
-          labelText=""
-          onSuggestionSelected={mockHandleSuggestionSelected}
-          placeholder="Find Person"
-        />
-      </BrowserRouter>,
+    renderWithRouter(
+      <Autosuggest
+        getSearchResults={mockGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockHandleSuggestionSelected}
+        placeholder="Find Person"
+      />,
     );
 
     let list = screen.queryByRole('list');
@@ -117,18 +111,16 @@ describe('Autosuggest', () => {
   it('changes suggestions when a search input is changed', async () => {
     const user = userEvent.setup();
 
-    render(
-      <BrowserRouter>
-        <Autosuggest
-          getSearchResults={mockGetSearchResults}
-          getDisplayValue={(item) => item.display}
-          getFieldValue={(item) => item.uuid}
-          id="person"
-          labelText=""
-          onSuggestionSelected={mockHandleSuggestionSelected}
-          placeholder="Find Person"
-        />
-      </BrowserRouter>,
+    renderWithRouter(
+      <Autosuggest
+        getSearchResults={mockGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockHandleSuggestionSelected}
+        placeholder="Find Person"
+      />,
     );
 
     let list = screen.queryByRole('list');
@@ -149,18 +141,16 @@ describe('Autosuggest', () => {
   it('hides the list of suggestions when the user clicks outside of the component', async () => {
     const user = userEvent.setup();
 
-    render(
-      <BrowserRouter>
-        <Autosuggest
-          getSearchResults={mockGetSearchResults}
-          getDisplayValue={(item) => item.display}
-          getFieldValue={(item) => item.uuid}
-          id="person"
-          labelText=""
-          onSuggestionSelected={mockHandleSuggestionSelected}
-          placeholder="Find Person"
-        />
-      </BrowserRouter>,
+    renderWithRouter(
+      <Autosuggest
+        getSearchResults={mockGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockHandleSuggestionSelected}
+        placeholder="Find Person"
+      />,
     );
 
     const input = screen.getByRole('searchbox');

diff --git a/tools/index.ts b/tools/index.ts
@@ -6,5 +6,6 @@ export {
   mockPatientWithoutFormattedName,
   patientChartBasePath,
   renderWithSwr,
+  renderWithRouter,
   waitForLoadingToFinish,
 } from './test-utils';
diff --git a/tools/test-utils.tsx b/tools/test-utils.tsx
@@ -1,3 +1,4 @@
+import { Route, Routes, MemoryRouter } from 'react-router-dom';
 import React, { type ReactElement } from 'react';
 import { SWRConfig } from 'swr';
 import { type RenderOptions, render, screen, waitForElementToBeRemoved } from '@testing-library/react';
@@ -17,6 +18,16 @@ const swrWrapper = ({ children }) => {
 const renderWithSwr = (ui: ReactElement, options?: Omit<RenderOptions, 'queries'>) =>
   render(ui, { wrapper: swrWrapper, ...options });
 
+const renderWithRouter = (component: React.ReactElement, initialRoute = '/') => {
+  return render(
+    <MemoryRouter initialEntries={[initialRoute]}>
+      <Routes>
+        <Route path="/" element={component} />
+      </Routes>
+    </MemoryRouter>,
+  );
+};
+
 function waitForLoadingToFinish() {
   return waitForElementToBeRemoved(() => [...screen.queryAllByRole('progressbar')], {
     timeout: 4000,
@@ -141,12 +152,13 @@ const mockPatientWithoutFormattedName = {
 const patientChartBasePath = `/patient/${mockPatient.id}/chart`;
 
 export {
-  renderWithSwr,
-  waitForLoadingToFinish,
   getByTextWithMarkup,
   mockPatient,
   mockOpenMRSIdentificationNumberIdType,
   mockPatientWithLongName,
   mockPatientWithoutFormattedName,
   patientChartBasePath,
+  renderWithSwr,
+  renderWithRouter,
+  waitForLoadingToFinish,
 };