Upgrade userEvent to v14

Author: iansan5653

package-lock.json

@@ -121,7 +121,7 @@
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "7.0.2",
-    "@testing-library/user-event": "13.1.9",
+    "@testing-library/user-event": "^14.3.0",
     "@types/chroma-js": "2.1.3",
     "@types/enzyme": "3.10.9",
     "@types/jest": "27.0.2",

package.json

@@ -153,7 +153,8 @@ describe('SegmentedControl', () => {
     }
   })
 
-  it('calls onChange with index of clicked segment button', () => {
+  it('calls onChange with index of clicked segment button', async () => {
+    const user = userEvent.setup()
     const handleChange = jest.fn()
     const {getByText} = render(
       <SegmentedControl aria-label="File view" onChange={handleChange}>
@@ -169,12 +170,13 @@ describe('SegmentedControl', () => {
 
     expect(handleChange).not.toHaveBeenCalled()
     if (buttonToClick) {
-      userEvent.click(buttonToClick)
+      await user.click(buttonToClick)
     }
     expect(handleChange).toHaveBeenCalledWith(1)
   })
 
-  it('calls segment button onClick if it is passed', () => {
+  it('calls segment button onClick if it is passed', async () => {
+    const user = userEvent.setup()
     const handleClick = jest.fn()
     const {getByText} = render(
       <SegmentedControl aria-label="File view">
@@ -190,12 +192,13 @@ describe('SegmentedControl', () => {
 
     expect(handleClick).not.toHaveBeenCalled()
     if (buttonToClick) {
-      userEvent.click(buttonToClick)
+      await user.click(buttonToClick)
     }
     expect(handleClick).toHaveBeenCalled()
   })
 
-  it('focuses the selected button first', () => {
+  it('focuses the selected button first', async () => {
+    const user = userEvent.setup()
     const {getByRole} = render(
       <>
         <button>Before</button>
@@ -212,8 +215,8 @@ describe('SegmentedControl', () => {
 
     expect(document.activeElement?.id).not.toEqual(initialFocusButtonNode.id)
 
-    userEvent.tab() // focus the button before the segmented control
-    userEvent.tab() // move focus into the segmented control
+    await user.tab() // focus the button before the segmented control
+    await user.tab() // move focus into the segmented control
 
     expect(document.activeElement?.id).toEqual(initialFocusButtonNode.id)
   })

src/SegmentedControl/SegmentedControl.test.tsx

@@ -193,7 +193,8 @@ describe('Autocomplete', () => {
   })
 
   describe('Autocomplete.Input', () => {
-    it('calls onChange', () => {
+    it('calls onChange', async () => {
+      const user = userEvent.setup()
       const onChangeMock = jest.fn()
       const {container} = HTMLRender(
         <LabelledAutocomplete
@@ -204,7 +205,7 @@ describe('Autocomplete', () => {
       const inputNode = container.querySelector('#autocompleteInput')
 
       expect(onChangeMock).not.toHaveBeenCalled()
-      inputNode && userEvent.type(inputNode, 'z')
+      inputNode && (await user.type(inputNode, 'z'))
       expect(onChangeMock).toHaveBeenCalled()
     })
 
@@ -244,15 +245,16 @@ describe('Autocomplete', () => {
       expect(onKeyUpMock).toHaveBeenCalled()
     })
 
-    it('calls onKeyPress', () => {
+    it('calls onKeyPress', async () => {
+      const user = userEvent.setup()
       const onKeyPressMock = jest.fn()
       const {getByLabelText} = HTMLRender(
         <LabelledAutocomplete inputProps={{onKeyPress: onKeyPressMock}} menuProps={{items: [], selectedItemIds: []}} />
       )
       const inputNode = getByLabelText(AUTOCOMPLETE_LABEL)
 
       expect(onKeyPressMock).not.toHaveBeenCalled()
-      userEvent.type(inputNode, '{enter}')
+      await user.type(inputNode, '{enter}')
       expect(onKeyPressMock).toHaveBeenCalled()
     })
 
@@ -281,44 +283,47 @@ describe('Autocomplete', () => {
       }, 0)
     })
 
-    it('sets the input value to the suggested item text and highlights the untyped part of the word', () => {
+    it('sets the input value to the suggested item text and highlights the untyped part of the word', async () => {
+      const user = userEvent.setup()
       const {container, getByDisplayValue} = HTMLRender(
         <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: []}} />
       )
       const inputNode = container.querySelector('#autocompleteInput')
 
-      inputNode && userEvent.type(inputNode, 'ze')
+      inputNode && (await user.type(inputNode, 'ze'))
       expect(getByDisplayValue('zero')).toBeDefined()
     })
 
-    it('does not show or highlight suggestion text after the user hits Backspace until they hit another key', () => {
+    it('does not show or highlight suggestion text after the user hits Backspace until they hit another key', async () => {
+      const user = userEvent.setup()
       const {container, getByDisplayValue} = HTMLRender(
         <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: []}} />
       )
       const inputNode = container.querySelector('#autocompleteInput')
 
       expect((inputNode as HTMLInputElement).selectionStart).toBe(0)
-      inputNode && userEvent.type(inputNode, 'ze')
+      inputNode && (await user.type(inputNode, 'ze'))
       expect(getByDisplayValue('zero')).toBeDefined()
       expect((inputNode as HTMLInputElement).selectionStart).toBe(2)
       expect((inputNode as HTMLInputElement).selectionEnd).toBe(4)
-      inputNode && userEvent.type(inputNode, '{backspace}')
+      inputNode && (await user.type(inputNode, '{backspace}'))
       expect((inputNode as HTMLInputElement).selectionStart).toBe(2)
       expect(getByDisplayValue('ze')).toBeDefined()
-      inputNode && userEvent.type(inputNode, 'r')
+      inputNode && (await user.type(inputNode, 'r'))
       expect((inputNode as HTMLInputElement).selectionStart).toBe(3)
       expect((inputNode as HTMLInputElement).selectionEnd).toBe(4)
       expect(getByDisplayValue('zero')).toBeDefined()
     })
 
-    it('clears the input value when the user hits Escape', () => {
+    it('clears the input value when the user hits Escape', async () => {
+      const user = userEvent.setup()
       const {container} = HTMLRender(<LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: []}} />)
       const inputNode = container.querySelector('#autocompleteInput')
 
       expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true')
-      inputNode && userEvent.type(inputNode, 'ze')
+      inputNode && (await user.type(inputNode, 'ze'))
       expect(inputNode?.getAttribute('aria-expanded')).toBe('true')
-      inputNode && userEvent.type(inputNode, '{esc}')
+      inputNode && (await user.type(inputNode, '{esc}'))
       expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true')
     })
 
@@ -332,18 +337,20 @@ describe('Autocomplete', () => {
   })
 
   describe('Autocomplete.Menu', () => {
-    it('calls a custom filter function', () => {
+    it('calls a custom filter function', async () => {
+      const user = userEvent.setup()
       const filterFnMock = jest.fn()
       const {container} = HTMLRender(
         <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: [], filterFn: filterFnMock}} />
       )
       const inputNode = container.querySelector('#autocompleteInput')
 
-      inputNode && userEvent.type(inputNode, 'ze')
+      inputNode && (await user.type(inputNode, 'ze'))
       expect(filterFnMock).toHaveBeenCalled()
     })
 
-    it('calls a custom sort function when the menu closes', () => {
+    it('calls a custom sort function when the menu closes', async () => {
+      const user = userEvent.setup()
       const sortOnCloseFnMock = jest.fn()
       const {container} = HTMLRender(
         <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: [], sortOnCloseFn: sortOnCloseFnMock}} />
@@ -354,7 +361,7 @@ describe('Autocomplete', () => {
       // current sort order matches the result of `sortOnCloseFnMock`
       expect(sortOnCloseFnMock).toHaveBeenCalledTimes(mockItems.length - 1)
       if (inputNode) {
-        userEvent.type(inputNode, 'ze')
+        await user.type(inputNode, 'ze')
         // eslint-disable-next-line github/no-blur
         fireEvent.blur(inputNode)
       }
@@ -365,18 +372,20 @@ describe('Autocomplete', () => {
       }, 0)
     })
 
-    it("calls onOpenChange with the menu's open state", () => {
+    it("calls onOpenChange with the menu's open state", async () => {
+      const user = userEvent.setup()
       const onOpenChangeMock = jest.fn()
       const {container} = HTMLRender(
         <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: [], onOpenChange: onOpenChangeMock}} />
       )
       const inputNode = container.querySelector('#autocompleteInput')
 
-      inputNode && userEvent.type(inputNode, 'ze')
+      inputNode && (await user.type(inputNode, 'ze'))
       expect(onOpenChangeMock).toHaveBeenCalled()
     })
 
-    it('calls onSelectedChange with the data for the selected items', () => {
+    it('calls onSelectedChange with the data for the selected items', async () => {
+      const user = userEvent.setup()
       const onSelectedChangeMock = jest.fn()
       const {container} = HTMLRender(
         <LabelledAutocomplete
@@ -388,7 +397,7 @@ describe('Autocomplete', () => {
       expect(onSelectedChangeMock).not.toHaveBeenCalled()
       if (inputNode) {
         fireEvent.focus(inputNode)
-        userEvent.type(inputNode, '{enter}')
+        await user.type(inputNode, '{enter}')
       }
 
       // wait a tick for the keyboard event to be dispatched to the menu item
@@ -397,7 +406,8 @@ describe('Autocomplete', () => {
       }, 0)
     })
 
-    it('does not close the menu when clicking an item in the menu if selectionVariant=multiple', () => {
+    it('does not close the menu when clicking an item in the menu if selectionVariant=multiple', async () => {
+      const user = userEvent.setup()
       const {getByText, container} = HTMLRender(
         <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: [], selectionVariant: 'multiple'}} />
       )
@@ -408,7 +418,7 @@ describe('Autocomplete', () => {
       inputNode && fireEvent.focus(inputNode)
       expect(inputNode?.getAttribute('aria-expanded')).toBe('true')
       fireEvent.click(itemToClickNode)
-      inputNode && userEvent.type(inputNode, '{enter}')
+      inputNode && (await user.type(inputNode, '{enter}'))
       expect(inputNode?.getAttribute('aria-expanded')).toBe('true')
     })
 

src/__tests__/Autocomplete.test.tsx

@@ -45,19 +45,20 @@ describe('Checkbox', () => {
     expect(checkbox.checked).toEqual(true)
   })
 
-  it('accepts a change handler that can alter the checkbox state', () => {
+  it('accepts a change handler that can alter the checkbox state', async () => {
+    const user = userEvent.setup()
     const handleChange = jest.fn()
     const {getByRole} = render(<Checkbox onChange={handleChange} />)
 
     const checkbox = getByRole('checkbox') as HTMLInputElement
 
     expect(checkbox.checked).toEqual(false)
 
-    userEvent.click(checkbox)
+    await user.click(checkbox)
     expect(handleChange).toHaveBeenCalled()
     expect(checkbox.checked).toEqual(true)
 
-    userEvent.click(checkbox)
+    await user.click(checkbox)
     expect(handleChange).toHaveBeenCalled()
     expect(checkbox.checked).toEqual(false)
   })
@@ -72,7 +73,8 @@ describe('Checkbox', () => {
     expect(checkbox.checked).toEqual(false)
   })
 
-  it('renders an inactive checkbox state correctly', () => {
+  it('renders an inactive checkbox state correctly', async () => {
+    const user = userEvent.setup()
     const handleChange = jest.fn()
     const {getByRole, rerender} = render(<Checkbox disabled onChange={handleChange} />)
 
@@ -82,7 +84,7 @@ describe('Checkbox', () => {
     expect(checkbox.checked).toEqual(false)
     expect(checkbox).toHaveAttribute('aria-disabled', 'true')
 
-    userEvent.click(checkbox)
+    await user.click(checkbox)
 
     expect(checkbox.disabled).toEqual(true)
     expect(checkbox.checked).toEqual(false)
@@ -94,14 +96,15 @@ describe('Checkbox', () => {
     expect(checkbox).toHaveAttribute('aria-disabled', 'false')
   })
 
-  it('renders an uncontrolled component correctly', () => {
+  it('renders an uncontrolled component correctly', async () => {
+    const user = userEvent.setup()
     const {getByRole} = render(<Checkbox defaultChecked />)
 
     const checkbox = getByRole('checkbox') as HTMLInputElement
 
     expect(checkbox.checked).toEqual(true)
 
-    userEvent.click(checkbox)
+    await user.click(checkbox)
 
     expect(checkbox.checked).toEqual(false)
   })

src/__tests__/Checkbox.test.tsx

@@ -91,7 +91,8 @@ describe('CheckboxGroup', () => {
 
     expect(requiredIndicator).toBeInTheDocument()
   })
-  it('calls onChange handlers passed to CheckboxGroup and Checkbox', () => {
+  it('calls onChange handlers passed to CheckboxGroup and Checkbox', async () => {
+    const user = userEvent.setup()
     const handleParentChange = jest.fn()
     const handleCheckboxChange = jest.fn()
     const {getByLabelText} = render(
@@ -115,11 +116,12 @@ describe('CheckboxGroup', () => {
 
     expect(handleParentChange).not.toHaveBeenCalled()
     expect(handleCheckboxChange).not.toHaveBeenCalled()
-    userEvent.click(checkbox)
+    await user.click(checkbox)
     expect(handleParentChange).toHaveBeenCalled()
     expect(handleCheckboxChange).toHaveBeenCalled()
   })
-  it('calls onChange handler on CheckboxGroup with selected values', () => {
+  it('calls onChange handler on CheckboxGroup with selected values', async () => {
+    const user = userEvent.setup()
     const handleParentChange = jest.fn()
     const {getByLabelText} = render(
       <CheckboxGroup onChange={handleParentChange}>
@@ -142,7 +144,7 @@ describe('CheckboxGroup', () => {
     const checkbox = getByLabelText('Choice one') as HTMLInputElement
 
     expect(handleParentChange).not.toHaveBeenCalled()
-    userEvent.click(checkbox)
+    await user.click(checkbox)
     expect(handleParentChange).toHaveBeenCalledWith(
       ['two', 'one'],
       expect.objectContaining({
@@ -151,7 +153,7 @@ describe('CheckboxGroup', () => {
         })
       })
     )
-    userEvent.click(checkbox)
+    await user.click(checkbox)
     expect(handleParentChange).toHaveBeenCalledWith(
       ['two'],
       expect.objectContaining({