[checkbox] improve unit testing value
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
# Bug report
## Current behavior
Using React Testing Library to access a checkbox doesn't accurately return the checkbox's `value`.
> [!NOTE]
> This issue is focused on improving unit testing. I think the current behavior is not intuitive to developers writing unit tests for Base UI wrapped component libraries. I understand the underlying complexity due to Base UI creating a faux checkbox.
```tsx
render(Test checkbox);
const checkbox = screen.getByRole('checkbox', { name: 'Test checkbox' });
expect(checkbox).toHaveValue('test');
```
## Expected behavior
Using a testing library, when querying for the checkbox element, you _ideally_ can access the `value`.
## Base UI version
1.1.0
## Which browser are you using?
NA
## Additional context
Because `Checkbox` is using a `span` element to simulate the checkbox component, properties like `value` are not available. These are only available on the sibling hidden input, e.g. ``.
I believe you _could_ update the `span` (or `element`) to accept the `value` prop. Although, that's not a part of the `HTMLElement` DOM spec. Will update this issue with other ideas and at least the workaround once I have it.
https://github.com/mui/base-ui/blob/a38f3b8252033e10e2706e841da867a3382b23f6/packages/react/src/checkbox/root/CheckboxRoot.tsx#L290-L304
Contributor guide
Assessment
This issue has not been assessed yet.