React Spectrum
Beta PreviewDocsReleasesBlog
RadioGroup

Testing RadioGroup

Test utils

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

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.radios;
  expect(radioGroupTester.selectedRadio).toBeFalsy();

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

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

API

Properties

NameTypeDefault
advanceTimer['advanceTimer']Default: —
A function used by the test utils to advance timers during interactions. Required for certain aria patterns (e.g. table).
interactionType['interactionType']Default: mouse
The interaction type (mouse, touch, keyboard) that the test util user will use when interacting with a component. This can be overridden at the aria pattern util level if needed.

Methods

constructor(opts: ): void
createTester<T extends >(patternName: T, opts: <T>): <T>
Creates an aria pattern tester, inheriting the options provided to the original user.

Properties

NameType
selectedRadioHTMLElement | null
Returns the currently selected radio in the radiogroup if any.
radiosHTMLElement[]
Returns the radios.
radiogroupHTMLElement
Returns the radiogroup.

Methods

constructor(opts: ): void
setInteractionType(type: ['interactionType']): void
Set the interaction type used by the radio tester.
findRadio(opts: {
radioIndexOrText: number | string
}): HTMLElement
Returns a radio matching the specified index or text content.
triggerRadio(opts: ): Promise<void>
Triggers the specified radio. Defaults to using the interaction type set on the radio tester.

Testing FAQ