[DropdownMenu] `jest` / `react-testing-library` tests failing on `@radix-ui/react-dropdown-menu` after upgrade

Bug report

Current Behavior

Went from "@radix-ui/react-dropdown-menu": "0.1.4", to "@radix-ui/react-dropdown-menu": "0.1.6", and the tests were working on 0.1.4. Actually, any test that involves some sort of pop up box appearing currently fails (so "@radix-ui/react-dropdown-menu": "0.1.6" and "@radix-ui/react-dialog": "0.1.7", for me).

My current test looks like this (there’s more of it inside my CodeSandbox example down below)

test('BulkActions dropdown gets clicked and shows content', () => {
  userEvent.click(screen.getByTestId(bulkActionsDropdownName))

  expect(screen.queryByTestId(dropdownContentName)).toBeInTheDocument()
})

Output looks like this

 FAIL  src/components/BulkActions/bulk-actions.test.tsx
  ✓ BulkActions gets rendered (20 ms)
  ✕ BulkActions dropdown gets clicked and shows content (23 ms)

  ● BulkActions dropdown gets clicked and shows content

    expect(received).toBeInTheDocument()

    received value must be an HTMLElement or an SVGElement.
    Received has value: null

      39 |   userEvent.click(screen.getByTestId(bulkActionsDropdownName))
      40 |
    > 41 |   expect(screen.queryByTestId(dropdownContentName)).toBeInTheDocument()
         |                                                     ^
      42 | })
      43 |

This was a passing test using "@radix-ui/react-dropdown-menu": "0.1.4". Seems like the userEvent.click isn’t getting triggered

Expected behavior

Having not changed anything within my code except for upgrading the dependency, I expect the test to pass

Reproducible example

CodeSandbox

Additional context

Nothing to add

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-dropdown-menu	0.1.6
React	n/a	17.0.2
Browser	Chrome	Version 98.0.4758.80
Assistive tech	-	-
Node	n/a	v14.19.0
npm/yarn	yarn	1.22.17
Operating System	MacOS	11.2.3

Issue Analytics

State:
Created 2 years ago
Reactions:5
Comments:5

Top GitHub Comments

8reactions

andy-hookcommented, Apr 4, 2022

Sorry for the delay responding here. You’re seeing this because the event bindings were adjusted in the recent version and now exclusively bind to PointerEvent, where before they also used onClick.

JSDOM doesn’t currently support PointerEvent, and thus testing-library can’t provide the correct properties on the Event.

Providing you’re using user-event, testing lib should be firing PointerEvents, but you’ll need to provide your own implementation to be able to test with the expected properties:

 // setupTests.ts

// JSDOM doesn't implement PointerEvent so we need to mock our own implementation
// Default to mouse left click interaction
// https://github.com/radix-ui/primitives/issues/1207
// https://github.com/jsdom/jsdom/pull/2666
class MockPointerEvent extends Event {
  button: number;
  ctrlKey: boolean;
  pointerType: string;

  constructor(type: string, props: PointerEventInit) {
    super(type, props);
    this.button = props.button || 0;
    this.ctrlKey = props.ctrlKey || false;
    this.pointerType = props.pointerType || 'mouse';
  }
}

window.PointerEvent = MockPointerEvent as any;

The above sets some properties to mock a “mouse left click” by default, you can pass your own properties inline too when needed:

userEvent.click(myElem, { pointerType: "touch", ... })

I’ll make a note to add something about this in our documentation as it is quite a common issue, hopefully the above helps though. I’m going to close the issue now but feel free to follow up if you have any other questions 🙏

3reactions

ItzaMicommented, Apr 6, 2022

@andy-hook , that did the trick! Thank you for your elaborate and informative answer! 🤘

Top Results From Across the Web

react testing library assert dropdown options are rendered in ...

I'm trying to test a dropdown component rendering certain options in ... core tenets of react-testing-library is that we want our tests to ......

radix dropdown tests - CodeSandbox

@radix-ui/react-dropdown-menu. 0.0.6 · @stitches/react. 0.0.3-canary.4 (0.0.3-canary.4) · @testing-library/jest-dom. 5.11.9 · @testing-library/react. 11.2.3 · @ ...

How to test a Semantic UI React Dropdown using Jest and ...

A Semantic UI React Dropdown using the options array above. Give it a default value of the first option in the array, Jenny...

How to test dropdown component with React Testing Library

Hi, I am trying to test a dropdown component with React Testing Library. I need to set the value of the component, but...

[Solved]-React Testing Library + Material UI DropDown-Reactjs

test ("select", async () => { render(<App />); // Get and click in the dropdown const dropdownButton = screen.getByRole("button", { name: /dog name...