diff --git a/package.json b/package.json index f79b7a9470..ab41e0dadf 100644 --- 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 index f9a58edb39..a805e76dbf 100644 --- 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 index 2053b09599..fd7caf4f54 100644 --- 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( {}} name="Checkbox" legend="Label"> @@ -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 index 8c30fb506b..ca5b9d920f 100644 --- 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( { />, ) 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 index 7a8bf9b6cd..fa43849768 100644 --- 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 index 6711140196..3f646bae30 100644 --- 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 index ce934319a9..a6847b471f 100644 --- 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( { const [firstInput, secondInput] = screen.getAllByRole('radio', { hidden: true, }) - act(() => secondInput.click()) + await userEvent.click(secondInput) expect(firstInput).not.toBeChecked() expect(secondInput).toBeChecked() @@ -27,7 +28,7 @@ describe('RadioField', () => { 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', () => { , ) 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 index b9b51cebd3..3bc1c6ea0a 100644 --- 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 index 4647954cbd..ad18879d33 100644 --- 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', () => { , ) 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 index c5618c845a..f107739794 100644 --- 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 index ebd669190a..6735a07329 100644 --- 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', () => { , ) 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 index 6d799ff5ee..519855cfe6 100644 --- 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__/index.test.tsx b/packages/form/src/components/ToggleGroupField/__tests__/index.test.tsx index e19ccbb45c..4bd4e57f65 100644 --- a/packages/form/src/components/ToggleGroupField/__tests__/index.test.tsx +++ b/packages/form/src/components/ToggleGroupField/__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 { ToggleGroupField } from '..' describe('GroupField', () => { - test('should render correctly checked', () => { + test('should render correctly checked', async () => { const { asFragment } = renderWithForm( {}} name="Group" legend="Label"> { const [firstInput, secondInput] = screen.getAllByRole('checkbox', { 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( @@ -62,11 +63,11 @@ describe('GroupField', () => { }, ) 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() expect(asFragment()).toMatchSnapshot() diff --git a/packages/plus/src/components/Navigation/__tests__/index.test.tsx b/packages/plus/src/components/Navigation/__tests__/index.test.tsx index 91b9929b06..5ec5c782ca 100644 --- a/packages/plus/src/components/Navigation/__tests__/index.test.tsx +++ b/packages/plus/src/components/Navigation/__tests__/index.test.tsx @@ -1,4 +1,5 @@ import { screen, waitFor } from '@testing-library/react' +import { userEvent } from '@testing-library/user-event' import { UseCaseCategoryIcon } from '@ultraviolet/icons/category' import { renderWithTheme, shouldMatchEmotionSnapshot } from '@utils/test' import type { ComponentProps } from 'react' @@ -50,7 +51,7 @@ describe('Navigation', () => { const collapseButton = screen.getByRole('button', { name: 'Collapse sidebar', }) - collapseButton.click() + await userEvent.click(collapseButton) await waitFor(() => { expect( screen.getByRole('button', { name: 'Expand sidebar' }), @@ -61,7 +62,7 @@ describe('Navigation', () => { const expandButton = screen.getByRole('button', { name: 'Expand sidebar', }) - expandButton.click() + await userEvent.click(expandButton) await waitFor(() => { expect( screen.getByRole('button', { name: 'Collapse sidebar' }), @@ -92,11 +93,11 @@ describe('Navigation', () => { name: 'pin', })[0] - pinButton.click() + await userEvent.click(pinButton) expect(asFragment()).toMatchSnapshot() const pinnedGroup = screen.getByTestId('pinned-group') - pinnedGroup.click() + await userEvent.click(pinnedGroup) expect(asFragment()).toMatchSnapshot() @@ -112,7 +113,7 @@ describe('Navigation', () => { name: 'unpin', })[0] - unpinButton.click() + await userEvent.click(unpinButton) expect(asFragment()).toMatchSnapshot() }) }) diff --git a/packages/ui/src/components/NumberInputV2/__tests__/index.test.tsx b/packages/ui/src/components/NumberInputV2/__tests__/index.test.tsx index 16f1979fba..0105d613a0 100644 --- a/packages/ui/src/components/NumberInputV2/__tests__/index.test.tsx +++ b/packages/ui/src/components/NumberInputV2/__tests__/index.test.tsx @@ -145,7 +145,7 @@ describe('NumberInputV2', () => { await userEvent.clear(input) await userEvent.type(input, '5') - plusButton.click() + await userEvent.click(plusButton) await waitFor(() => expect(input.value).toBe('10')) }) @@ -157,7 +157,7 @@ describe('NumberInputV2', () => { await userEvent.clear(input) await userEvent.type(input, '15') - minusButton.click() + await userEvent.click(minusButton) await waitFor(() => expect(input.value).toBe('10')) }) }) diff --git a/packages/ui/src/components/SelectInputV2/__tests__/index.test.tsx b/packages/ui/src/components/SelectInputV2/__tests__/index.test.tsx index ec5c4c782c..baa894b5d6 100644 --- a/packages/ui/src/components/SelectInputV2/__tests__/index.test.tsx +++ b/packages/ui/src/components/SelectInputV2/__tests__/index.test.tsx @@ -2,7 +2,6 @@ import { fireEvent, screen } from '@testing-library/react' import { userEvent } from '@testing-library/user-event' import { renderWithTheme } from '@utils/test' import type { ReactNode } from 'react' -import { act } from 'react' import { afterAll, beforeAll, describe, expect, test, vi } from 'vitest' import { SelectInputV2 } from '..' import { OptionalInfo, cities, dataGrouped, dataUnGrouped } from './resources' @@ -544,7 +543,7 @@ describe('SelectInputV2', () => { ) const input = screen.getByTestId('select-input-test') - act(() => input.click()) + await userEvent.click(input) const dropdown = screen.getByRole('dialog') const outsideClick = screen.getByText('Test outside element') @@ -568,7 +567,7 @@ describe('SelectInputV2', () => { ) const input = screen.getByTestId('select-input-test') - act(() => input.click()) + await userEvent.click(input) const dropdown = screen.getByRole('dialog') const venus = screen.getByText('Venus') diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fc7607eb3a..433a7fb4af 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -216,8 +216,8 @@ importers: specifier: 0.18.1 version: 0.18.1 eslint-plugin-testing-library: - specifier: 7.4.0 - version: 7.4.0(eslint@9.29.0(jiti@2.4.2))(typescript@5.8.3) + specifier: 7.5.3 + version: 7.5.3(eslint@9.29.0(jiti@2.4.2))(typescript@5.8.3) expect: specifier: 29.7.0 version: 29.7.0 @@ -4856,8 +4856,8 @@ packages: peerDependencies: eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7 - eslint-plugin-testing-library@7.4.0: - resolution: {integrity: sha512-rmryGUowFYlljNrN/sPjSfp4uZr6gIsiTHUeFg45xNwhWzgr+izRzOanrvd28XVlVmXlBpZdJGu+aHFUBBQatA==} + eslint-plugin-testing-library@7.5.3: + resolution: {integrity: sha512-sZk5hIrx0p1ehvdS2qHefKwXHiEysiQN+FMGCzES6xRNUgwI3q4KdWMeAwpPDP9u0RDkNzJpebRUnNch1sJh+A==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0, pnpm: ^9.14.0} peerDependencies: eslint: ^8.57.0 || ^9.0.0 @@ -13291,10 +13291,10 @@ snapshots: string.prototype.matchall: 4.0.12 string.prototype.repeat: 1.0.0 - eslint-plugin-testing-library@7.4.0(eslint@9.29.0(jiti@2.4.2))(typescript@5.8.3): + eslint-plugin-testing-library@7.5.3(eslint@9.29.0(jiti@2.4.2))(typescript@5.8.3): dependencies: - '@typescript-eslint/scope-manager': 8.32.1 - '@typescript-eslint/utils': 8.32.1(eslint@9.29.0(jiti@2.4.2))(typescript@5.8.3) + '@typescript-eslint/scope-manager': 8.34.1 + '@typescript-eslint/utils': 8.34.1(eslint@9.29.0(jiti@2.4.2))(typescript@5.8.3) eslint: 9.29.0(jiti@2.4.2) transitivePeerDependencies: - supports-color