import {Layout} from '../../../src/Layout'; export default Layout;

import {InlineAlert, Heading, Content} from '@react-spectrum/s2'; import testUtilDocs from 'docs:@react-spectrum/test-utils'; import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ';

export const isSubpage = true; export const hideFromSearch = true; export const tags = ['testing', 'checkboxgroup', 'test-utils']; export const description = 'Testing CheckboxGroup with React Spectrum test utils';

Testing CheckboxGroup

Test utils

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

<InstallCommand pkg="@react-spectrum/test-utils" flags="--dev" /> <InlineAlert variant="notice"> <Heading>Requirements</Heading> <Content>Please note that this library uses [@testing-library/react@16](https://www.npmjs.com/package/@testing-library/react) and [@testing-library/user-event@14](https://www.npmjs.com/package/@testing-library/user-event). This means that you need to be on React 18+ in order for these utilities to work.</Content> </InlineAlert>

Initialize a User object at the top of your test file, and use it to create a 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-spectrum/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.selectedCheckboxes).toHaveLength(0);

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

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

API

User

CheckboxGroupTester

Testing FAQ