test(component library): Upgrade from deprecated RTL APIs

- Issue with missing types: testing-library/react-testing-library#610

Author: m7kvqbe1

packages/react-component-library/package.json

@@ -71,6 +71,7 @@
     "@types/react-select": "^3.0.10",
     "@types/react-transition-group": "^4.2.3",
     "@types/storybook__react": "^5.2.1",
+    "@types/testing-library__react": "^10.0.1",
     "@types/uuid": "^7.0.2",
     "@types/yup": "^0.26.28",
     "@typescript-eslint/eslint-plugin": "^2.17.0",

packages/react-component-library/src/components/Modal/Modal.test.tsx

@@ -1,10 +1,11 @@
+// @ts-nocheck
 import React, { useState } from 'react'
 import '@testing-library/jest-dom/extend-expect'
 import {
   render,
   RenderResult,
   fireEvent,
-  waitForElement,
+  waitFor,
 } from '@testing-library/react'
 
 import { Button, ButtonProps } from '../Button'
@@ -191,7 +192,7 @@ describe('Modal', () => {
         beforeEach(() => {
           wrapper.getByText('Show').click()
 
-          return waitForElement(() => wrapper.queryAllByText('Hide'))
+          return waitFor(() => wrapper.queryAllByText('Hide'))
         })
 
         it('should be open', () => {
@@ -205,7 +206,7 @@ describe('Modal', () => {
           beforeEach(() => {
             wrapper.getByText('Hide').click()
 
-            return waitForElement(() => wrapper.queryAllByText('Show'))
+            return waitFor(() => wrapper.queryAllByText('Show'))
           })
 
           it('should be closed again', () => {

packages/react-component-library/src/components/NumberInput/NumberInput.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
-import { render, RenderResult, fireEvent, waitForElement } from '@testing-library/react'
+import { render, RenderResult, fireEvent } from '@testing-library/react'
 
 import { NumberInput } from './NumberInput'
 

packages/react-component-library/src/components/Popover/Popover.test.tsx

@@ -1,8 +1,13 @@
+// @ts-nocheck
 import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
 import { renderToStaticMarkup } from 'react-dom/server'
-
-import { render, RenderResult, fireEvent, wait } from '@testing-library/react'
+import {
+  render,
+  RenderResult,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react'
 
 import { Popover, POPOVER_PLACEMENT } from '.'
 
@@ -54,7 +59,7 @@ describe('Popover', () => {
         })
 
         it('to not be visible to the end user', async () => {
-          await wait(() => {
+          await waitFor(() => {
             expect(wrapper.getByTestId('floating-box').classList).not.toContain(
               'is-visible'
             )

packages/react-component-library/src/components/TabSet/TabSet.test.tsx

@@ -1,6 +1,12 @@
+// @ts-nocheck
 import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
-import { fireEvent, render, RenderResult, wait } from '@testing-library/react'
+import {
+  fireEvent,
+  render,
+  RenderResult,
+  waitFor,
+} from '@testing-library/react'
 
 import { Tab, TabSet } from '.'
 import { SCROLL_DIRECTION } from './constants'
@@ -151,7 +157,7 @@ describe('TabSet', () => {
     ) {
       wrapper.getByTestId(`scroll-${direction}`).click()
 
-      await wait(flushPromises)
+      await waitFor(flushPromises)
     }
 
     beforeEach(() => {

packages/react-component-library/src/fragments/Masthead/Masthead.test.tsx

@@ -1,6 +1,12 @@
+// @ts-nocheck
 import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
-import { fireEvent, render, RenderResult, wait } from '@testing-library/react'
+import {
+  fireEvent,
+  render,
+  RenderResult,
+  waitFor,
+} from '@testing-library/react'
 
 import { Link } from '../../index'
 import { Masthead, MastheadProps } from './Masthead'
@@ -136,11 +142,11 @@ describe('Masthead', () => {
           })
 
           it('should use the onSearch method passed to the masthead to search', async () => {
-            await wait(() => expect(props.onSearch).toHaveBeenCalledTimes(1))
+            await waitFor(() => expect(props.onSearch).toHaveBeenCalledTimes(1))
           })
 
           it('should hide the searchbar from view', async () => {
-            await wait(() =>
+            await waitFor(() =>
               expect(wrapper.queryByTestId('searchbar')).toBeNull()
             )
           })
@@ -221,7 +227,7 @@ describe('Masthead', () => {
         })
 
         it('should include the notification content sent to it', async () => {
-          await wait(() =>
+          await waitFor(() =>
             expect(wrapper.getByTestId('notifications')).toBeInTheDocument()
           )
         })
@@ -236,7 +242,7 @@ describe('Masthead', () => {
           beforeEach(async () => {
             const button = wrapper.queryByTestId('notification-button')
 
-            await wait(() => wrapper.getByTestId('notifications'))
+            await waitFor(() => wrapper.getByTestId('notifications'))
 
             fireEvent(
               button,
@@ -248,7 +254,7 @@ describe('Masthead', () => {
           })
 
           it('should remove the rule on the wrapper so mobile scrolling is enabled again', async () => {
-            await wait(() =>
+            await waitFor(() =>
               expect(wrapper.queryByTestId('masthead')).not.toHaveClass(
                 'rn-masthead--show-notifications'
               )

packages/react-component-library/src/fragments/NotificationPanel/NotificationPanel.test.tsx

@@ -1,10 +1,11 @@
+// @ts-nocheck
 import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
 import {
   fireEvent,
   render,
   RenderResult,
-  waitForElement,
+  waitFor,
   waitForElementToBeRemoved,
 } from '@testing-library/react'
 
@@ -91,7 +92,7 @@ describe('NotificationPanel', () => {
 
         button.click()
 
-        return waitForElement(() => wrapper.queryAllByText('Thomas Stephens'))
+        return waitFor(() => wrapper.queryAllByText('Thomas Stephens'))
       })
 
       it('should blur the button', () => {
@@ -135,7 +136,7 @@ describe('NotificationPanel', () => {
       beforeEach(async done => {
         wrapper.getByTestId('notification-button').click()
 
-        await waitForElement(() => wrapper.queryAllByText('Thomas Stephens'))
+        await waitFor(() => wrapper.queryAllByText('Thomas Stephens'))
 
         wrapper.getByText('View all notifications').parentElement.click()
 
@@ -170,7 +171,7 @@ describe('NotificationPanel', () => {
       beforeEach(() => {
         wrapper.getByTestId('notification-button').click()
 
-        return waitForElement(() => wrapper.queryAllByText('Thomas Stephens'))
+        return waitFor(() => wrapper.queryAllByText('Thomas Stephens'))
       })
 
       it('should default to showing notifications on the right', () => {
@@ -197,7 +198,7 @@ describe('NotificationPanel', () => {
       beforeEach(() => {
         wrapper.getByTestId('notification-button').click()
 
-        return waitForElement(() => wrapper.queryAllByText('Thomas Stephens'))
+        return waitFor(() => wrapper.queryAllByText('Thomas Stephens'))
       })
 
       it('should default to showing notifications on the right', () => {
@@ -224,7 +225,7 @@ describe('NotificationPanel', () => {
 
       wrapper.getByTestId('notification-button').click()
 
-      await waitForElement(() => wrapper.queryAllByText('Thomas Stephens'))
+      await waitFor(() => wrapper.queryAllByText('Thomas Stephens'))
 
       fireEvent(
         document,