diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js index b83ce5d5e1f36..4dc613805c94f 100644 --- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js @@ -2603,4 +2603,60 @@ describe('ReactDOMComponent', () => { expect(node.getAttribute('onx')).toBe('bar'); }); }); + + it('receives events in specific order', () => { + let eventOrder = []; + let track = tag => () => eventOrder.push(tag); + let outerRef = React.createRef(); + let innerRef = React.createRef(); + + function OuterReactApp() { + return ( +
+ ); + } + + function InnerReactApp() { + return ( +
+ ); + } + + const container = document.createElement('div'); + document.body.appendChild(container); + + try { + ReactDOM.render(, container); + ReactDOM.render(, outerRef.current); + + document.addEventListener('click', track('document bubble')); + document.addEventListener('click', track('document capture'), true); + + innerRef.current.click(); + + // The order we receive here is not ideal since it is expected that the + // capture listener fire before all bubble listeners. Other React apps + // might depend on this. + // + // @see https://github.com/facebook/react/pull/12919#issuecomment-395224674 + expect(eventOrder).toEqual([ + 'document capture', + 'inner capture', + 'inner bubble', + 'outer capture', + 'outer bubble', + 'document bubble', + ]); + } finally { + document.body.removeChild(container); + } + }); });