Update Jest and test setup for @testing-library/react (#2288)

* test: add jest-watch-typeahead plugin

* refactor: remove imports to @testing-library/jest-dom

* test: update jest to v29

* chore: remove babel-polyfill calls

* refactor: remove manual cleanup calls from @testing-library/react

* Apply suggestions from code review

* Update src/__tests__/ActionList.test.tsx

Author: joshblack

jest.config.js

@@ -11,5 +11,6 @@ module.exports = {
   testMatch: ['<rootDir>/(src|codemods)/**/*.test.[jt]s?(x)', '!**/*.types.test.[jt]s?(x)'],
   transformIgnorePatterns: [
     'node_modules/(?!@github/combobox-nav|@koddsson/textarea-caret|@github/markdown-toolbar-element)'
-  ]
+  ],
+  watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname']
 }

package-lock.json

@@ -125,7 +125,7 @@
     "@storybook/addon-links": "^6.5.9",
     "@storybook/jest": "0.0.10",
     "@storybook/react": "6.5.9",
-    "@storybook/test-runner": "0.4.0",
+    "@storybook/test-runner": "0.7.0",
     "@storybook/testing-library": "0.0.13",
     "@testing-library/dom": "8.13.0",
     "@testing-library/jest-dom": "5.16.4",
@@ -170,10 +170,12 @@
     "eslint-plugin-react-hooks": "4.2.0",
     "front-matter": "4.0.2",
     "husky": "7.0.4",
-    "jest": "27.4.5",
+    "jest": "29.0.1",
     "jest-axe": "5.0.1",
+    "jest-environment-jsdom": "29.0.1",
     "jest-matchmedia-mock": "1.1.0",
     "jest-styled-components": "6.3.4",
+    "jest-watch-typeahead": "2.1.1",
     "jscodeshift": "0.13.0",
     "lint-staged": "12.1.2",
     "lodash.isempty": "4.4.0",

package.json

@@ -1,12 +1,10 @@
-import {cleanup, render as HTMLRender, waitFor, fireEvent} from '@testing-library/react'
-import 'babel-polyfill'
+import {render as HTMLRender, waitFor, fireEvent} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import React from 'react'
 import theme from '../theme'
 import {ActionList} from '../ActionList'
 import {behavesAsComponent, checkExports, checkStoriesForAxeViolations} from '../utils/testing'
 import {BaseStyles, ThemeProvider, SSRProvider} from '..'
-import '@testing-library/jest-dom'
 expect.extend(toHaveNoViolations)
 
 function SimpleActionList(): JSX.Element {
@@ -69,7 +67,6 @@ describe('ActionList', () => {
     const {container} = HTMLRender(<SimpleActionList />)
     const results = await axe(container)
     expect(results).toHaveNoViolations()
-    cleanup()
   })
 
   it('should fire onSelect on click and keypress', async () => {
@@ -95,8 +92,6 @@ describe('ActionList', () => {
 
     expect(options[0]).toHaveAttribute('aria-selected', 'false')
     expect(options[1]).toHaveAttribute('aria-selected', 'true')
-
-    cleanup()
   })
 
   it('should skip onSelect on disabled items', async () => {
@@ -115,8 +110,6 @@ describe('ActionList', () => {
 
     expect(options[0]).toHaveAttribute('aria-selected', 'true')
     expect(options[2]).toHaveAttribute('aria-selected', 'false')
-
-    cleanup()
   })
 
   it('should throw when selected is provided without a selectionVariant on parent', async () => {
@@ -133,7 +126,6 @@ describe('ActionList', () => {
       )
     }).toThrow('For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined')
 
-    cleanup()
     mockError.mockRestore()
   })
 
@@ -149,8 +141,6 @@ describe('ActionList', () => {
     fireEvent.click(option)
     fireEvent.keyPress(option, {key: 'Enter', charCode: 13})
     expect(option).toBeInTheDocument()
-
-    cleanup()
   })
 
   checkStoriesForAxeViolations('ActionList/fixtures')

src/__tests__/ActionList.test.tsx

@@ -1,13 +1,11 @@
-import {cleanup, render as HTMLRender, waitFor} from '@testing-library/react'
+import {render as HTMLRender, waitFor} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import 'babel-polyfill'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import React from 'react'
 import theme from '../theme'
 import {ActionMenu, ActionList, BaseStyles, ThemeProvider, SSRProvider} from '..'
 import {behavesAsComponent, checkExports, checkStoriesForAxeViolations} from '../utils/testing'
 import {SingleSelection, MixedSelection} from '../stories/ActionMenu/examples.stories'
-import '@testing-library/jest-dom'
 expect.extend(toHaveNoViolations)
 
 function Example(): JSX.Element {
@@ -55,7 +53,6 @@ describe('ActionMenu', () => {
     await user.click(button)
 
     expect(component.getByRole('menu')).toBeInTheDocument()
-    cleanup()
   })
 
   it('should open Menu on MenuButton keypress', async () => {
@@ -67,7 +64,6 @@ describe('ActionMenu', () => {
     await user.keyboard('{Enter}')
 
     expect(component.getByRole('menu')).toBeInTheDocument()
-    cleanup()
   })
 
   it('should close Menu on selecting an action with click', async () => {
@@ -81,7 +77,6 @@ describe('ActionMenu', () => {
     await user.click(menuItems[0])
 
     expect(component.queryByRole('menu')).toBeNull()
-    cleanup()
   })
 
   it('should close Menu on selecting an action with Enter', async () => {
@@ -96,7 +91,6 @@ describe('ActionMenu', () => {
     await user.keyboard('{Enter}')
 
     expect(component.queryByRole('menu')).toBeNull()
-    cleanup()
   })
 
   it('should not close Menu if event is prevented', async () => {
@@ -111,8 +105,6 @@ describe('ActionMenu', () => {
 
     // menu should still be open
     expect(component.getByRole('menu')).toBeInTheDocument()
-
-    cleanup()
   })
 
   it('should be able to select an Item with selectionVariant', async () => {
@@ -133,7 +125,6 @@ describe('ActionMenu', () => {
     // open menu again and check if the first option is checked
     await user.click(button)
     expect(component.getAllByRole('menuitemradio')[0]).toHaveAttribute('aria-checked', 'true')
-    cleanup()
   })
 
   it('should assign the right roles with groups & mixed selectionVariant', async () => {
@@ -149,8 +140,6 @@ describe('ActionMenu', () => {
 
     expect(component.getByLabelText('Status')).toHaveAttribute('role', 'menuitemradio')
     expect(component.getByLabelText('Clear Group by')).toHaveAttribute('role', 'menuitem')
-
-    cleanup()
   })
 
   it('should keep focus on Button when menu is opened with click', async () => {
@@ -164,8 +153,6 @@ describe('ActionMenu', () => {
     await user.click(button)
     expect(component.queryByRole('menu')).toBeInTheDocument()
     expect(document.activeElement).toEqual(button)
-
-    cleanup()
   })
 
   it('should select first element when ArrowDown is pressed after opening Menu with click', async () => {
@@ -181,7 +168,6 @@ describe('ActionMenu', () => {
     await user.keyboard('{ArrowDown}')
 
     expect(component.getAllByRole('menuitem')[0]).toEqual(document.activeElement)
-    cleanup()
   })
 
   it('should select last element when ArrowUp is pressed after opening Menu with click', async () => {
@@ -199,7 +185,6 @@ describe('ActionMenu', () => {
     await user.keyboard('{ArrowUp}')
 
     expect(component.getAllByRole('menuitem').pop()).toEqual(document.activeElement)
-    cleanup()
   })
 
   it('should close the menu if Tab is pressed and move to next element', async () => {
@@ -225,15 +210,12 @@ describe('ActionMenu', () => {
       expect(document.activeElement).toEqual(component.getByPlaceholderText('next focusable element'))
       expect(component.queryByRole('menu')).not.toBeInTheDocument()
     })
-
-    cleanup()
   })
 
   it('should have no axe violations', async () => {
     const {container} = HTMLRender(<Example />)
     const results = await axe(container)
     expect(results).toHaveNoViolations()
-    cleanup()
   })
 
   checkStoriesForAxeViolations('ActionMenu/fixtures')

src/__tests__/ActionMenu.test.tsx

@@ -1,9 +1,8 @@
 import React, {useCallback, useState} from 'react'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import {behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup, fireEvent} from '@testing-library/react'
+import {render as HTMLRender, fireEvent} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
 import {SSRProvider} from '../index'
 import {Button} from '../deprecated'
 import theme from '../theme'
@@ -71,14 +70,12 @@ describe('AnchoredOverlay', () => {
     const {container} = HTMLRender(<AnchoredOverlayTestComponent initiallyOpen={true}></AnchoredOverlayTestComponent>)
     const results = await axe(container)
     expect(results).toHaveNoViolations()
-    cleanup()
   })
 
   it('should have no axe violations when closed', async () => {
     const {container} = HTMLRender(<AnchoredOverlayTestComponent></AnchoredOverlayTestComponent>)
     const results = await axe(container)
     expect(results).toHaveNoViolations()
-    cleanup()
   })
 
   it('should call onOpen when the anchor is clicked', () => {

src/__tests__/AnchoredOverlay.test.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import {render} from '../utils/testing'
 import {render as HTMLRender, fireEvent, waitFor} from '@testing-library/react'
 import {toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
 import Autocomplete, {AutocompleteInputProps} from '../Autocomplete'
 import {SSRProvider} from '../index'
 import theme from '../theme'

src/__tests__/Autocomplete.test.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import {Avatar} from '..'
 import theme from '../theme'
 import {px, render, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {render as HTMLRender} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
+
 expect.extend(toHaveNoViolations)
 
 describe('Avatar', () => {
@@ -18,7 +18,6 @@ describe('Avatar', () => {
     const {container} = HTMLRender(<Avatar src="primer.png" />)
     const results = await axe(container)
     expect(results).toHaveNoViolations()
-    cleanup()
   })
 
   it('renders small by default', () => {

src/__tests__/Avatar.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import {AvatarStack} from '..'
 import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {render as HTMLRender} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
+
 expect.extend(toHaveNoViolations)
 
 const avatarComp = (
@@ -39,7 +39,6 @@ describe('Avatar', () => {
     const {container} = HTMLRender(avatarComp)
     const results = await axe(container)
     expect(results).toHaveNoViolations()
-    cleanup()
   })
 
   it('respects alignRight props', () => {

src/__tests__/AvatarStack.test.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import theme from '../theme'
 import {BorderBox} from '../deprecated'
 import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {render as HTMLRender} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
+
 expect.extend(toHaveNoViolations)
 
 describe('BorderBox', () => {
@@ -18,7 +18,6 @@ describe('BorderBox', () => {
     const {container} = HTMLRender(<BorderBox />)
     const results = await axe(container)
     expect(results).toHaveNoViolations()
-    cleanup()
   })
 
   it('renders borders', () => {