mui / mui/base-ui

[checkbox] improve unit testing value

Open
#4,048 4 comments 0 reactions 0 assignees View on GitHub
component: checkbox docs
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.