`eventWrapper` for dom-testing-library shouldn't be async #30

mischnic · 2020-09-10T19:29:03Z

preact-testing-library version: 2.0.0
preact version: 10.4.8
node version: 14.10.0
npm (or yarn) version: Yarn 1.22.5

Relevant code or config

// fails:
import React from "preact/compat";
import { act, render, fireEvent } from "@testing-library/preact";

// works:
// import React from "react";
// import { act, render, fireEvent } from "@testing-library/react";

import userEvent from "@testing-library/user-event";

function ComboBox() {
  let inputRef = React.useRef();

  let buttonProps = {
    onMouseDown: (e) => {
      e.preventDefault();
    },
  };

  return (
    <div>
      <input ref={inputRef} />
      <button {...buttonProps} />
    </div>
  );
}

test("test", () => {
  const { getAllByRole, queryByRole } = render(<ComboBox />);

  let button = queryByRole("button");
  let combobox = queryByRole("combobox");
  expect(document.activeElement).toBe(document.body);
  act(() => {
    userEvent.click(button);
  });
  expect(document.activeElement).toBe(document.body);
});

What you did:

Call preventDefault on an onMouseDown event to (among other things) prevent the button being focused.

What happened:

preventDefault() doesn't prevent focussing.

Problem description:

Behaves differently compared to a browser.

Suggested solution:

The eventWrapper is async,

preact-testing-library/src/pure.js

Lines 13 to 19 in d63da1c

    
           eventWrapper: async cb => { 
        
             let result 
        
             await act(() => { 
        
               result = cb() 
        
             }) 
        
             return result 
        
           }