Use createRoot in ReactEventIndependence-test

[jackpope]

No description provided.

[jackpope]

Since unmountComponentAtNode is deprecated and root.unmount() completely removes the button element, I'm not sure there's anything else to test here so I've removed the test case. Any reason to continue testing events on unmounted trees like this?

[rickhanlonii]

@jackpope root.unmount() doesn't remove the container, which is where the event listeners are attached so the test is needed to confirm the event handlers on the container are not fired.

[jackpope]

Trying node#remove because I don't think we have any non-deprecated APIs that can remove the container?

If I remove the container from the DOM, the click handler still fires.

container.remove();
button.click();
expect(clicks).toBe(0); // assertion fails

If I remove the button from the DOM, the event handler does not fire

button.remove();
button.click();
expect(clicks).toBe(0);

Is this expected?

[rickhanlonii]

Sorry, I'm confused, why not use root.unmount()? That behaves the same as unmountComponentAtNode which also removes the button element?

[rickhanlonii]

It does seem silly though to confirm that when you remove an element from the DOM, clicking doesn't bubble up to the element it was attached to. The test is really old, @sophiebits do you know what this is testing for and if it's still relevant?

[rickhanlonii]

Oh, maybe this is from when we still delegated events to the document, since detached elements still fire events on the document? Which is interesting because that would make it not relevant post-17, but will be relevant again after the event changes we want to make.

[sophiebits]

You can read the original context here: #4865 #3790

[jackpope]

@rickhanlonii root.unmount() nullifies any reference I've tried to store for the button element. So I haven't been able to click on anything. Unlike unmountComponentAtNode which clears the container in the same way but preserves the button element reference.

[rickhanlonii]

@jackpope this works:

it('does not when event fired on unmounted tree', async () => {
    let clicks = 0;
    const container = document.createElement('div');
    document.body.appendChild(container);
    try {
      const root = ReactDOMClient.createRoot(container);

      await act(async () => {
        root.render(<button onClick={() => clicks++}>click me</button>);
      });

      const button = container.firstChild;

      // Now we unmount the component, as if caused by a non-React event handler
      // for the same click we're about to simulate, like closing a layer:
      root.unmount();
      button.click();

      // Since the tree is unmounted, we don't dispatch the click event.
      expect(clicks).toBe(0);
    } finally {
      document.body.removeChild(container);
    }
  });

[jackpope]

Ah so I was overcomplicating it. Thanks!

[react-sizebot]

Comparing: ec19db4...a9b85a8

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	176.24 kB	176.24 kB	=	54.88 kB	54.88 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	178.34 kB	178.34 kB	=	55.53 kB	55.53 kB
facebook-www/ReactDOM-prod.classic.js	=	571.94 kB	571.94 kB	=	100.56 kB	100.56 kB
facebook-www/ReactDOM-prod.modern.js	=	555.70 kB	555.70 kB	=	97.62 kB	97.62 kB
test_utils/ReactAllWarnings.js	Deleted	67.55 kB	0.00 kB	Deleted	16.54 kB	0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
test_utils/ReactAllWarnings.js	Deleted	67.55 kB	0.00 kB	Deleted	16.54 kB	0.00 kB

Generated by 🚫 dangerJS against a9b85a8