Convert Allergies.test.tsx to RTL

closes #22

package.json

@@ -63,9 +63,11 @@
     "@commitlint/config-conventional": "~11.0.0",
     "@commitlint/core": "~11.0.0",
     "@commitlint/prompt": "~11.0.0",
+    "@testing-library/dom": "~7.29.0",
     "@testing-library/jest-dom": "~5.11.6",
     "@testing-library/react": "~11.2.2",
     "@testing-library/react-hooks": "~3.7.0",
+    "@testing-library/user-event": "~12.6.0",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "~26.0.0",
     "@types/lodash": "^4.14.150",

src/__tests__/patients/allergies/AllergiesList.test.tsx

@@ -1,8 +1,7 @@
-import { Alert, List, ListItem } from '@hospitalrun/components'
-import { mount, ReactWrapper } from 'enzyme'
+import { act, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { createMemoryHistory } from 'history'
 import React from 'react'
-import { act } from 'react-dom/test-utils'
 import { Router } from 'react-router-dom'
 
 import AllergiesList from '../../../patients/allergies/AllergiesList'
@@ -16,52 +15,38 @@ describe('Allergies list', () => {
     jest.spyOn(PatientRepository, 'find').mockResolvedValueOnce(mockPatient)
     const history = createMemoryHistory()
     history.push(`/patients/${mockPatient.id}/allergies`)
-    let wrapper: any
     await act(async () => {
-      wrapper = await mount(
+      await render(
         <Router history={history}>
           <AllergiesList patientId={mockPatient.id} />
         </Router>,
       )
     })
-
-    wrapper.update()
-    return { wrapper: wrapper as ReactWrapper, history }
+    return { history }
   }
 
   it('should render a list of allergies', async () => {
     const expectedAllergies = [{ id: '456', name: 'some name' }]
-    const { wrapper } = await setup(expectedAllergies)
-    const listItems = wrapper.find(ListItem)
-
-    expect(wrapper.exists(List)).toBeTruthy()
+    await setup(expectedAllergies)
+    const listItems = screen.getAllByRole('button')
     expect(listItems).toHaveLength(expectedAllergies.length)
-    expect(listItems.at(0).text()).toEqual(expectedAllergies[0].name)
+    expect(screen.getByText(expectedAllergies[0].name)).toBeInTheDocument()
   })
 
   it('should display a warning when no allergies are present', async () => {
     const expectedAllergies: Allergy[] = []
-    const { wrapper } = await setup(expectedAllergies)
-
-    const alert = wrapper.find(Alert)
-
-    expect(wrapper.exists(Alert)).toBeTruthy()
-    expect(wrapper.exists(List)).toBeFalsy()
-
-    expect(alert.prop('color')).toEqual('warning')
-    expect(alert.prop('title')).toEqual('patient.allergies.warning.noAllergies')
-    expect(alert.prop('message')).toEqual('patient.allergies.addAllergyAbove')
+    await setup(expectedAllergies)
+    expect(screen.getByText('patient.allergies.warning.noAllergies')).toBeInTheDocument()
+    expect(screen.getByText('patient.allergies.addAllergyAbove')).toBeInTheDocument()
   })
 
-  it('should navigate to the allergy view when the allergy is clicked', async () => {
+  it('should navigate to the allergy when the allergy is clicked', async () => {
     const expectedAllergies = [{ id: '456', name: 'some name' }]
-    const { wrapper, history } = await setup(expectedAllergies)
-    const item = wrapper.find(ListItem)
+    const { history } = await setup(expectedAllergies)
+    const listItems = screen.getAllByRole('button')
     act(() => {
-      const onClick = item.prop('onClick') as any
-      onClick({ stopPropagation: jest.fn() })
+      userEvent.click(listItems[0])
     })
-
     expect(history.location.pathname).toEqual(`/patients/123/allergies/${expectedAllergies[0].id}`)
   })
 })