Clicking on a label element of a checkbox does not trigger checkbox

[JunyeongChoi0]

Reproduction example

https://codesandbox.io/p/devbox/elated-gould-h5tv93

Prerequisites

1. Render <label><span>label</span><input type="checkbox" /></label>
2. Find label element
3. Click on label element
4. Watch whether checkbox checked

Expected behavior

The checkbox should be checked.

Actual behavior

The checkbox is still unchecked.

User-event version

14.5.2

Environment

Testing Library framework:

JS framework:

Test environment:

DOM implementation:

Additional context

No response

[LucidityDesign]

Same here. "CLICK" gets logged but the test fails:

import { fireEvent, render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"

const user = userEvent.setup()

test('click', async () => {
  render(
    <div>
      <label htmlFor="checkbox" onClick={() => console.log("CLICK")}>Check</label>
      <input id="checkbox" type="checkbox" />
    </div>,
  )

  await user.click(screen.getByText('Check'))
  // fireEvent.click(screen.getByText('Check'))
  expect(screen.getByLabelText('Check')).toBeChecked()
})