test: refactor setup to remove wrapper

src/__tests__/medications/ViewMedication.test.tsx

@@ -60,18 +60,19 @@ describe('View Medication', () => {
       },
     } as any)
 
-    const Wrapper: React.FC = ({ children }: any) => (
+    return render(
       <ButtonBarProvider.ButtonBarProvider>
         <Provider store={store}>
           <Router history={history}>
             <Route path="/medications/:id">
-              <titleUtil.TitleProvider>{children}</titleUtil.TitleProvider>
+              <titleUtil.TitleProvider>
+                <ViewMedication />
+              </titleUtil.TitleProvider>
             </Route>
           </Router>
         </Provider>
-      </ButtonBarProvider.ButtonBarProvider>
+      </ButtonBarProvider.ButtonBarProvider>,
     )
-    return render(<ViewMedication />, { wrapper: Wrapper })
   }
 
   describe('page content', () => {

src/__tests__/patients/care-goals/CareGoalTab.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen, waitFor, waitForElementToBeRemoved, within } from '@testing-library/react'
 import userEvent, { specialChars } from '@testing-library/user-event'
 import format from 'date-fns/format'
-import { createMemoryHistory, MemoryHistory } from 'history'
+import { createMemoryHistory } from 'history'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { Router, Route } from 'react-router-dom'
@@ -18,30 +18,10 @@ import { RootState } from '../../../shared/store'
 const mockStore = createMockStore<RootState, any>([thunk])
 const { selectAll, arrowDown, enter } = specialChars
 
-type CareGoalTabWrapper = (store: any, history: MemoryHistory) => React.FC
-
-// eslint-disable-next-line react/prop-types
-const TabWrapper: CareGoalTabWrapper = (store, history) => ({ children }) => (
-  <Provider store={store}>
-    <Router history={history}>
-      <Route path="/patients/:id">{children}</Route>
-    </Router>
-  </Provider>
-)
-
-// eslint-disable-next-line react/prop-types
-const ViewWrapper: CareGoalTabWrapper = (store: any, history: MemoryHistory) => ({ children }) => (
-  <Provider store={store}>
-    <Router history={history}>
-      <Route path="/patients/:id/care-goals/:careGoalId">{children}</Route>
-    </Router>
-  </Provider>
-)
-
 const setup = (
   route: string,
   permissions: Permissions[],
-  wrapper = TabWrapper,
+  wrapper = 'tab',
   includeCareGoal = true,
 ) => {
   const expectedCareGoal = {
@@ -63,8 +43,22 @@ const setup = (
   jest.spyOn(PatientRepository, 'find').mockResolvedValue(expectedPatient)
   const history = createMemoryHistory({ initialEntries: [route] })
   const store = mockStore({ user: { permissions } } as any)
-
-  return render(<CareGoalTab />, { wrapper: wrapper(store, history) })
+  const path =
+    wrapper === 'tab'
+      ? '/patients/:id'
+      : wrapper === 'view'
+      ? '/patients/:id/care-goals/:careGoalId'
+      : ''
+
+  return render(
+    <Provider store={store}>
+      <Router history={history}>
+        <Route path={path}>
+          <CareGoalTab />
+        </Route>
+      </Router>
+    </Provider>,
+  )
 }
 
 describe('Care Goals Tab', () => {
@@ -84,7 +78,7 @@ describe('Care Goals Tab', () => {
       dueDate: new Date('2020-02-01'),
     }
 
-    setup('/patients/123/care-goals', [Permissions.AddCareGoal], TabWrapper, false)
+    setup('/patients/123/care-goals', [Permissions.AddCareGoal], 'tab', false)
 
     userEvent.click(await screen.findByRole('button', { name: /patient.careGoal.new/i }))
 
@@ -148,7 +142,7 @@ describe('Care Goals Tab', () => {
   })
 
   it('should render care goal view when on patients/:id/care-goals/:careGoalId', async () => {
-    setup('/patients/123/care-goals/456', [Permissions.ReadCareGoal], ViewWrapper)
+    setup('/patients/123/care-goals/456', [Permissions.ReadCareGoal], 'view')
 
     expect(await screen.findByRole('form')).toBeInTheDocument()
   })

src/__tests__/patients/care-plans/AddCarePlanModal.test.tsx

@@ -25,14 +25,12 @@ describe('Add Care Plan Modal', () => {
     jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient)
     jest.spyOn(PatientRepository, 'saveOrUpdate')
     const history = createMemoryHistory()
-    // eslint-disable-next-line react/prop-types
-    const Wrapper: React.FC = ({ children }) => <Router history={history}>{children}</Router>
 
-    const result = render(
-      <AddCarePlanModal patient={patient} show onCloseButtonClick={onCloseSpy} />,
-      { wrapper: Wrapper },
+    return render(
+      <Router history={history}>
+        <AddCarePlanModal patient={patient} show onCloseButtonClick={onCloseSpy} />
+      </Router>,
     )
-    return result
   }
 
   beforeEach(() => {

src/__tests__/patients/edit/EditPatient.test.tsx

@@ -42,20 +42,19 @@ const setup = () => {
   const history = createMemoryHistory({ initialEntries: ['/patients/edit/123'] })
   const store = mockStore({ patient: { patient } } as any)
 
-  // eslint-disable-next-line react/prop-types
-  const Wrapper: React.FC = ({ children }) => (
-    <Provider store={store}>
-      <Router history={history}>
-        <Route path="/patients/edit/:id">
-          <titleUtil.TitleProvider>{children}</titleUtil.TitleProvider>
-        </Route>
-      </Router>
-    </Provider>
-  )
-
   return {
     history,
-    ...render(<EditPatient />, { wrapper: Wrapper }),
+    ...render(
+      <Provider store={store}>
+        <Router history={history}>
+          <Route path="/patients/edit/:id">
+            <titleUtil.TitleProvider>
+              <EditPatient />
+            </titleUtil.TitleProvider>
+          </Route>
+        </Router>
+      </Provider>,
+    ),
   }
 }
 

src/__tests__/patients/notes/NewNoteModal.test.tsx

@@ -1,4 +1,4 @@
-import { screen, render as rtlRender, waitFor } from '@testing-library/react'
+import { screen, render, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 
@@ -14,22 +14,21 @@ describe('New Note Modal', () => {
   } as Patient
 
   const onCloseSpy = jest.fn()
-  const render = () => {
+  const setup = () => {
     jest.spyOn(PatientRepository, 'saveOrUpdate').mockResolvedValue(mockPatient)
     jest.spyOn(PatientRepository, 'find').mockResolvedValue(mockPatient)
-    const results = rtlRender(
+    return render(
       <NewNoteModal
         show
         onCloseButtonClick={onCloseSpy}
         toggle={jest.fn()}
         patientId={mockPatient.id}
       />,
     )
-    return results
   }
 
   it('should render a modal with the correct labels', async () => {
-    render()
+    setup()
 
     expect(await screen.findByRole('dialog')).toBeInTheDocument()
     expect(
@@ -49,7 +48,7 @@ describe('New Note Modal', () => {
   })
 
   it('should render a notes rich text editor', () => {
-    render()
+    setup()
 
     expect(screen.getByRole('textbox')).toBeInTheDocument()
     expect(screen.getByText('patient.note').querySelector('svg')).toHaveAttribute(
@@ -65,7 +64,7 @@ describe('New Note Modal', () => {
     }
     expectOneConsoleError(expectedError)
 
-    render()
+    setup()
 
     userEvent.click(
       screen.getByRole('button', {
@@ -82,7 +81,7 @@ describe('New Note Modal', () => {
 
   describe('on cancel', () => {
     it('should call the onCloseButtonCLick function when the cancel button is clicked', async () => {
-      render()
+      setup()
 
       userEvent.click(
         screen.getByRole('button', {
@@ -96,7 +95,7 @@ describe('New Note Modal', () => {
   describe('on save', () => {
     it('should dispatch add note', async () => {
       const expectedNote = 'some note'
-      render()
+      setup()
 
       const noteTextField = screen.getByRole('textbox')
       userEvent.type(noteTextField, expectedNote)

src/__tests__/patients/view/ViewPatient.test.tsx

@@ -54,24 +54,23 @@ describe('ViewPatient', () => {
       user: { permissions: [Permissions.ReadPatients, ...permissions] },
     } as any)
 
-    // eslint-disable-next-line react/prop-types
-    const Wrapper: React.FC = ({ children }) => (
-      <Provider store={store}>
-        <ButtonBarProvider>
-          <ButtonToolbar />
-          <Router history={history}>
-            <Route path="/patients/:id">
-              <TitleProvider>{children}</TitleProvider>
-            </Route>
-          </Router>
-        </ButtonBarProvider>
-      </Provider>
-    )
-
     return {
       history,
       store,
-      ...render(<ViewPatient />, { wrapper: Wrapper }),
+      ...render(
+        <Provider store={store}>
+          <ButtonBarProvider>
+            <ButtonToolbar />
+            <Router history={history}>
+              <Route path="/patients/:id">
+                <TitleProvider>
+                  <ViewPatient />
+                </TitleProvider>
+              </Route>
+            </Router>
+          </ButtonBarProvider>
+        </Provider>,
+      ),
     }
   }
 
@@ -89,7 +88,6 @@ describe('ViewPatient', () => {
     await waitFor(() => {
       expect(screen.getByText(/actions\.edit/i)).toBeInTheDocument()
     })
-    screen.logTestingPlaygroundURL()
   })
 
   it('should render an empty button toolbar if the user has only ReadPatients permissions', async () => {

src/__tests__/scheduling/appointments/edit/EditAppointment.test.tsx

@@ -63,18 +63,17 @@ describe('Edit Appointment', () => {
 
     history.push('/appointments/edit/123')
 
-    // eslint-disable-next-line react/prop-types
-    const Wrapper: React.FC = ({ children }) => (
+    return render(
       <Provider store={store}>
         <Router history={history}>
           <Route path="/appointments/edit/:id">
-            <TitleProvider>{children}</TitleProvider>
+            <TitleProvider>
+              <EditAppointment />
+            </TitleProvider>
           </Route>
         </Router>
-      </Provider>
+      </Provider>,
     )
-
-    return render(<EditAppointment />, { wrapper: Wrapper })
   }
 
   beforeEach(() => {

src/__tests__/scheduling/appointments/new/NewAppointment.test.tsx

@@ -58,21 +58,21 @@ describe('New Appointment', () => {
 
     const history = createMemoryHistory({ initialEntries: ['/appointments/new'] })
 
-    const Wrapper: React.FC = ({ children }: any) => (
-      <ReactQueryConfigProvider config={noRetryConfig}>
-        <Provider store={mockStore({} as any)}>
-          <Router history={history}>
-            <TitleProvider>{children}</TitleProvider>
-          </Router>
-          <Toaster draggable hideProgressBar />
-        </Provider>
-      </ReactQueryConfigProvider>
-    )
-
     return {
       expectedAppointment,
       history,
-      ...render(<NewAppointment />, { wrapper: Wrapper }),
+      ...render(
+        <ReactQueryConfigProvider config={noRetryConfig}>
+          <Provider store={mockStore({} as any)}>
+            <Router history={history}>
+              <TitleProvider>
+                <NewAppointment />
+              </TitleProvider>
+            </Router>
+            <Toaster draggable hideProgressBar />
+          </Provider>
+        </ReactQueryConfigProvider>,
+      ),
     }
   }
 

src/__tests__/scheduling/appointments/view/ViewAppointment.test.tsx

@@ -55,26 +55,25 @@ const setup = (permissions = [Permissions.ReadAppointments], skipSpies = false)
     },
   } as any)
 
-  // eslint-disable-next-line react/prop-types
-  const Wrapper: React.FC = ({ children }) => (
-    <Provider store={store}>
-      <Router history={history}>
-        <ButtonBarProvider>
-          <ButtonToolbar />
-          <Route path="/appointments/:id">
-            <TitleProvider>{children}</TitleProvider>
-          </Route>
-        </ButtonBarProvider>
-        <Toaster draggable hideProgressBar />
-      </Router>
-    </Provider>
-  )
-
   return {
     history,
     expectedAppointment,
     expectedPatient,
-    ...render(<ViewAppointment />, { wrapper: Wrapper }),
+    ...render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ButtonBarProvider>
+            <ButtonToolbar />
+            <Route path="/appointments/:id">
+              <TitleProvider>
+                <ViewAppointment />
+              </TitleProvider>
+            </Route>
+          </ButtonBarProvider>
+          <Toaster draggable hideProgressBar />
+        </Router>
+      </Provider>,
+    ),
   }
 }