Merge pull request #1616 from andrelmlins/master

Remove manual cleanup() from react-testing-library test suites

assets/scripts/app/__tests__/DateTimeRelative.test.js

@@ -1,6 +1,5 @@
 /* eslint-env jest */
 import React from 'react'
-import { cleanup } from '@testing-library/react'
 import { advanceTo, clear } from 'jest-date-mock'
 import { renderWithIntl } from '../../../../test/helpers/render'
 import DateTimeRelative from '../DateTimeRelative'
@@ -14,47 +13,59 @@ describe('DateTimeRelative', () => {
     advanceTo(new Date(1524506400000)) // '2018-04-23T18:00:00.000Z'
   })
 
-  afterEach(cleanup)
-
   afterAll(() => {
     // Restore the implementation of global Date object
     clear()
   })
 
   it('renders snapshot', () => {
-    const wrapper = renderWithIntl(<DateTimeRelative value={new Date().toISOString()} />)
+    const wrapper = renderWithIntl(
+      <DateTimeRelative value={new Date().toISOString()} />
+    )
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('renders "seconds ago" string', () => {
-    const wrapper = renderWithIntl(<DateTimeRelative value="2018-04-23T17:59:01.000Z" />)
+    const wrapper = renderWithIntl(
+      <DateTimeRelative value="2018-04-23T17:59:01.000Z" />
+    )
     expect(wrapper.container).toHaveTextContent('A few seconds ago')
   })
 
   it('renders "minutes ago" string', () => {
-    const wrapper = renderWithIntl(<DateTimeRelative value="2018-04-23T17:50:01.000Z" />)
+    const wrapper = renderWithIntl(
+      <DateTimeRelative value="2018-04-23T17:50:01.000Z" />
+    )
     expect(wrapper.container).toHaveTextContent('A few minutes ago')
   })
 
   it('renders "today at {time}" string', () => {
     // Pass in timezone as UTC to force it not to use server's time zone
-    const wrapper = renderWithIntl(<DateTimeRelative value="2018-04-23T12:00:00.000Z" timezone="UTC" />)
+    const wrapper = renderWithIntl(
+      <DateTimeRelative value="2018-04-23T12:00:00.000Z" timezone="UTC" />
+    )
     expect(wrapper.container).toHaveTextContent('Today at 12:00 PM')
   })
 
   it('renders "yesterday at {time}" string', () => {
     // Pass in timezone as UTC to force it not to use server's time zone
-    const wrapper = renderWithIntl(<DateTimeRelative value="2018-04-22T06:00:00.000Z" timezone="UTC" />)
+    const wrapper = renderWithIntl(
+      <DateTimeRelative value="2018-04-22T06:00:00.000Z" timezone="UTC" />
+    )
     expect(wrapper.container).toHaveTextContent('Yesterday at 6:00 AM')
   })
 
   it('renders a date that happened this year', () => {
-    const wrapper = renderWithIntl(<DateTimeRelative value="2018-02-03T18:00:00.000Z" />)
+    const wrapper = renderWithIntl(
+      <DateTimeRelative value="2018-02-03T18:00:00.000Z" />
+    )
     expect(wrapper.container).toHaveTextContent('February 3')
   })
 
   it('renders a date in another year', () => {
-    const wrapper = renderWithIntl(<DateTimeRelative value="2017-10-17T18:00:00.000Z" />)
+    const wrapper = renderWithIntl(
+      <DateTimeRelative value="2017-10-17T18:00:00.000Z" />
+    )
     expect(wrapper.container).toHaveTextContent('October 17, 2017')
   })
 })

assets/scripts/app/__tests__/DebugInfo.test.js

@@ -1,6 +1,6 @@
 /* eslint-env jest */
 import React from 'react'
-import { cleanup, fireEvent } from '@testing-library/react'
+import { fireEvent } from '@testing-library/react'
 import { renderWithRedux } from '../../../../test/helpers/render'
 import DebugInfo from '../DebugInfo'
 
@@ -13,8 +13,6 @@ describe('DebugInfo', () => {
     user: {}
   }
 
-  afterEach(cleanup)
-
   it('renders', () => {
     const wrapper = renderWithRedux(<DebugInfo />, { initialState })
     expect(wrapper.asFragment()).toMatchSnapshot()

assets/scripts/app/__tests__/NotificationBar.test.js

@@ -1,22 +1,23 @@
 /* eslint-env jest */
 import React from 'react'
-import { cleanup, fireEvent } from '@testing-library/react'
+import { fireEvent } from '@testing-library/react'
 import { renderWithIntl } from '../../../../test/helpers/render'
 import NotificationBar from '../NotificationBar'
 
 const TEST_NOTIFICATION = {
   display: true,
   lede: 'Heads up!',
-  text: 'Streetmix will be offline for maintainance on January 1, 2025 at 19:00 GMT.',
+  text:
+    'Streetmix will be offline for maintainance on January 1, 2025 at 19:00 GMT.',
   link: 'https://twitter.com/streetmix/',
   linkText: 'Follow us on Twitter for updates.'
 }
 
 describe('NotificationBar', () => {
-  afterEach(cleanup)
-
   it('renders snapshot', () => {
-    const wrapper = renderWithIntl(<NotificationBar locale="en" notification={TEST_NOTIFICATION} />)
+    const wrapper = renderWithIntl(
+      <NotificationBar locale="en" notification={TEST_NOTIFICATION} />
+    )
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
@@ -26,7 +27,9 @@ describe('NotificationBar', () => {
         display: true,
         link: TEST_NOTIFICATION.link
       }
-      const wrapper = renderWithIntl(<NotificationBar locale="en" notification={notification} />)
+      const wrapper = renderWithIntl(
+        <NotificationBar locale="en" notification={notification} />
+      )
       expect(wrapper.getByRole('link')).toHaveTextContent('More info')
     })
   })
@@ -38,32 +41,42 @@ describe('NotificationBar', () => {
     })
 
     it('renders nothing if notification is the empty object', () => {
-      const wrapper = renderWithIntl(<NotificationBar locale="en" notification={{}} />)
+      const wrapper = renderWithIntl(
+        <NotificationBar locale="en" notification={{}} />
+      )
       expect(wrapper.container.firstChild).toBeNull()
     })
 
     it('renders nothing if notification’s display property is false', () => {
       const notification = { ...TEST_NOTIFICATION, display: false }
-      const wrapper = renderWithIntl(<NotificationBar locale="en" notification={notification} />)
+      const wrapper = renderWithIntl(
+        <NotificationBar locale="en" notification={notification} />
+      )
       expect(wrapper.container.firstChild).toBeNull()
     })
 
     it('renders nothing if notification’s display property is true but has no other properties', () => {
       const notification = { display: true }
-      const wrapper = renderWithIntl(<NotificationBar locale="en" notification={notification} />)
+      const wrapper = renderWithIntl(
+        <NotificationBar locale="en" notification={notification} />
+      )
       expect(wrapper.container.firstChild).toBeNull()
     })
 
     it('renders nothing if the locale is not English', () => {
       const notification = { display: true }
-      const wrapper = renderWithIntl(<NotificationBar locale="de" notification={notification} />)
+      const wrapper = renderWithIntl(
+        <NotificationBar locale="de" notification={notification} />
+      )
       expect(wrapper.container.firstChild).toBeNull()
     })
   })
 
   describe('dismiss', () => {
     it('is no longer rendered after clicking the close button', () => {
-      const wrapper = renderWithIntl(<NotificationBar locale="en" notification={TEST_NOTIFICATION} />)
+      const wrapper = renderWithIntl(
+        <NotificationBar locale="en" notification={TEST_NOTIFICATION} />
+      )
       fireEvent.click(wrapper.getByTitle('Dismiss'))
       expect(wrapper.queryByText(TEST_NOTIFICATION.lede)).toBeNull()
     })

assets/scripts/app/__tests__/PrintContainer.test.js

@@ -1,6 +1,5 @@
 /* eslint-env jest */
 import React from 'react'
-import { cleanup } from '@testing-library/react'
 import { renderWithRedux } from '../../../../test/helpers/render'
 import PrintContainer from '../PrintContainer'
 
@@ -17,16 +16,18 @@ jest.mock('../../streets/image', () => ({
 }))
 
 describe('PrintContainer', () => {
-  afterEach(cleanup)
-
   it('renders', () => {
-    const wrapper = renderWithRedux(<PrintContainer />, { initialState: { app: { printing: false } } })
+    const wrapper = renderWithRedux(<PrintContainer />, {
+      initialState: { app: { printing: false } }
+    })
     const el = wrapper.container.querySelector('.print-container')
     expect(el).toBeInTheDocument()
   })
 
   it('renders image for printing', () => {
-    const wrapper = renderWithRedux(<PrintContainer />, { initialState: { app: { printing: true } } })
+    const wrapper = renderWithRedux(<PrintContainer />, {
+      initialState: { app: { printing: true } }
+    })
     expect(wrapper.getByRole('img')).toBeInTheDocument()
   })
 })

assets/scripts/app/__tests__/ScrollIndicators.test.js

@@ -1,6 +1,6 @@
 /* eslint-env jest */
 import React from 'react'
-import { fireEvent, cleanup } from '@testing-library/react'
+import { fireEvent } from '@testing-library/react'
 import { renderWithIntl as render } from '../../../../test/helpers/render'
 import ScrollIndicators from '../ScrollIndicators'
 
@@ -12,21 +12,27 @@ const baseProps = {
 }
 
 describe('ScrollIndicators', () => {
-  afterEach(cleanup)
-
   it('renders snapshot', () => {
     const wrapper = render(<ScrollIndicators {...baseProps} />)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('renders snapshot for zero indicators', () => {
-    const wrapper = render(<ScrollIndicators {...baseProps} scrollIndicatorsLeft={0} scrollIndicatorsRight={0} />)
+    const wrapper = render(
+      <ScrollIndicators
+        {...baseProps}
+        scrollIndicatorsLeft={0}
+        scrollIndicatorsRight={0}
+      />
+    )
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('handles scroll left on click', () => {
     const scrollStreet = jest.fn()
-    const wrapper = render(<ScrollIndicators {...baseProps} scrollStreet={scrollStreet} />)
+    const wrapper = render(
+      <ScrollIndicators {...baseProps} scrollStreet={scrollStreet} />
+    )
 
     fireEvent.click(wrapper.getByText('‹'))
 
@@ -35,7 +41,9 @@ describe('ScrollIndicators', () => {
 
   it('handles scroll right on click', () => {
     const scrollStreet = jest.fn()
-    const wrapper = render(<ScrollIndicators {...baseProps} scrollStreet={scrollStreet} />)
+    const wrapper = render(
+      <ScrollIndicators {...baseProps} scrollStreet={scrollStreet} />
+    )
 
     fireEvent.click(wrapper.getByText('›››'))
 

assets/scripts/app/__tests__/WelcomePanel.test.js

@@ -1,6 +1,6 @@
 /* eslint-env jest */
 import React from 'react'
-import { fireEvent, cleanup, waitForElement } from '@testing-library/react'
+import { fireEvent, waitForElement } from '@testing-library/react'
 import MockAdapter from 'axios-mock-adapter'
 import ConnectedWelcomePanel, { WelcomePanel } from '../WelcomePanel'
 import { renderWithReduxAndIntl } from '../../../../test/helpers/render'
@@ -22,7 +22,6 @@ describe('WelcomePanel', () => {
 
   afterEach(() => {
     apiMock.restore()
-    cleanup()
   })
 
   it('does not show if app is read-only', () => {
@@ -56,16 +55,28 @@ describe('WelcomePanel', () => {
     }
 
     beforeEach(() => {
-      getMode.mockImplementation(() => (2)) // NEW_STREET
-      isSignedIn.mockImplementation(() => (true))
+      getMode.mockImplementation(() => 2) // NEW_STREET
+      isSignedIn.mockImplementation(() => true)
     })
 
     it('copies the last street and highlights Start with a copy button', async () => {
-      const { queryByLabelText, getByLabelText, store } = renderWithReduxAndIntl(<ConnectedWelcomePanel />, { initialState: { street, settings: { priorLastStreetId: '2' }, app: { everythingLoaded: false } } })
+      const {
+        queryByLabelText,
+        getByLabelText,
+        store
+      } = renderWithReduxAndIntl(<ConnectedWelcomePanel />, {
+        initialState: {
+          street,
+          settings: { priorLastStreetId: '2' },
+          app: { everythingLoaded: false }
+        }
+      })
       store.dispatch(everythingLoaded())
       apiMock.onAny().reply(200, apiResponse)
       fireEvent.click(getByLabelText(/Start with a copy/))
-      const input = await waitForElement(() => queryByLabelText(/Start with a copy/))
+      const input = await waitForElement(() =>
+        queryByLabelText(/Start with a copy/)
+      )
       expect(input.checked).toBe(true)
     })
   })

assets/scripts/dialogs/Geotag/__tests__/LocationPopup.test.js

@@ -1,6 +1,6 @@
 /* eslint-env jest */
 import React from 'react'
-import { fireEvent, cleanup } from '@testing-library/react'
+import { fireEvent } from '@testing-library/react'
 import { renderWithIntl } from '../../../../../test/helpers/render'
 import LocationPopup from '../LocationPopup'
 
@@ -11,8 +11,6 @@ jest.mock('react-leaflet', () => {
 })
 
 describe('LocationPopup', () => {
-  afterEach(cleanup)
-
   it('does not render if a location is not provided', () => {
     const wrapper = renderWithIntl(<LocationPopup />)
 
@@ -22,10 +20,7 @@ describe('LocationPopup', () => {
 
   it('renders an address label', () => {
     const wrapper = renderWithIntl(
-      <LocationPopup
-        position={{ lat: 0, lng: 0 }}
-        label="foo"
-      />
+      <LocationPopup position={{ lat: 0, lng: 0 }} label="foo" />
     )
 
     // Expect the text to be visible

assets/scripts/dialogs/__tests__/AboutDialog.test.js

@@ -1,14 +1,13 @@
 /* eslint-env jest */
 import React from 'react'
-import { cleanup } from '@testing-library/react'
 import { renderWithReduxAndIntl } from '../../../../test/helpers/render'
 import AboutDialog from '../AboutDialog'
 
-jest.mock('../About/credits.json', () => require('../About/__mocks__/credits.json'))
+jest.mock('../About/credits.json', () =>
+  require('../About/__mocks__/credits.json')
+)
 
 describe('AboutDialog', () => {
-  afterEach(cleanup)
-
   it('renders snapshot', () => {
     const wrapper = renderWithReduxAndIntl(<AboutDialog />)
     expect(wrapper.asFragment()).toMatchSnapshot()

assets/scripts/dialogs/__tests__/NewsletterDialog.test.js

@@ -1,15 +1,12 @@
 /* eslint-env jest */
 import React from 'react'
-import { cleanup } from '@testing-library/react'
 import { renderWithReduxAndIntl } from '../../../../test/helpers/render'
 import NewsletterDialog from '../NewsletterDialog'
 
 // Mock Mailchimp HTML snippet
 jest.mock('../Newsletter/mailchimp.html', () => '<div>foo</div>')
 
 describe('NewsletterDialog', () => {
-  afterEach(cleanup)
-
   it('renders snapshot', () => {
     const wrapper = renderWithReduxAndIntl(<NewsletterDialog />)
     expect(wrapper.asFragment()).toMatchSnapshot()

assets/scripts/dialogs/__tests__/SaveAsImageDialog.test.js

@@ -1,6 +1,5 @@
 /* eslint-env jest */
 import React from 'react'
-import { cleanup } from '@testing-library/react'
 import { renderWithReduxAndIntl } from '../../../../test/helpers/render'
 import SaveAsImageDialog from '../SaveAsImageDialog'
 
@@ -31,10 +30,10 @@ const initialState = {
 }
 
 describe('SaveAsImageDialog', () => {
-  afterEach(cleanup)
-
   it('renders snapshot', () => {
-    const wrapper = renderWithReduxAndIntl(<SaveAsImageDialog />, { initialState })
+    const wrapper = renderWithReduxAndIntl(<SaveAsImageDialog />, {
+      initialState
+    })
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 })