[checkbox] improve unit testing value

[cgatian]

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.

render(<Checkbox value="test">Test checkbox</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. <input type="checkbox" aria-hidden="true" />.

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.

base-ui/packages/react/src/checkbox/root/CheckboxRoot.tsx

Lines 290 to 304 in a38f3b8

	const element = useRenderElement('span', componentProps, {
	state,
	ref: [buttonRef, controlRef, forwardedRef, groupContext?.registerControlRef],
	props: [
	{
	id: nativeButton ? (inputId ?? undefined) : id,
	role: 'checkbox',
	'aria-checked': groupIndeterminate ? 'mixed' : checked,
	'aria-readonly': readOnly || undefined,
	'aria-required': required || undefined,
	'aria-labelledby': labelId,
	[PARENT_CHECKBOX as string]: parent ? '' : undefined,
	onFocus() {
	setFocused(true);
	},

[linear]

BAS-379

[cgatian]

Sorry I should've marked this as a feature, not a bug.

[cgatian]

The workaround is simple, use nextSibling, which could be pretty flakey if Base UI changes DOM structure.

render(<Checkbox value="test">Test checkbox</Checkbox>);
const checkbox = screen.getByRole('checkbox', { name: 'Test checkbox' });
const input = checkbox.nextSibling;
expect(input).toHaveValue('test');

Or use a query selector

const checkbox = screen.getByRole('checkbox', { name: 'Test checkbox' });
const input = checkbox.parentElement?.querySelector('input[type="checkbox"]');
expect(input).toHaveValue('test');

Ideally, developers wouldn't need to know the inner workings of Base UI when writing tests. But this at least can be explained fairly easy.