chore(react-testing-library): updated react testing library (#18449)

ui/jestSetup.ts

@@ -1,10 +1,13 @@
-import {cleanup} from 'react-testing-library'
+import {cleanup} from '@testing-library/react'
 import 'intersection-observer'
+import MutationObserver from 'mutation-observer'
+// Adds MutationObserver as a polyfill for testing
+window.MutationObserver = MutationObserver
 
 jest.mock('honeybadger-js', () => () => null)
 
 process.env.API_PREFIX = '/'
-// cleans up state between react-testing-library tests
+// cleans up state between @testing-library/react tests
 afterEach(() => {
   cleanup()
 })

ui/package.json

@@ -52,6 +52,7 @@
     "@babel/core": "^7.5.5",
     "@babel/preset-env": "^7.5.5",
     "@influxdata/oats": "0.5.0",
+    "@testing-library/react": "^10.2.1",
     "@types/chroma-js": "^1.3.4",
     "@types/codemirror": "^0.0.56",
     "@types/d3-color": "^1.2.1",
@@ -104,15 +105,16 @@
     "http-proxy-middleware": "^0.18.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.8.0",
+    "jest-fetch-mock": "^3.0.3",
     "jest-junit": "^10.0.0",
     "jsdom": "^9.0.0",
     "junit-viewer": "^4.11.1",
     "mini-css-extract-plugin": "^0.8.0",
     "mocha": "^5.2.0",
     "mocha-junit-reporter": "^1.18.0",
+    "mutation-observer": "^1.0.3",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "prettier": "^1.16.4",
-    "react-testing-library": "^5.4.4",
     "sass": "^1.22.7",
     "sass-loader": "^7.1.0",
     "source-map-loader": "^0.2.4",

ui/src/alerting/components/builder/ThresholdCondition.test.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React from 'react'
-import {render, fireEvent} from 'react-testing-library'
+import {render, fireEvent} from '@testing-library/react'
 
 // Components
 import {ThresholdCondition} from 'src/alerting/components/builder/ThresholdCondition'

ui/src/dashboards/components/NoteEditorPreview.test.tsx

@@ -7,7 +7,7 @@ jest.mock('honeybadger-js', () => {
   }
 })
 
-import {render} from 'react-testing-library'
+import {render} from '@testing-library/react'
 
 describe('the NoteEditor markdown renderer', () => {
   describe('image rendering behavior', () => {

ui/src/dataLoaders/components/BucketsDropdown.test.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React from 'react'
-import {render} from 'react-testing-library'
+import {render} from '@testing-library/react'
 
 // Components
 import BucketsDropdown from 'src/dataLoaders/components/BucketsDropdown'

ui/src/dataLoaders/components/verifyStep/DataListening.test.tsx

@@ -1,18 +1,20 @@
 // Libraries
 import React from 'react'
+import fetchMock from 'jest-fetch-mock'
+fetchMock.enableMocks()
 
 // Components
 import DataListening from 'src/dataLoaders/components/verifyStep/DataListening'
 
 // Utils
 import {renderWithRedux} from 'src/mockState'
-import {fireEvent} from 'react-testing-library'
+import {fireEvent} from '@testing-library/react'
 
 describe('Onboarding.Components.DataListening', () => {
   describe('if button is clicked', () => {
     it('displays connection information', () => {
       const {getByTitle, getByText} = renderWithRedux(
-        <DataListening bucket="bucket" />
+        <DataListening bucket="bucket" params={{orgID: 'org123'}} />
       )
 
       const button = getByTitle('Listen for Data')

ui/src/dataLoaders/components/verifyStep/DataListening.tsx

@@ -33,8 +33,16 @@ const FETCH_WAIT = 5000
 const SECONDS = 60
 const TIMER_WAIT = 1000
 
+interface ExtendedRouterProps extends WithRouterProps {
+  params: {
+    orgID: string
+  }
+}
+
+type Props = ExtendedRouterProps & OwnProps
+
 @ErrorHandling
-class DataListening extends PureComponent<OwnProps & WithRouterProps, State> {
+class DataListening extends PureComponent<Props, State> {
   private intervalID: NodeJS.Timer
   private startTime: number
   private timer: NodeJS.Timer

ui/src/mockState.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {Provider} from 'react-redux'
 import {Router, createMemoryHistory} from 'react-router'
 
-import {render} from 'react-testing-library'
+import {render} from '@testing-library/react'
 import {initialState as initialVariablesState} from 'src/variables/reducers'
 import {initialState as initialUserSettingsState} from 'src/userSettings/reducers'
 import {default as configureStore, clearStore} from 'src/store/configureStore'

ui/src/notebooks/context/time.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import {render} from 'react-testing-library'
+import {render} from '@testing-library/react'
 
 import {
   TimeContext,

ui/src/onboarding/components/OnboardingButtons.test.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React from 'react'
-import {render, fireEvent} from 'react-testing-library'
+import {render, fireEvent} from '@testing-library/react'
 
 // Components
 import OnboardingButtons from 'src/onboarding/components/OnboardingButtons'

ui/src/shared/components/DurationSelector.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import DurationSelector from './DurationSelector'
-import {render, getByText} from 'react-testing-library'
+import {render, getByText} from '@testing-library/react'
 
 describe('DurationSelector', () => {
   test('should match selected duration to duration option', () => {

ui/src/shared/components/EventMarkers.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import {render, fireEvent, wait} from 'react-testing-library'
+import {render, fireEvent, waitFor} from '@testing-library/react'
 import {LowercaseCheckStatusLevel} from 'src/types'
 
 import {scaleLinear} from 'd3-scale'
@@ -90,7 +90,7 @@ describe('EventMarkers', () => {
       'eye-open'
     )
 
-    await wait(() => getByTestId(`eventMarker`))
+    await waitFor(() => getAllByTestId(`eventMarker`))
     expect(getAllByTestId(`eventMarker`)).toHaveLength(2)
   })
 })

ui/src/shared/components/TemplatedCodeSnippet.test.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React from 'react'
-import {render} from 'react-testing-library'
+import {render} from '@testing-library/react'
 
 describe('TeplatedCodeSnippet', () => {
   beforeEach(() => {

ui/src/shared/components/ThresholdsSettings.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import {useState} from 'react'
-import {render, fireEvent, wait, getNodeText} from 'react-testing-library'
+import {render, fireEvent, waitFor, getNodeText} from '@testing-library/react'
 import ThresholdsSettings from 'src/shared/components/ThresholdsSettings'
 import {BASE_THRESHOLD_ID} from 'src/shared/constants/thresholds'
 import {Color} from 'src/types'
@@ -162,7 +162,7 @@ describe('ThresholdSettings', () => {
     fireEvent.blur(input1)
 
     // Wait for the changes to propogate to the test component
-    await wait(() => {
+    await waitFor(() => {
       getByTestId('did-rerender')
     })
 

ui/src/shared/components/inlineLabels/InlineLabelsEditor.test.tsx

@@ -1,7 +1,7 @@
 // Libraries
 import React from 'react'
 import {act} from 'react-dom/test-utils'
-import {fireEvent} from 'react-testing-library'
+import {fireEvent} from '@testing-library/react'
 import 'intersection-observer'
 
 // Components

ui/src/shared/components/inlineLabels/InlineLabelsList.test.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React from 'react'
-import {render, fireEvent} from 'react-testing-library'
+import {render, fireEvent} from '@testing-library/react'
 
 // Components
 import InlineLabelsList from 'src/shared/components/inlineLabels/InlineLabelsList'

ui/src/shared/components/tables/TableCell.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {render} from 'react-testing-library'
+import {render} from '@testing-library/react'
 import TableCell from 'src/shared/components/tables/TableCell'
 import {TableViewProperties} from 'src/client'
 import {PropsMultiGrid} from 'src/shared/components/MultiGrid'

ui/src/shared/components/views/MarkdownRenderer.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import {render} from 'react-testing-library'
+import {render} from '@testing-library/react'
 
 describe('the MarkdownRenderer wrapper around ReactMarkdown', () => {
   describe('image rendering behavior', () => {

ui/src/telegrafs/components/TelegrafOutputOverlay.test.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React from 'react'
-import {render} from 'react-testing-library'
+import {render} from '@testing-library/react'
 
 // NOTE: stubbing is required here as the CopyButton component
 // requires a redux store (alex)

ui/src/timeMachine/components/variableToolbar/VariableTooltipContents.test.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React from 'react'
-import {fireEvent} from 'react-testing-library'
+import {fireEvent} from '@testing-library/react'
 
 // Components
 import VariableTooltipContents from 'src/timeMachine/components/variableToolbar/VariableTooltipContents'
@@ -64,15 +64,15 @@ const setInitialState = (state: AppState) => {
 describe("Time Machine's variable dropdown", () => {
   describe('rendering map type variables', () => {
     it("renders the variables' keys, rather than their values", () => {
-      const {getByTestId, getByText} = renderWithRedux(
+      const {getByTestId, getByText, getAllByText} = renderWithRedux(
         <VariableTooltipContents variableID="04960e76e5afe000" />,
         setInitialState
       )
 
       fireEvent.click(getByText('Value'))
       fireEvent.click(getByTestId('variable-dropdown--button'))
       Object.keys(variableValues).forEach(variableKey => {
-        expect(getByText(variableKey)).toBeTruthy()
+        expect(getAllByText(variableKey)).toBeTruthy()
       })
     })
   })

ui/src/variables/components/VariableDropdown.test.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React from 'react'
-import {fireEvent} from 'react-testing-library'
+import {fireEvent} from '@testing-library/react'
 
 // Components
 import VariableDropdown from 'src/variables/components/VariableDropdown'

ui/src/variables/components/VariableForm.test.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React from 'react'
-import {render, fireEvent} from 'react-testing-library'
+import {render, fireEvent} from '@testing-library/react'
 
 // Components
 import VariableForm from 'src/variables/components/VariableForm'