Repository: react
Issue: Bug: React test triggers mouseout event for disabled button
Labels: Type: Bug,Component: DOM

<!--
  Please provide a clear and concise description of what the bug is. Include
  screenshots if needed. Please test using the latest version of the relevant
  React packages to make sure your issue has not already been fixed.
-->

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.

<!--
  Your bug will get fixed much faster if we can run your code and it doesn't
  have dependencies other than React. Issues without reproduction steps or
  code examples may be immediately closed as not actionable.
-->

```javascript
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");
  });
});

```

<!--
  Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a
  repository on GitHub, or provide a minimal code example that reproduces the
  problem. You may provide a screenshot of the application if you think it is
  relevant to your bug report. Here are some tips for providing a minimal
  example: https://stackoverflow.com/help/mcve.
-->


## The current behavior
<img width="664" alt="Screenshot 2021-03-09 at 21 45 13" src="https://user-images.githubusercontent.com/2574511/110506309-c9d44380-8120-11eb-9164-ce2ae7316889.png">


## The expected behavior
All tests should pass