Testing checkbox state fails, but works elsewhere?

[TRFielder]

We're in the middle of migrating from Chakra v2 to v3 at the moment, and I'm struggling to get a couple of our tests to pass that rely on toggling checkboxes on and off.

This codesandbox is pretty close to what we're actually testing, and the thing I can't get past is that it works - but in our codebase it doesn't. To make matters worse, the checkbox behaves exactly as expected when actually using it in a web app

I've also set up a very bare bones example in my local environment which doesn't pass (note: we're aliasing @chakra-ui/react@3.26.0 as chakra-ui-3 whilst we're working on migrating our UI library):

/**
 * @jest-environment jsdom
 */

import '@testing-library/jest-dom'

import { render, screen } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
import { ChakraProvider, Checkbox as ChakraCheckbox, defaultSystem } from 'chakra-ui-3'

const BasicCheckbox = () => {
  return (
    <ChakraProvider value={defaultSystem}>
      <ChakraCheckbox.Root>
        <ChakraCheckbox.HiddenInput />
        <ChakraCheckbox.Control>
          <ChakraCheckbox.Indicator />
        </ChakraCheckbox.Control>
        <ChakraCheckbox.Label>Test Label</ChakraCheckbox.Label>
      </ChakraCheckbox.Root>
    </ChakraProvider>
  )
}

describe('Minimal Checkbox Test', () => {
  it('toggles the checked property', async () => {
    const user = userEvent.setup()
    render(<BasicCheckbox />)

    const input = screen.getByRole('checkbox') as HTMLInputElement
    console.log('Initial checked:', input.checked)
    expect(input).not.toBeChecked()

    await user.click(input)
    console.log('After first click:', input.checked)
    expect(input).toBeChecked()

    await user.click(input)
    console.log('After second click:', input.checked)
    expect(input).not.toBeChecked()
  })
})

If I run that test, I get this:

Is there something obvious I'm missing?

Other info:

Chakra UI Version: 3.26.0
Node version: 20.18.1
Operating system: MacOS

[segunadebayo]

It's really hard to tell what the issue is from the screenshots. Some rough thoughts

• Feel free to use https://github.com/chakra-ui/ark/blob/main/packages/react/src/components/checkbox/tests/checkbox.test.tsx as a reference
• Consider using happy-dom instead of jest-dom
• Consider using vitest instead of jest

[MashaSinkevich]

After investigation what I have found so far:

1. if to update the packages to match the versions from Testing checkbox state fails, but works elsewhere? #10497 then everything would work:

2. With current packages version to make checkbox unchecked for the second click with user event we need to unfocus the checkbox (if we still want to use user event).

        await user.click(clickTarget())
        await waitForCheckboxToBeCheckedByLabel(label)

        // Zag's press-tracking calls preventDefault() on pointerdown while the input is
        // still focused, which makes user-event suppress the follow-up click event in jsdom.
        // Blurring clears focus so the next user.click fires a full click/change sequence.
        act(() => {
          screen.getByLabelText(label).blur()
        })

        await user.click(clickTarget())