Migrate page-header/breadcrumbs tests to testing-library

src/__tests__/page-header/breadcrumbs/Breadcrumbs.test.tsx

@@ -1,8 +1,4 @@
-import {
-  Breadcrumb as HRBreadcrumb,
-  BreadcrumbItem as HRBreadcrumbItem,
-} from '@hospitalrun/components'
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
 import { createMemoryHistory } from 'history'
 import React from 'react'
 import { Provider } from 'react-redux'
@@ -23,22 +19,20 @@ describe('Breadcrumbs', () => {
       breadcrumbs: { breadcrumbs },
     } as any)
 
-    const wrapper = mount(
+    return render(
       <Provider store={store}>
         <Router history={history}>
           <Breadcrumbs />
         </Router>
       </Provider>,
     )
-
-    return wrapper
   }
 
   it('should not render the breadcrumb when there are no items in the store', () => {
-    const wrapper = setup([])
+    setup([])
 
-    expect(wrapper.find(HRBreadcrumb)).toHaveLength(0)
-    expect(wrapper.find(HRBreadcrumbItem)).toHaveLength(0)
+    expect(screen.queryByRole('list')).toBeNull()
+    expect(screen.queryByRole('listitem')).toBeNull()
   })
 
   it('should render breadcrumbs items', () => {
@@ -47,13 +41,14 @@ describe('Breadcrumbs', () => {
       { text: 'Bob', location: '/patient/1' },
       { text: 'Edit Patient', location: '/patient/1/edit' },
     ]
-    const wrapper = setup(breadcrumbs)
 
-    const items = wrapper.find(HRBreadcrumbItem)
+    setup(breadcrumbs)
+
+    const breadCrumbItems = screen.getAllByRole('listitem')
 
-    expect(items).toHaveLength(3)
-    expect(items.at(0).text()).toEqual('patient.label')
-    expect(items.at(1).text()).toEqual('Bob')
-    expect(items.at(2).text()).toEqual('Edit Patient')
+    expect(breadCrumbItems).toHaveLength(3)
+    expect(breadCrumbItems[0]).toHaveTextContent('patient.label')
+    expect(breadCrumbItems[1]).toHaveTextContent('Bob')
+    expect(breadCrumbItems[2]).toHaveTextContent('Edit Patient')
   })
 })

src/__tests__/page-header/breadcrumbs/useAddBreadcrumbs.test.tsx

@@ -13,32 +13,30 @@ const mockStore = createMockStore<RootState, any>([thunk])
 describe('useAddBreadcrumbs', () => {
   beforeEach(() => jest.clearAllMocks())
 
-  it('should call addBreadcrumbs with the correct data', () => {
-    const wrapper = ({ children }: any) => <Provider store={mockStore({})}>{children}</Provider>
-
-    jest.spyOn(breadcrumbsSlice, 'addBreadcrumbs')
+  const setup = () => {
     const breadcrumbs = [
       {
         text: 'Patients',
         location: '/patients',
       },
     ]
+    const wrapper = ({ children }: any) => <Provider store={mockStore({})}>{children}</Provider>
+
+    return { breadcrumbs, wrapper }
+  }
+
+  it('should call addBreadcrumbs with the correct data', () => {
+    jest.spyOn(breadcrumbsSlice, 'addBreadcrumbs')
+    const { breadcrumbs, wrapper } = setup()
 
     renderHook(() => useAddBreadcrumbs(breadcrumbs), { wrapper } as any)
     expect(breadcrumbsSlice.addBreadcrumbs).toHaveBeenCalledTimes(1)
     expect(breadcrumbsSlice.addBreadcrumbs).toHaveBeenCalledWith(breadcrumbs)
   })
 
   it('should call addBreadcrumbs with an additional dashboard breadcrumb', () => {
-    const wrapper = ({ children }: any) => <Provider store={mockStore({})}>{children}</Provider>
-
     jest.spyOn(breadcrumbsSlice, 'addBreadcrumbs')
-    const breadcrumbs = [
-      {
-        text: 'Patients',
-        location: '/patients',
-      },
-    ]
+    const { breadcrumbs, wrapper } = setup()
 
     renderHook(() => useAddBreadcrumbs(breadcrumbs, true), { wrapper } as any)
     expect(breadcrumbsSlice.addBreadcrumbs).toHaveBeenCalledTimes(1)
@@ -49,16 +47,8 @@ describe('useAddBreadcrumbs', () => {
   })
 
   it('should call removeBreadcrumbs with the correct data after unmount', () => {
-    const wrapper = ({ children }: any) => <Provider store={mockStore({})}>{children}</Provider>
-
-    jest.spyOn(breadcrumbsSlice, 'addBreadcrumbs')
     jest.spyOn(breadcrumbsSlice, 'removeBreadcrumbs')
-    const breadcrumbs = [
-      {
-        text: 'Patients',
-        location: '/patients',
-      },
-    ]
+    const { breadcrumbs, wrapper } = setup()
 
     const { unmount } = renderHook(() => useAddBreadcrumbs(breadcrumbs), { wrapper } as any)
     unmount()