Menu is broken when run on test

[dohaicuong]

Description

I have a simple test with Menu component

• expect the data-state to be closed
• click on the trigger
• expect the data-state to be open
  more details: https://github.com/dohaicuong/ark-ui-menu-test/blob/master/src/App.test.tsx

This test works fine with @ark-ui/[email protected].
However when I tried to update to newer @ark-ui/react version, the data-state is always closed, even after clicking the trigger.

I've tested several versions of @ark-ui/react: 3.4.0, 3.5.0, 3.6.2 and the problem is persisted.
I've tested with both happy-dom and jsdom and they behave the same

Link to Reproduction (or Detailed Explanation)

https://github.com/dohaicuong/ark-ui-menu-test/blob/master/src/App.test.tsx

Steps to Reproduce

• clone this repo https://github.com/dohaicuong/ark-ui-menu-test/blob/master/src/App.test.tsx
• bun i
• bun run test to see the success test
• install newer ark ui react version 3.4.0, 3.5.0, 3.6.2
• bun run test again to see the test failed

Ark UI Version

3.3.0

Framework

• React
• Solid
• Vue

Browser

happy-dom and jsdom

Additional Information

No response

[colinlienard]

I also reproduce this, it seems to be coming from this commit: chakra-ui/zag@5c1ff93

[segunadebayo]

I recommend using fireEvent.click(button) instead

[dohaicuong]

thank you, we are using fireEvent.click at the moment, just want to report to get a fix for userEvent

[colinlienard]

fireEvent.click does work for the trigger, but not for the items of the menu.
The updated repro: https://github.com/colinlienard/ark-ui-menu-test

  const onSelect = vi.fn();
  render(<App onSelect={onSelect} />);

  // Works
  fireEvent.click(screen.getByText("Open menu"));
  await waitFor(() => {
    expect(screen.getByText("Open menu")).toHaveAttribute("data-state", "open");
  });

  // Fails
  fireEvent.click(screen.getByText("React"));
  await waitFor(() => {
    expect(onSelect).toHaveBeenCalled();
  });

@dohaicuong did you manage to make it work for the menu items?

[dohaicuong]

yeah I have to use fireEvent for trigger and userEvent for menu item

[colinlienard]

oh yes you're right