[DropdownMenu] Not opening after being clicked on tests

[rubenmoya]

Bug report

Current Behavior

When testing a component using the DropdownMenu and userEvent.click the dropdown does not open. It does open on the browser, it just fails on the tests.

Expected behavior

The dropdown opens and the items can be selected.

Reproducible example

Github repo using CRA

Additional context

We were trying to update a project from 0.0.22 to the latest version. After downgrading I discovered it started failing since 0.0.23.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-dropdown-menu	0.0.23 to latest
React	n/a	^17.0.2
Browser	Chrome
Assistive tech
Node	n/a	v16.13.0
npm/yarn	yarn	1.22.17
Operating System	Kubuntu

[andy-hook]

This is an issue with how JSDom emulates pointerEvent, it doesn't currently provide the correct event object properties. You'll need to supply these manually or use an alternative testing tool such as Cypress.

See this comment for a working solution #856 (comment)

// test/helpers.ts
export class PointerEvent extends Event {
  button: number;
  ctrlKey: boolean;

  constructor(type, props) {
    super(type, props);
    if (props.button != null) {
      this.button = props.button;
    }
    if (props.ctrlKey != null) {
      this.ctrlKey = props.ctrlKey;
    }
  }
}

// dropdownMenu.test.tsx
fireEvent.pointerDown(
  button,
  new PointerEvent('pointerdown', {
    ctrlKey: false,
    button: 0,
  })
);

0.0.23 and upwards started using pointerEvent which is why you're seeing this now.

I'm going to close this issue but if you're still having problems or have other questions then feel free to re-open and we'll do our best to help.