无法使用 ReactTestUtils 对 useClickAway 进行单元测试

Question

I'm trying to test a component that uses useClickAway from react-use .

This is my component:

export default function DropdownMenu(props: DropdownMenuProps) {
  const { className, align, children } = props;
  const dropdownRef = React.useRef(null);
  const [isDropdownActive, setIsDropdownActive] = React.useState(false);
  useClickAway(dropdownRef, () => setIsDropdownActive(false));
  return (
    <div
      data-id="dropdown-parent"
      ref={dropdownRef}
      className={classes(
        "dropdown is-pulled-right",
        align === "right" && "is-right",
        isDropdownActive && "is-active"
      )}
    >
      <div className="dropdown-trigger">
        <button
          data-id="dropdown-button"
          onClick={() => setIsDropdownActive(!isDropdownActive)}
          className={classes("button is-dark is-radiusless", className)}
          aria-haspopup="true"
        >
          <span className="icon is-small">
            <i className="fas fa-ellipsis-v" aria-hidden="true" />
          </span>
        </button>
      </div>
      <div className="dropdown-menu" role="menu">
        <div className={classes("dropdown-content", styles.dropdown)}>
          {children}
        </div>
      </div>
    </div>
  );
}

and this is my test:

it('gets deactivated when area outside of dropdown is clicked', () => {
  const container = document.createElement('div');
  document.body.appendChild(container);
  ReactTestUtils.act(() => {
    ReactDOM.render(
      <div>
        <button data-id="outside"/>
        <DropdownMenu>
          <div/>
        </DropdownMenu>
      </div>, 
    container);
  })
  const button = container.querySelector('button[data-id="dropdown-button"]') as Element
  const parent = container.querySelector('div[data-id="dropdown-parent"]') as Element
  const outside = container.querySelector('button[data-id="outside"]') as Element
  ReactTestUtils.act(() => {
    ReactTestUtils.Simulate.click(button);
  })
  expect(parent.className).toContain('is-active') //<--- this works
  ReactTestUtils.act(() => {
    ReactTestUtils.Simulate.click(outside);
  })
  expect(parent.className).not.toContain('is-active') //<--- this doesn't
})

I tried using console.log in useClickAway callback. However, it doesn't seem to be called..

Am I missing something?

Answer 1

useClickAway uses mousedown event: https://github.com/streamich/react-use/blob/v13.27.0/src/useClickAway.ts#L4

With react-testing-library:

import { render, fireEvent } from '@testing-library/react';

test('click away', () => {
  const { getByText } = render(<MyComponent />);

  // Does not work
  //getByText('outside').click();

  // Does work
  fireEvent.mouseDown(getByText('outside'));
});