Testing CheckboxGroup

Test utils

@react-aria/test-utils offers common checkbox group interaction testing utilities. Install it with your preferred package manager.

npm install @react-aria/test-utils --dev

Initialize a User object at the top of your test file, and use it to create an CheckboxGroup pattern tester in your test cases. The tester has methods that you can call within your test to query for specific subcomponents or simulate common interactions.

// CheckboxGroup.test.ts
import {render} from '@testing-library/react';
import {User} from '@react-aria/test-utils';

let testUtilUser = new User({
  interactionType: 'mouse',
  advanceTimer: jest.advanceTimersByTime
});
// ...

it('CheckboxGroup can select multiple checkboxes', async function () {
  // Render your test component/app and initialize the checkbox group tester
  let {getByTestId} = render(
    <CheckboxGroup data-testid="test-checkboxgroup">
    ...
    </CheckboxGroup>
  );
  let checkboxGroupTester = testUtilUser.createTester('CheckboxGroup', {root: getByTestId('test-checkboxgroup')});
  expect(checkboxGroupTester.getSelectedCheckboxes()).toHaveLength(0);

  await checkboxGroupTester.toggleCheckbox({checkbox: 0});
  expect(checkboxGroupTester.getCheckboxes()[0]).toBeChecked();
  expect(checkboxGroupTester.getSelectedCheckboxes()).toHaveLength(1);

  await checkboxGroupTester.toggleCheckbox({checkbox: 4});
  expect(checkboxGroupTester.getCheckboxes()[4]).toBeChecked();
  expect(checkboxGroupTester.getSelectedCheckboxes()).toHaveLength(2);
});

API

User

Properties

Methods

CheckboxGroupTester

Testing FAQ