Bug: React test triggers mouseout event for disabled button

[tulsidaskhatri]

React version: 16.14.0

Steps To Reproduce

1. Create a test file in a react project, and paste the following code.
2. Run the test
3. The test for onMouseLeave event fails.

import { act } from "react-dom/test-utils";
import React, { useState } from "react";
import ReactDOM from "react-dom";

const Counter = () => {
  const increaseCount = () => {
    setCount((prev) => prev + 1);
  };
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button
        disabled
        onClick={increaseCount}
        onMouseEnter={increaseCount}
        onMouseLeave={increaseCount}
      >
        Click me
      </button>
    </div>
  );
};

describe("button with react test-utils", () => {
  let container;

  beforeEach(() => {
    container = document.createElement("div");
    document.body.appendChild(container);
  });

  afterEach(() => {
    document.body.removeChild(container);
    container = null;
  });

  it("should not trigger onClick when button is disabled", () => {
    act(() => {
      ReactDOM.render(<Counter />, container);
    });
    const button = container.querySelector("button");
    const label = container.querySelector("p");

    act(() => {
      button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });

    expect(label.textContent).toBe("You clicked 0 times");
  });
  it("should not trigger onMouseEnter when button is disabled", () => {
    act(() => {
      ReactDOM.render(<Counter />, container);
    });
    const button = container.querySelector("button");
    const label = container.querySelector("p");

    act(() => {
      button.dispatchEvent(new MouseEvent("mouseover", { bubbles: true }));
    });

    expect(label.textContent).toBe("You clicked 0 times");
  });
  it("should not trigger onMouseLeave when button is disabled", () => {
    act(() => {
      ReactDOM.render(<Counter />, container);
    });
    const button = container.querySelector("button");
    const label = container.querySelector("p");

    act(() => {
      button.dispatchEvent(new MouseEvent("mouseout", { bubbles: true }));
    });

    expect(label.textContent).toBe("You clicked 0 times");
  });
});

The current behavior

The expected behavior

All tests should pass

[jordyvandomselaar]

I'd like to take this issue as an opportunity for my first PR on React.

[jordyvandomselaar]

Gotcha ;)

[jordyvandomselaar]

@tulsidaskhatri thanks for the clear issue with tests for the cases you were talking about! Made opening a PR a lot easier =)

[Nazeeh21]

I have tried running the tests as described. And still onMouseLeave test case if failing. So can I work on this issue?

[jordyvandomselaar]

@Nazeeh21 have you tried running the tests in #20985?

[Nazeeh21]

No, I haven't tried that. I have just tried the tests mentioned in this issue.

[jordyvandomselaar]

Ah, fair enough. In the PR I linked, I've tried to solve this issue, I'd love to hear your feedback if you have any =)