chore(devdeps): update dependency eslint-plugin-testing-library to v7.5.3 (#5268)

renovate[bot] · matthprost · web-flow · commit 252fa378e6ad · 2025-07-02T14:16:47.000+02:00
* chore(devdeps): update dependency eslint-plugin-testing-library to v7.5.3

* fix: unit tests

* fix: lint issues

* fix: testing library

---------

Co-authored-by: renovate[bot] &lt;29139614+renovate[bot]@users.noreply.github.com&gt;
Co-authored-by: Matthias &lt;mprost@scaleway.com&gt;
diff --git a/package.json b/package.json
@@ -158,7 +158,7 @@
     "esbuild-plugin-browserslist": "1.0.1",
     "eslint": "9.29.0",
     "eslint-plugin-oxlint": "0.18.1",
-    "eslint-plugin-testing-library": "7.4.0",
+    "eslint-plugin-testing-library": "7.5.3",
     "expect": "29.7.0",
     "file-loader": "6.2.0",
     "globals": "16.2.0",
diff --git a/packages/form/src/components/CheckboxField/__tests__/index.test.tsx b/packages/form/src/components/CheckboxField/__tests__/index.test.tsx
@@ -52,7 +52,7 @@ describe('CheckboxField', () => {
     expect(asFragment()).toMatchSnapshot()
   })
 
-  test('should trigger events correctly', () => {
+  test('should trigger events correctly', async () => {
     const onFocus = vi.fn(() => {})
     const onChange = vi.fn(() => {})
     const onBlur = vi.fn(() => {})
@@ -71,7 +71,7 @@ describe('CheckboxField', () => {
     const input = screen.getByRole('checkbox', { hidden: true })
     act(() => input.focus())
     expect(onFocus).toBeCalledTimes(1)
-    act(() => input.click())
+    await userEvent.click(input)
     expect(onChange).toBeCalledTimes(1)
     act(() => input.blur())
     expect(onBlur).toBeCalledTimes(1)
diff --git a/packages/form/src/components/CheckboxGroupField/__tests__/index.test.tsx b/packages/form/src/components/CheckboxGroupField/__tests__/index.test.tsx
@@ -1,10 +1,11 @@
-import { act, screen } from '@testing-library/react'
+import { screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import { renderWithForm } from '@utils/test'
 import { describe, expect, test, vi } from 'vitest'
 import { CheckboxGroupField } from '..'
 
 describe('CheckboxField', () => {
-  test('should render correctly checked', () => {
+  test('should render correctly checked', async () => {
     const { asFragment } = renderWithForm(
       <CheckboxGroupField onChange={() => {}} name="Checkbox" legend="Label">
         <CheckboxGroupField.Checkbox name="value-1" value="value-1">
@@ -26,14 +27,14 @@ describe('CheckboxField', () => {
         hidden: true,
       },
     )
-    act(() => secondInput.click())
+    await userEvent.click(secondInput)
 
     expect(firstInput).not.toBeChecked()
     expect(secondInput).toBeChecked()
     expect(asFragment()).toMatchSnapshot()
   })
 
-  test('should trigger events correctly with required prop', () => {
+  test('should trigger events correctly with required prop', async () => {
     const onChange = vi.fn(() => {})
 
     const { asFragment } = renderWithForm(
@@ -57,11 +58,11 @@ describe('CheckboxField', () => {
       },
     )
     const input = screen.getAllByRole('checkbox', { hidden: true })[0]
-    act(() => input.click())
+    await userEvent.click(input)
     expect(onChange).toBeCalledTimes(1)
     expect(input).toBeChecked()
 
-    act(() => input.click())
+    await userEvent.click(input)
     expect(onChange).toBeCalledTimes(2)
     expect(input).not.toBeChecked()
 
diff --git a/packages/form/src/components/KeyValueField/__tests__/index.test.tsx b/packages/form/src/components/KeyValueField/__tests__/index.test.tsx
@@ -1,10 +1,11 @@
-import { act, screen } from '@testing-library/react'
+import { screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import { renderWithForm } from '@utils/test'
 import { describe, expect, it } from 'vitest'
 import { KeyValueField } from '..'
 
 describe('KeyValueField', () => {
-  it('should render with default props', () => {
+  it('should render with default props', async () => {
     const { asFragment } = renderWithForm(
       <KeyValueField
         name="test"
@@ -23,14 +24,10 @@ describe('KeyValueField', () => {
       />,
     )
     const addButton = screen.getByTestId('add-button')
-    act(() => {
-      addButton.click()
-    })
+    await userEvent.click(addButton)
 
     const removeButton = screen.getByTestId('remove-button-0')
-    act(() => {
-      removeButton.click()
-    })
+    await userEvent.click(removeButton)
     expect(asFragment()).toMatchSnapshot()
   })
 
diff --git a/packages/form/src/components/NumberInputField/__tests__/index.test.tsx b/packages/form/src/components/NumberInputField/__tests__/index.test.tsx
@@ -34,7 +34,7 @@ describe('NumberInputField', () => {
     expect(asFragment()).toMatchSnapshot()
   })
 
-  test('should trigger events correctly', () => {
+  test('should trigger events correctly', async () => {
     const onFocus = vi.fn(() => {})
     const onChange = vi.fn(() => {})
     const onBlur = vi.fn(() => {})
@@ -57,9 +57,7 @@ describe('NumberInputField', () => {
       input.focus()
     })
     expect(onFocus).toBeCalledTimes(1)
-    act(() => {
-      input.click()
-    })
+    await userEvent.click(input)
     expect(onChange).toBeCalledTimes(0)
     act(() => {
       input.blur()
diff --git a/packages/form/src/components/RadioField/__tests__/index.test.tsx b/packages/form/src/components/RadioField/__tests__/index.test.tsx
@@ -1,4 +1,5 @@
 import { act, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import { renderWithForm } from '@utils/test'
 import { describe, expect, test, vi } from 'vitest'
 import { RadioField } from '..'
@@ -42,7 +43,7 @@ describe('RadioField', () => {
     expect(asFragment()).toMatchSnapshot()
   })
 
-  test('should trigger events correctly', () => {
+  test('should trigger events correctly', async () => {
     const onFocus = vi.fn(() => {})
     const onChange = vi.fn(() => {})
     const onBlur = vi.fn(() => {})
@@ -60,7 +61,7 @@ describe('RadioField', () => {
     const input = screen.getByRole('radio', { hidden: true })
     act(() => input.focus())
     expect(onFocus).toBeCalledTimes(1)
-    act(() => input.click())
+    await userEvent.click(input)
     expect(onChange).toBeCalledTimes(1)
     act(() => input.blur())
     expect(onBlur).toBeCalledTimes(1)
diff --git a/packages/form/src/components/RadioGroupField/__tests__/index.test.tsx b/packages/form/src/components/RadioGroupField/__tests__/index.test.tsx
@@ -1,10 +1,11 @@
-import { act, screen } from '@testing-library/react'
+import { screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import { renderWithForm } from '@utils/test'
 import { describe, expect, test, vi } from 'vitest'
 import { RadioGroupField } from '..'
 
 describe('RadioField', () => {
-  test('should render correctly checked', () => {
+  test('should render correctly checked', async () => {
     const { asFragment } = renderWithForm(
       <RadioGroupField
         value="value-1"
@@ -19,15 +20,15 @@ describe('RadioField', () => {
     const [firstInput, secondInput] = screen.getAllByRole('radio', {
       hidden: true,
     })
-    act(() => secondInput.click())
+    await userEvent.click(secondInput)
 
     expect(firstInput).not.toBeChecked()
     expect(secondInput).toBeChecked()
 
     expect(asFragment()).toMatchSnapshot()
   })
 
-  test('should trigger events correctly', () => {
+  test('should trigger events correctly', async () => {
     const onChange = vi.fn(() => {})
 
     const { asFragment } = renderWithForm(
@@ -42,7 +43,7 @@ describe('RadioField', () => {
       </RadioGroupField>,
     )
     const input = screen.getAllByRole('radio', { hidden: true })[0]
-    act(() => input.click())
+    await userEvent.click(input)
     expect(onChange).toBeCalledTimes(1)
     expect(asFragment()).toMatchSnapshot()
   })
diff --git a/packages/form/src/components/SelectInputField/__tests__/index.test.tsx b/packages/form/src/components/SelectInputField/__tests__/index.test.tsx
@@ -1,4 +1,5 @@
 import { act, fireEvent, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import { renderWithForm } from '@utils/test'
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { SelectInputField } from '..'
@@ -50,7 +51,7 @@ describe('SelectInputField', () => {
     expect(asFragment()).toMatchSnapshot()
   })
 
-  test('should display right value on grouped options', () => {
+  test('should display right value on grouped options', async () => {
     const selectedOption = { label: 'Group Label', value: 'Group Value' }
     const options = [
       {
@@ -73,7 +74,7 @@ describe('SelectInputField', () => {
       // eslint-disable-next-line testing-library/no-node-access
     ).firstChild as HTMLElement
 
-    act(() => option.click())
+    await userEvent.click(option)
 
     // react-select works with a hidden input to handle value.
     // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container
@@ -86,7 +87,7 @@ describe('SelectInputField', () => {
     expect(asFragment()).toMatchSnapshot()
   })
 
-  test('should trigger events', () => {
+  test('should trigger events', async () => {
     const onChange = vi.fn()
 
     const { asFragment } = renderWithForm(
@@ -105,7 +106,7 @@ describe('SelectInputField', () => {
       // eslint-disable-next-line testing-library/no-node-access
       screen.getByTestId('option-test-value').firstChild as HTMLElement
 
-    act(() => option.click())
+    await userEvent.click(option)
     expect(onChange).toBeCalledTimes(1)
     act(() => select.blur())
     expect(asFragment()).toMatchSnapshot()
diff --git a/packages/form/src/components/SelectInputFieldV2/__tests__/index.test.tsx b/packages/form/src/components/SelectInputFieldV2/__tests__/index.test.tsx
@@ -39,12 +39,12 @@ describe('SelectInputField', () => {
       <SelectInputFieldV2 name="test" options={planets} searchable={false} />,
     )
     const select = screen.getByTestId('select-input-test')
-    act(() => select.click())
+    await userEvent.click(select)
     fireEvent.keyDown(select, { key: 'ArrowDown', keyCode: 40 })
     const mercury = screen.getByTestId(`option-stack-mercury`)
 
-    act(() => mercury.click())
-    act(() => select.click())
+    await userEvent.click(mercury)
+    await userEvent.click(select)
     await waitFor(() => {
       expect(screen.getByTestId(`option-stack-mercury`)).toBeVisible()
     })
diff --git a/packages/form/src/components/SelectableCardField/__tests__/index.test.tsx b/packages/form/src/components/SelectableCardField/__tests__/index.test.tsx
@@ -37,7 +37,7 @@ describe('SelectableCardField', () => {
     expect(asFragment()).toMatchSnapshot()
   })
 
-  test('should trigger events correctly', () => {
+  test('should trigger events correctly', async () => {
     const onFocus = vi.fn(() => {})
     const onChange = vi.fn(() => {})
     const onBlur = vi.fn(() => {})
@@ -57,7 +57,7 @@ describe('SelectableCardField', () => {
     const input = screen.getByRole('radio', { hidden: true })
     act(() => input.focus())
     expect(onFocus).toBeCalledTimes(1)
-    act(() => input.click())
+    await userEvent.click(input)
     expect(onChange).toBeCalledTimes(1)
     act(() => input.blur())
     expect(onBlur).toBeCalledTimes(1)
diff --git a/packages/form/src/components/SelectableCardGroupField/__tests__/index.test.tsx b/packages/form/src/components/SelectableCardGroupField/__tests__/index.test.tsx
@@ -1,4 +1,5 @@
-import { act, screen } from '@testing-library/react'
+import { screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import { renderWithForm } from '@utils/test'
 import { describe, expect, test, vi } from 'vitest'
 import { SelectableCardGroupField } from '../..'
@@ -61,7 +62,7 @@ describe('SelectableCardField', () => {
     expect(asFragment()).toMatchSnapshot()
   })
 
-  test('should trigger events correctly', () => {
+  test('should trigger events correctly', async () => {
     const onChange = vi.fn(() => {})
 
     const { asFragment } = renderWithForm(
@@ -77,9 +78,9 @@ describe('SelectableCardField', () => {
       </SelectableCardGroupField>,
     )
     const input = screen.getByLabelText('Radio 1')
-    act(() => input.click())
+    await userEvent.click(input)
     expect(onChange).toBeCalledTimes(1)
-    act(() => input.click())
+    await userEvent.click(input)
     expect(onChange).toBeCalledTimes(2)
     expect(asFragment()).toMatchSnapshot()
   })
diff --git a/packages/form/src/components/TimeField/__tests__/index.test.tsx b/packages/form/src/components/TimeField/__tests__/index.test.tsx
@@ -1,4 +1,5 @@
 import { act, fireEvent, screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import { renderWithForm } from '@utils/test'
 import { describe, expect, test, vi } from 'vitest'
 import { TimeField } from '..'
@@ -21,7 +22,7 @@ describe('TimeField', () => {
     expect(asFragment()).toMatchSnapshot()
   })
 
-  test('should trigger events', () => {
+  test('should trigger events', async () => {
     const onChange = vi.fn()
 
     const { asFragment } = renderWithForm(
@@ -40,7 +41,7 @@ describe('TimeField', () => {
     const option =
       // eslint-disable-next-line testing-library/no-node-access
       screen.getByTestId('option-test-01:00').firstChild as HTMLElement
-    act(() => option.click())
+    await userEvent.click(option)
     expect(onChange).toBeCalledTimes(1)
     act(() => select.blur())
     expect(asFragment()).toMatchSnapshot()
diff --git a/packages/form/src/components/ToggleGroupField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/ToggleGroupField/__tests__/__snapshots__/index.test.tsx.snap
@@ -730,6 +730,18 @@ exports[`GroupField > should trigger events correctly with required prop 1`] = `
   cursor: not-allowed;
 }
 
+.emotion-41 {
+  color: #b3144d;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
 <div
     data-testid="testing"
   >
@@ -787,7 +799,7 @@ exports[`GroupField > should trigger events correctly with required prop 1`] = `
                   class="emotion-25 emotion-26"
                   data-checked="false"
                   data-disabled="false"
-                  data-error="false"
+                  data-error="true"
                 >
                   <input
                     aria-checked="false"
@@ -820,7 +832,7 @@ exports[`GroupField > should trigger events correctly with required prop 1`] = `
                   class="emotion-25 emotion-26"
                   data-checked="false"
                   data-disabled="false"
-                  data-error="false"
+                  data-error="true"
                 >
                   <input
                     aria-checked="false"
@@ -835,6 +847,11 @@ exports[`GroupField > should trigger events correctly with required prop 1`] = `
             </div>
           </div>
         </fieldset>
+        <p
+          class="emotion-41 emotion-11"
+        >
+          This field is required
+        </p>
       </div>
     </form>
   </div>
diff --git a/packages/form/src/components/ToggleGroupField/__tests__/index.test.tsx b/packages/form/src/components/ToggleGroupField/__tests__/index.test.tsx
diff --git a/packages/plus/src/components/Navigation/__tests__/__snapshots__/index.test.tsx.snap b/packages/plus/src/components/Navigation/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/packages/plus/src/components/Navigation/__tests__/index.test.tsx b/packages/plus/src/components/Navigation/__tests__/index.test.tsx
diff --git a/packages/ui/src/components/NumberInputV2/__tests__/index.test.tsx b/packages/ui/src/components/NumberInputV2/__tests__/index.test.tsx
diff --git a/packages/ui/src/components/SelectInputV2/__tests__/index.test.tsx b/packages/ui/src/components/SelectInputV2/__tests__/index.test.tsx
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
