test(view-care-goal): convert to rtl

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

@@ -1,14 +1,17 @@
-import { mount, ReactWrapper } from 'enzyme'
+import { render as rtlRender } from '@testing-library/react'
 import { createMemoryHistory } from 'history'
-import React from 'react'
-import { act } from 'react-dom/test-utils'
+import React, { ReactNode, ReactElement } from 'react'
 import { Router, Route } from 'react-router-dom'
 
-import CareGoalForm from '../../../patients/care-goals/CareGoalForm'
 import ViewCareGoal from '../../../patients/care-goals/ViewCareGoal'
 import PatientRepository from '../../../shared/db/PatientRepository'
 import Patient from '../../../shared/model/Patient'
 
+type WrapperProps = {
+  // eslint-disable-next-line react/require-default-props
+  children?: ReactNode
+}
+
 describe('View Care Goal', () => {
   const patient = {
     id: '123',
@@ -17,32 +20,24 @@ describe('View Care Goal', () => {
     careGoals: [{ id: '123', description: 'some description' }],
   } as Patient
 
-  const setup = async () => {
+  const render = () => {
     jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient)
     const history = createMemoryHistory()
     history.push(`/patients/${patient.id}/care-goals/${patient.careGoals[0].id}`)
 
-    let wrapper: any
-    await act(async () => {
-      wrapper = await mount(
-        <Router history={history}>
-          <Route path="/patients/:id/care-goals/:careGoalId">
-            <ViewCareGoal />
-          </Route>
-        </Router>,
-      )
-    })
+    const Wrapper = ({ children }: WrapperProps): ReactElement => (
+      <Router history={history}>
+        <Route path="/patients/:id/care-goals/:careGoalId">{children}</Route>
+      </Router>
+    )
 
-    wrapper.update()
+    const results = rtlRender(<ViewCareGoal />, { wrapper: Wrapper })
 
-    return { wrapper: wrapper as ReactWrapper }
+    return results
   }
 
-  it('should render the care goal form', async () => {
-    const { wrapper } = await setup()
-    const careGoalForm = wrapper.find(CareGoalForm)
-
-    expect(careGoalForm).toHaveLength(1)
-    expect(careGoalForm.prop('careGoal')).toEqual(patient.careGoals[0])
+  it('should render the care goal form', () => {
+    const { container } = render()
+    expect(container.querySelectorAll('div').length).toBe(4)
   })
 })