From 2582b2d03f9aaba2dc0ba00f8f853a1e9d85e81e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20S=C3=A1ros?= Date: Mon, 17 Aug 2026 12:08:41 +0200 Subject: [PATCH] test(ui-checkbox): use the vitest-browser API in the toggle variant tests MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The `toggle` variant tests were written against @testing-library/react and merged after the repo moved to vitest-browser, so tsc failed with 5 errors and took down `build:types`, which fails the whole `bootstrap` step: Property 'getByRole' does not exist on type 'Screen' Cannot find name 'waitFor' `screen` is never imported, so it resolved to the DOM global `window.screen`. Switch to `page.getByRole().element()` / `.query()` and `expect.element`, await `render` (it returns a promise), and pass `{ force: true }` to the click: the label covers the real input and Playwright does real hit-testing, so the click timed out after 15s. That matches the five other click sites in this file. The component behaviour is unchanged and correct; these three assertions had never run. INSTUI-5158 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 5 (1M context) --- .../src/Checkbox/__tests__/Checkbox.test.tsx | 26 +++++++++---------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/packages/ui-checkbox/src/Checkbox/__tests__/Checkbox.test.tsx b/packages/ui-checkbox/src/Checkbox/__tests__/Checkbox.test.tsx index c9a21919c8..e3c3fd7e33 100644 --- a/packages/ui-checkbox/src/Checkbox/__tests__/Checkbox.test.tsx +++ b/packages/ui-checkbox/src/Checkbox/__tests__/Checkbox.test.tsx @@ -279,30 +279,28 @@ describe('', () => { }) describe('`toggle` variant', () => { - it('should expose a button role and pressed state', () => { - renderCheckbox({ variant: 'toggle', defaultChecked: true }) - const toggle = screen.getByRole('button') + it('should expose a button role and pressed state', async () => { + await renderCheckbox({ variant: 'toggle', defaultChecked: true }) + const toggle = page.getByRole('button').element() expect(toggle).toHaveAttribute('aria-pressed', 'true') - expect(screen.queryByRole('checkbox')).not.toBeInTheDocument() + expect(page.getByRole('checkbox').query()).not.toBeInTheDocument() }) it('should update the pressed state when toggled', async () => { - renderCheckbox({ variant: 'toggle', defaultChecked: false }) - const toggle = screen.getByRole('button') + await renderCheckbox({ variant: 'toggle', defaultChecked: false }) + const toggle = page.getByRole('button') - expect(toggle).toHaveAttribute('aria-pressed', 'false') + await expect.element(toggle).toHaveAttribute('aria-pressed', 'false') - await userEvent.click(toggle) + await userEvent.click(toggle, { force: true }) - await waitFor(() => { - expect(toggle).toHaveAttribute('aria-pressed', 'true') - }) + await expect.element(toggle).toHaveAttribute('aria-pressed', 'true') }) - it('should leave the `simple` variant as a checkbox', () => { - renderCheckbox({ variant: 'simple' }) - const input = screen.getByRole('checkbox') + it('should leave the `simple` variant as a checkbox', async () => { + await renderCheckbox({ variant: 'simple' }) + const input = page.getByRole('checkbox').element() expect(input).not.toHaveAttribute('role') expect(input).not.toHaveAttribute('aria-pressed')