React Spectrum
Beta PreviewDocsReleasesBlog
Dialog

Testing Dialog

Test utils

@react-spectrum/test-utils offers common dialog 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 Dialog 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.

// Dialog.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('Dialog can be opened and closed', async function () {
  // Render your test component/app and initialize the dialog tester
  let {getByTestId, getByRole} = render(
    <DialogTrigger>
      <ActionButton>Trigger</ActionButton>
      <Dialog>
        ...
      </Dialog>
    </DialogTrigger>
  );
  let button = getByRole('button');
  let dialogTester = testUtilUser.createTester('Dialog', {root: button, overlayType: 'modal'});
  await dialogTester.open();
  let dialog = dialogTester.dialog;
  expect(dialog).toBeVisible();
  await dialogTester.close();
  expect(dialog).not.toBeInTheDocument();
});

API

User

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.

DialogTester

Properties

NameType
dialogHTMLElement | null
Returns the dialog if present.
triggerHTMLElement
Returns the dialog's trigger.

Methods

constructor(opts: ): void
setInteractionType(type: ['interactionType']): void
Set the interaction type used by the dialog tester.
open(opts: ): Promise<void>
Opens the dialog. Defaults to using the interaction type set on the dialog tester.
close(): Promise<void>
Closes the dialog via the Escape key.

Testing FAQ