Testing RadioGroup

Test utils

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

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

Initialize a User object at the top of your test file, and use it to create a RadioGroup 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.

// RadioGroup.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('RadioGroup can switch the selected radio', async function () {
  // Render your test component/app and initialize the radiogroup tester
  let {getByRole} = render(
    <RadioGroup>
      ...
    </RadioGroup>
  );

  let radioGroupTester = testUtilUser.createTester('RadioGroup', {root: getByRole('radiogroup')});
  let radios = radioGroupTester.getRadios();
  expect(radioGroupTester.getSelectedRadio()).toBeFalsy();

  await radioGroupTester.triggerRadio({radio: radios[0]});
  expect(radioGroupTester.getSelectedRadio()).toBe(radios[0]);

  await radioGroupTester.triggerRadio({radio: radios[1]});
  expect(radioGroupTester.getSelectedRadio()).toBe(radios[1]);
});

API

User

Properties

Methods

RadioGroupTester

Testing FAQ