Testing Popover

Test utils

@react-aria/test-utils offers common dialog 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 a Dialog pattern tester in your test cases. Pass overlayType: 'popover' to indicate the dialog is rendered inside a Popover. The tester has methods that you can call within your test to query for the dialog or simulate common interactions.

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

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

it('Popover can be opened and closed', async function () {
  // Render your test component/app and initialize the dialog tester
  let {getByRole} = render(
    <DialogTrigger>
      <Button>Open</Button>
      <Popover>
        <Dialog>
          ...
        </Dialog>
      </Popover>
    </DialogTrigger>
  );
  let button = getByRole('button');
  let dialogTester = testUtilUser.createTester('Dialog', {root: button, overlayType: 'popover'});

  await dialogTester.open();
  let dialog = dialogTester.getDialog();
  expect(dialog).toBeVisible();

  await dialogTester.close();
  expect(dialog).not.toBeInTheDocument();
});

API

User

Properties

Methods

DialogTester

Testing FAQ