diff --git a/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.internal.js index fbed0d4b82a75..98069e2d9f400 100644 --- a/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.internal.js @@ -28,6 +28,7 @@ describe('ReactDOMSuspensePlaceholder', () => { ReactCache = require('react-cache'); Suspense = React.Suspense; container = document.createElement('div'); + document.body.appendChild(container); TextResource = ReactCache.unstable_createResource(([text, ms = 0]) => { return new Promise((resolve, reject) => @@ -38,6 +39,10 @@ describe('ReactDOMSuspensePlaceholder', () => { }, ([text, ms]) => text); }); + afterEach(() => { + document.body.removeChild(container); + }); + function advanceTimers(ms) { // Note: This advances Jest's virtual time but not React's. Use // ReactNoop.expire for that. @@ -157,4 +162,64 @@ describe('ReactDOMSuspensePlaceholder', () => { ); }, ); + + // Regression test for https://github.com/facebook/react/issues/14188 + it('can call findDOMNode() in a suspended component commit phase', async () => { + const log = []; + const Lazy = React.lazy( + () => + new Promise(resolve => + resolve({ + default() { + return 'lazy'; + }, + }), + ), + ); + + class Child extends React.Component { + componentDidMount() { + log.push('cDM ' + this.props.id); + ReactDOM.findDOMNode(this); + } + componentDidUpdate() { + log.push('cDU ' + this.props.id); + ReactDOM.findDOMNode(this); + } + render() { + return 'child'; + } + } + + const buttonRef = React.createRef(); + class App extends React.Component { + state = { + suspend: false, + }; + handleClick = () => { + this.setState({suspend: true}); + }; + render() { + return ( + + + + + {this.state.suspend && } + + ); + } + } + + ReactDOM.render(, container); + + expect(log).toEqual(['cDM first', 'cDM second']); + log.length = 0; + + buttonRef.current.dispatchEvent(new MouseEvent('click', {bubbles: true})); + await Lazy; + expect(log).toEqual(['cDU first', 'cDU second']); + }); });