diff --git a/package.json b/package.json index 73c007dfa3f2..23692fd8d4ca 100644 --- a/package.json +++ b/package.json @@ -69,7 +69,7 @@ "gzip-js": "~0.3.2", "gzip-size": "^3.0.0", "jasmine-check": "^1.0.0-rc.0", - "jest": "^23.0.1", + "jest": "^23.1.0", "jest-diff": "^23.0.1", "merge-stream": "^1.0.0", "minimatch": "^3.0.4", diff --git a/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js b/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js index 85d6e22dfbc0..86a668a4bbc1 100644 --- a/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js @@ -42,6 +42,8 @@ let getListener; let putListener; let deleteAllListeners; +let container; + function registerSimpleTestHandler() { putListener(CHILD, ON_CLICK_KEY, LISTENER); const listener = getListener(CHILD, ON_CLICK_KEY); @@ -63,7 +65,8 @@ describe('ReactBrowserEventEmitter', () => { ReactBrowserEventEmitter = require('../events/ReactBrowserEventEmitter'); ReactTestUtils = require('react-dom/test-utils'); - const container = document.createElement('div'); + container = document.createElement('div'); + document.body.appendChild(container); let GRANDPARENT_PROPS = {}; let PARENT_PROPS = {}; @@ -129,6 +132,11 @@ describe('ReactBrowserEventEmitter', () => { idCallOrder = []; }); + afterEach(() => { + document.body.removeChild(container); + container = null; + }); + it('should store a listener correctly', () => { registerSimpleTestHandler(); const listener = getListener(CHILD, ON_CLICK_KEY); @@ -150,17 +158,17 @@ describe('ReactBrowserEventEmitter', () => { it('should invoke a simple handler registered on a node', () => { registerSimpleTestHandler(); - ReactTestUtils.Simulate.click(CHILD); + CHILD.click(); expect(LISTENER).toHaveBeenCalledTimes(1); }); it('should not invoke handlers if ReactBrowserEventEmitter is disabled', () => { registerSimpleTestHandler(); ReactBrowserEventEmitter.setEnabled(false); - ReactTestUtils.SimulateNative.click(CHILD); + CHILD.click(); expect(LISTENER).toHaveBeenCalledTimes(0); ReactBrowserEventEmitter.setEnabled(true); - ReactTestUtils.SimulateNative.click(CHILD); + CHILD.click(); expect(LISTENER).toHaveBeenCalledTimes(1); }); @@ -168,7 +176,7 @@ describe('ReactBrowserEventEmitter', () => { putListener(CHILD, ON_CLICK_KEY, recordID.bind(null, CHILD)); putListener(PARENT, ON_CLICK_KEY, recordID.bind(null, PARENT)); putListener(GRANDPARENT, ON_CLICK_KEY, recordID.bind(null, GRANDPARENT)); - ReactTestUtils.Simulate.click(CHILD); + CHILD.click(); expect(idCallOrder.length).toBe(3); expect(idCallOrder[0]).toBe(CHILD); expect(idCallOrder[1]).toBe(PARENT); @@ -179,7 +187,7 @@ describe('ReactBrowserEventEmitter', () => { putListener(GRANDPARENT, ON_CLICK_KEY, recordID.bind(null, 'GRANDPARENT')); putListener(PARENT, ON_CLICK_KEY, recordID.bind(null, 'PARENT')); putListener(CHILD, ON_CLICK_KEY, recordID.bind(null, 'CHILD')); - ReactTestUtils.Simulate.click(CHILD); + CHILD.click(); expect(idCallOrder).toEqual(['CHILD', 'PARENT', 'GRANDPARENT']); idCallOrder = []; @@ -191,7 +199,7 @@ describe('ReactBrowserEventEmitter', () => { recordID.bind(null, 'UPDATED_GRANDPARENT'), ); - ReactTestUtils.Simulate.click(CHILD); + CHILD.click(); expect(idCallOrder).toEqual(['CHILD', 'PARENT', 'UPDATED_GRANDPARENT']); }); @@ -224,7 +232,7 @@ describe('ReactBrowserEventEmitter', () => { recordID(GRANDPARENT); expect(event.currentTarget).toBe(GRANDPARENT); }); - ReactTestUtils.Simulate.click(CHILD); + CHILD.click(); expect(idCallOrder.length).toBe(3); expect(idCallOrder[0]).toBe(CHILD); expect(idCallOrder[1]).toBe(PARENT); @@ -239,7 +247,7 @@ describe('ReactBrowserEventEmitter', () => { recordIDAndStopPropagation.bind(null, PARENT), ); putListener(GRANDPARENT, ON_CLICK_KEY, recordID.bind(null, GRANDPARENT)); - ReactTestUtils.Simulate.click(CHILD); + CHILD.click(); expect(idCallOrder.length).toBe(2); expect(idCallOrder[0]).toBe(CHILD); expect(idCallOrder[1]).toBe(PARENT); @@ -254,7 +262,7 @@ describe('ReactBrowserEventEmitter', () => { e.isPropagationStopped = () => true; }); putListener(GRANDPARENT, ON_CLICK_KEY, recordID.bind(null, GRANDPARENT)); - ReactTestUtils.Simulate.click(CHILD); + CHILD.click(); expect(idCallOrder.length).toBe(2); expect(idCallOrder[0]).toBe(CHILD); expect(idCallOrder[1]).toBe(PARENT); @@ -268,7 +276,7 @@ describe('ReactBrowserEventEmitter', () => { ); putListener(PARENT, ON_CLICK_KEY, recordID.bind(null, PARENT)); putListener(GRANDPARENT, ON_CLICK_KEY, recordID.bind(null, GRANDPARENT)); - ReactTestUtils.Simulate.click(CHILD); + CHILD.click(); expect(idCallOrder.length).toBe(1); expect(idCallOrder[0]).toBe(CHILD); }); @@ -277,7 +285,7 @@ describe('ReactBrowserEventEmitter', () => { putListener(CHILD, ON_CLICK_KEY, recordIDAndReturnFalse.bind(null, CHILD)); putListener(PARENT, ON_CLICK_KEY, recordID.bind(null, PARENT)); putListener(GRANDPARENT, ON_CLICK_KEY, recordID.bind(null, GRANDPARENT)); - ReactTestUtils.Simulate.click(CHILD); + CHILD.click(); expect(idCallOrder.length).toBe(3); expect(idCallOrder[0]).toBe(CHILD); expect(idCallOrder[1]).toBe(PARENT); @@ -300,7 +308,7 @@ describe('ReactBrowserEventEmitter', () => { }; putListener(CHILD, ON_CLICK_KEY, handleChildClick); putListener(PARENT, ON_CLICK_KEY, handleParentClick); - ReactTestUtils.Simulate.click(CHILD); + CHILD.click(); expect(handleParentClick).toHaveBeenCalledTimes(1); }); @@ -310,7 +318,7 @@ describe('ReactBrowserEventEmitter', () => { putListener(PARENT, ON_CLICK_KEY, handleParentClick); }; putListener(CHILD, ON_CLICK_KEY, handleChildClick); - ReactTestUtils.Simulate.click(CHILD); + CHILD.click(); expect(handleParentClick).toHaveBeenCalledTimes(0); }); diff --git a/packages/react-dom/src/__tests__/ReactComponent-test.js b/packages/react-dom/src/__tests__/ReactComponent-test.js index 37f3fc226a3b..06bfa68baa19 100644 --- a/packages/react-dom/src/__tests__/ReactComponent-test.js +++ b/packages/react-dom/src/__tests__/ReactComponent-test.js @@ -278,7 +278,7 @@ describe('ReactComponent', () => { componentDidMount() { // Check .props.title to make sure we got the right elements back expect(this.wrapperRef.getTitle()).toBe('wrapper'); - expect(ReactDOM.findDOMNode(this.innerRef).className).toBe('inner'); + expect(this.innerRef.className).toBe('inner'); mounted = true; } } diff --git a/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js b/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js index 965b04f30aaa..25577ee5af24 100644 --- a/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js +++ b/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js @@ -1065,16 +1065,22 @@ describe('ReactComponentLifeCycle', () => { } } - ReactTestUtils.renderIntoDocument(); - expect(divRef.current.textContent).toBe('remote:0, local:0'); - - // Trigger setState() calls - childInstance.updateState(); - expect(divRef.current.textContent).toBe('remote:1, local:1'); - - // Trigger batched setState() calls - ReactTestUtils.Simulate.click(divRef.current); - expect(divRef.current.textContent).toBe('remote:2, local:2'); + const container = document.createElement('div'); + document.body.appendChild(container); + try { + ReactDOM.render(, container); + expect(divRef.current.textContent).toBe('remote:0, local:0'); + + // Trigger setState() calls + childInstance.updateState(); + expect(divRef.current.textContent).toBe('remote:1, local:1'); + + // Trigger batched setState() calls + divRef.current.click(); + expect(divRef.current.textContent).toBe('remote:2, local:2'); + } finally { + document.body.removeChild(container); + } }); it('should pass the return value from getSnapshotBeforeUpdate to componentDidUpdate', () => { diff --git a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js index 216afa8550d3..d614d27dd358 100644 --- a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js +++ b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js @@ -140,23 +140,28 @@ describe('ReactCompositeComponent', () => { }); it('should react to state changes from callbacks', () => { - const instance = ReactTestUtils.renderIntoDocument(); - let el = ReactDOM.findDOMNode(instance); - expect(el.tagName).toBe('A'); - - ReactTestUtils.Simulate.click(el); - el = ReactDOM.findDOMNode(instance); - expect(el.tagName).toBe('B'); + const container = document.createElement('div'); + document.body.appendChild(container); + try { + const instance = ReactDOM.render(, container); + let el = ReactDOM.findDOMNode(instance); + expect(el.tagName).toBe('A'); + el.click(); + el = ReactDOM.findDOMNode(instance); + expect(el.tagName).toBe('B'); + } finally { + document.body.removeChild(container); + } }); it('should rewire refs when rendering to different child types', () => { const instance = ReactTestUtils.renderIntoDocument(); - expect(ReactDOM.findDOMNode(instance.refs.x).tagName).toBe('A'); + expect(instance.refs.x.tagName).toBe('A'); instance._toggleActivatedState(); - expect(ReactDOM.findDOMNode(instance.refs.x).tagName).toBe('B'); + expect(instance.refs.x.tagName).toBe('B'); instance._toggleActivatedState(); - expect(ReactDOM.findDOMNode(instance.refs.x).tagName).toBe('A'); + expect(instance.refs.x.tagName).toBe('A'); }); it('should not cache old DOM nodes when switching constructors', () => { diff --git a/packages/react-dom/src/__tests__/ReactCompositeComponentNestedState-test.js b/packages/react-dom/src/__tests__/ReactCompositeComponentNestedState-test.js index 94a33a457a3f..e233e78b7208 100644 --- a/packages/react-dom/src/__tests__/ReactCompositeComponentNestedState-test.js +++ b/packages/react-dom/src/__tests__/ReactCompositeComponentNestedState-test.js @@ -11,13 +11,11 @@ let React; let ReactDOM; -let ReactTestUtils; describe('ReactCompositeComponentNestedState-state', () => { beforeEach(() => { React = require('react'); ReactDOM = require('react-dom'); - ReactTestUtils = require('react-dom/test-utils'); }); it('should provide up to date values for props', () => { @@ -102,7 +100,7 @@ describe('ReactCompositeComponentNestedState-state', () => { void ReactDOM.render(, container); // click "light green" - ReactTestUtils.Simulate.click(container.childNodes[0].childNodes[3]); + container.childNodes[0].childNodes[3].click(); expect(logger.mock.calls).toEqual([ ['parent-render', 'blue'], diff --git a/packages/react-dom/src/__tests__/ReactDOM-test.js b/packages/react-dom/src/__tests__/ReactDOM-test.js index cca40165fd45..48609a2c253d 100644 --- a/packages/react-dom/src/__tests__/ReactDOM-test.js +++ b/packages/react-dom/src/__tests__/ReactDOM-test.js @@ -45,23 +45,21 @@ describe('ReactDOM', () => { it('allows a DOM element to be used with a string', () => { const element = React.createElement('div', {className: 'foo'}); - const instance = ReactTestUtils.renderIntoDocument(element); - expect(ReactDOM.findDOMNode(instance).tagName).toBe('DIV'); + const node = ReactTestUtils.renderIntoDocument(element); + expect(node.tagName).toBe('DIV'); }); it('should allow children to be passed as an argument', () => { - const argDiv = ReactTestUtils.renderIntoDocument( + const argNode = ReactTestUtils.renderIntoDocument( React.createElement('div', null, 'child'), ); - const argNode = ReactDOM.findDOMNode(argDiv); expect(argNode.innerHTML).toBe('child'); }); it('should overwrite props.children with children argument', () => { - const conflictDiv = ReactTestUtils.renderIntoDocument( + const conflictNode = ReactTestUtils.renderIntoDocument( React.createElement('div', {children: 'fakechild'}, 'child'), ); - const conflictNode = ReactDOM.findDOMNode(conflictDiv); expect(conflictNode.innerHTML).toBe('child'); }); @@ -103,8 +101,7 @@ describe('ReactDOM', () => {
,
, ); - const root = ReactDOM.findDOMNode(myDiv); - const dog = root.childNodes[0]; + const dog = myDiv.childNodes[0]; expect(dog.className).toBe('bigdog'); }); @@ -242,34 +239,37 @@ describe('ReactDOM', () => { const log = []; const container = document.createElement('div'); document.body.appendChild(container); - ReactDOM.render(, container); - input.focus(); - - // When the second input is added, let's simulate losing focus, which is - // something that could happen when manipulating DOM nodes (but is hard to - // deterministically force without relying intensely on React DOM - // implementation details) - const div = container.firstChild; - ['appendChild', 'insertBefore'].forEach(name => { - const mutator = div[name]; - div[name] = function() { - if (input) { - input.blur(); - expect(document.activeElement.tagName).toBe('BODY'); - log.push('input2 inserted'); - } - return mutator.apply(this, arguments); - }; - }); + try { + ReactDOM.render(, container); + input.focus(); + + // When the second input is added, let's simulate losing focus, which is + // something that could happen when manipulating DOM nodes (but is hard to + // deterministically force without relying intensely on React DOM + // implementation details) + const div = container.firstChild; + ['appendChild', 'insertBefore'].forEach(name => { + const mutator = div[name]; + div[name] = function() { + if (input) { + input.blur(); + expect(document.activeElement.tagName).toBe('BODY'); + log.push('input2 inserted'); + } + return mutator.apply(this, arguments); + }; + }); - expect(document.activeElement.id).toBe('one'); - ReactDOM.render(, container); - // input2 gets added, which causes input to get blurred. Then - // componentDidUpdate focuses input2 and that should make it down to here, - // not get overwritten by focus restoration. - expect(document.activeElement.id).toBe('two'); - expect(log).toEqual(['input2 inserted', 'input2 focused']); - document.body.removeChild(container); + expect(document.activeElement.id).toBe('one'); + ReactDOM.render(, container); + // input2 gets added, which causes input to get blurred. Then + // componentDidUpdate focuses input2 and that should make it down to here, + // not get overwritten by focus restoration. + expect(document.activeElement.id).toBe('two'); + expect(log).toEqual(['input2 inserted', 'input2 focused']); + } finally { + document.body.removeChild(container); + } }); it('calls focus() on autoFocus elements after they have been mounted to the DOM', () => { @@ -308,15 +308,9 @@ describe('ReactDOM', () => { it("shouldn't fire duplicate event handler while handling other nested dispatch", () => { const actual = []; - function click(node) { - ReactTestUtils.Simulate.click(node, { - path: [node, container], - }); - } - class Wrapper extends React.Component { componentDidMount() { - click(this.ref1); + this.ref1.click(); } render() { @@ -325,7 +319,7 @@ describe('ReactDOM', () => {
{ actual.push('1st node clicked'); - click(this.ref2); + this.ref2.click(); }} ref={ref => (this.ref1 = ref)} /> @@ -341,13 +335,18 @@ describe('ReactDOM', () => { } const container = document.createElement('div'); - ReactDOM.render(, container); + document.body.appendChild(container); + try { + ReactDOM.render(, container); - const expected = [ - '1st node clicked', - "2nd node clicked imperatively from 1st's handler", - ]; - expect(actual).toEqual(expected); + const expected = [ + '1st node clicked', + "2nd node clicked imperatively from 1st's handler", + ]; + expect(actual).toEqual(expected); + } finally { + document.body.removeChild(container); + } }); it('should not crash with devtools installed', () => { diff --git a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js index 911f161b0e66..530232becb58 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js @@ -11,7 +11,6 @@ const React = require('react'); const ReactDOM = require('react-dom'); -const ReactTestUtils = require('react-dom/test-utils'); const PropTypes = require('prop-types'); describe('ReactDOMFiber', () => { @@ -843,33 +842,39 @@ describe('ReactDOMFiber', () => { it('should bubble events from the portal to the parent', () => { const portalContainer = document.createElement('div'); + document.body.appendChild(portalContainer); + try { + const ops = []; + let portal = null; - const ops = []; - let portal = null; - - ReactDOM.render( -
ops.push('parent clicked')}> - {ReactDOM.createPortal( -
ops.push('portal clicked')} - ref={n => (portal = n)}> - portal -
, - portalContainer, - )} -
, - container, - ); + ReactDOM.render( +
ops.push('parent clicked')}> + {ReactDOM.createPortal( +
ops.push('portal clicked')} + ref={n => (portal = n)}> + portal +
, + portalContainer, + )} +
, + container, + ); - expect(portal.tagName).toBe('DIV'); + expect(portal.tagName).toBe('DIV'); - ReactTestUtils.Simulate.click(portal); + portal.click(); - expect(ops).toEqual(['portal clicked', 'parent clicked']); + expect(ops).toEqual(['portal clicked', 'parent clicked']); + } finally { + document.body.removeChild(portalContainer); + } }); it('should not onMouseLeave when staying in the portal', () => { const portalContainer = document.createElement('div'); + document.body.appendChild(container); + document.body.appendChild(portalContainer); let ops = []; let firstTarget = null; @@ -878,56 +883,69 @@ describe('ReactDOMFiber', () => { function simulateMouseMove(from, to) { if (from) { - ReactTestUtils.SimulateNative.mouseOut(from, { - relatedTarget: to, - }); + from.dispatchEvent( + new MouseEvent('mouseout', { + bubbles: true, + cancelable: true, + relatedTarget: to, + }), + ); } if (to) { - ReactTestUtils.SimulateNative.mouseOver(to, { - relatedTarget: from, - }); + to.dispatchEvent( + new MouseEvent('mouseover', { + bubbles: true, + cancelable: true, + relatedTarget: from, + }), + ); } } - ReactDOM.render( -
-
ops.push('enter parent')} - onMouseLeave={() => ops.push('leave parent')}> -
(firstTarget = n)} /> - {ReactDOM.createPortal( -
ops.push('enter portal')} - onMouseLeave={() => ops.push('leave portal')} - ref={n => (secondTarget = n)}> - portal -
, - portalContainer, - )} -
-
(thirdTarget = n)} /> -
, - container, - ); + try { + ReactDOM.render( +
+
ops.push('enter parent')} + onMouseLeave={() => ops.push('leave parent')}> +
(firstTarget = n)} /> + {ReactDOM.createPortal( +
ops.push('enter portal')} + onMouseLeave={() => ops.push('leave portal')} + ref={n => (secondTarget = n)}> + portal +
, + portalContainer, + )} +
+
(thirdTarget = n)} /> +
, + container, + ); - simulateMouseMove(null, firstTarget); - expect(ops).toEqual(['enter parent']); + simulateMouseMove(null, firstTarget); + expect(ops).toEqual(['enter parent']); - ops = []; + ops = []; - simulateMouseMove(firstTarget, secondTarget); - expect(ops).toEqual([ - // Parent did not invoke leave because we're still inside the portal. - 'enter portal', - ]); + simulateMouseMove(firstTarget, secondTarget); + expect(ops).toEqual([ + // Parent did not invoke leave because we're still inside the portal. + 'enter portal', + ]); - ops = []; + ops = []; - simulateMouseMove(secondTarget, thirdTarget); - expect(ops).toEqual([ - 'leave portal', - 'leave parent', // Only when we leave the portal does onMouseLeave fire. - ]); + simulateMouseMove(secondTarget, thirdTarget); + expect(ops).toEqual([ + 'leave portal', + 'leave parent', // Only when we leave the portal does onMouseLeave fire. + ]); + } finally { + document.body.removeChild(container); + document.body.removeChild(portalContainer); + } }); it('should throw on bad createPortal argument', () => { @@ -967,81 +985,82 @@ describe('ReactDOMFiber', () => { }); it('should not update event handlers until commit', () => { - let ops = []; - const handlerA = () => ops.push('A'); - const handlerB = () => ops.push('B'); - - class Example extends React.Component { - state = {flip: false, count: 0}; - flip() { - this.setState({flip: true, count: this.state.count + 1}); - } - tick() { - this.setState({count: this.state.count + 1}); - } - render() { - const useB = !this.props.forceA && this.state.flip; - return
; + document.body.appendChild(container); + try { + let ops = []; + const handlerA = () => ops.push('A'); + const handlerB = () => ops.push('B'); + + class Example extends React.Component { + state = {flip: false, count: 0}; + flip() { + this.setState({flip: true, count: this.state.count + 1}); + } + tick() { + this.setState({count: this.state.count + 1}); + } + render() { + const useB = !this.props.forceA && this.state.flip; + return
; + } } - } - class Click extends React.Component { - constructor() { - super(); - click(node); - } - render() { - return null; + class Click extends React.Component { + constructor() { + super(); + node.click(); + } + render() { + return null; + } } - } - - let inst; - ReactDOM.render([ (inst = n)} />], container); - const node = container.firstChild; - expect(node.tagName).toEqual('DIV'); - function click(target) { - ReactTestUtils.Simulate.click(target); - } + let inst; + ReactDOM.render([ (inst = n)} />], container); + const node = container.firstChild; + expect(node.tagName).toEqual('DIV'); - click(node); + node.click(); - expect(ops).toEqual(['A']); - ops = []; + expect(ops).toEqual(['A']); + ops = []; - // Render with the other event handler. - inst.flip(); + // Render with the other event handler. + inst.flip(); - click(node); + node.click(); - expect(ops).toEqual(['B']); - ops = []; + expect(ops).toEqual(['B']); + ops = []; - // Rerender without changing any props. - inst.tick(); + // Rerender without changing any props. + inst.tick(); - click(node); + node.click(); - expect(ops).toEqual(['B']); - ops = []; + expect(ops).toEqual(['B']); + ops = []; - // Render a flip back to the A handler. The second component invokes the - // click handler during render to simulate a click during an aborted - // render. I use this hack because at current time we don't have a way to - // test aborted ReactDOM renders. - ReactDOM.render( - [, ], - container, - ); + // Render a flip back to the A handler. The second component invokes the + // click handler during render to simulate a click during an aborted + // render. I use this hack because at current time we don't have a way to + // test aborted ReactDOM renders. + ReactDOM.render( + [, ], + container, + ); - // Because the new click handler has not yet committed, we should still - // invoke B. - expect(ops).toEqual(['B']); - ops = []; + // Because the new click handler has not yet committed, we should still + // invoke B. + expect(ops).toEqual(['B']); + ops = []; - // Any click that happens after commit, should invoke A. - click(node); - expect(ops).toEqual(['A']); + // Any click that happens after commit, should invoke A. + node.click(); + expect(ops).toEqual(['A']); + } finally { + document.body.removeChild(container); + } }); it('should not crash encountering low-priority tree', () => { diff --git a/packages/react-dom/src/__tests__/ReactDOMIframe-test.js b/packages/react-dom/src/__tests__/ReactDOMIframe-test.js index 97b07bb0b772..8c3a01b78f0a 100644 --- a/packages/react-dom/src/__tests__/ReactDOMIframe-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMIframe-test.js @@ -11,12 +11,10 @@ describe('ReactDOMIframe', () => { let React; - let ReactDOM; let ReactTestUtils; beforeEach(() => { React = require('react'); - ReactDOM = require('react-dom'); ReactTestUtils = require('react-dom/test-utils'); }); @@ -28,7 +26,7 @@ describe('ReactDOMIframe', () => { const loadEvent = document.createEvent('Event'); loadEvent.initEvent('load', false, false); - ReactDOM.findDOMNode(iframe).dispatchEvent(loadEvent); + iframe.dispatchEvent(loadEvent); expect(onLoadSpy).toHaveBeenCalled(); }); diff --git a/packages/react-dom/src/__tests__/ReactDOMInput-test.js b/packages/react-dom/src/__tests__/ReactDOMInput-test.js index 4a3066a073f7..ca4b999f5f23 100644 --- a/packages/react-dom/src/__tests__/ReactDOMInput-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMInput-test.js @@ -38,27 +38,27 @@ describe('ReactDOMInput', () => { it('should properly control a value even if no event listener exists', () => { const container = document.createElement('div'); - let stub; + let node; expect(() => { - stub = ReactDOM.render(, container); + node = ReactDOM.render(, container); }).toWarnDev( 'Failed prop type: You provided a `value` prop to a form field without an `onChange` handler.', ); document.body.appendChild(container); - const node = ReactDOM.findDOMNode(stub); - - setUntrackedValue.call(node, 'giraffe'); - - // This must use the native event dispatching. If we simulate, we will - // bypass the lazy event attachment system so we won't actually test this. - dispatchEventOnNode(node, 'change'); + try { + setUntrackedValue.call(node, 'giraffe'); - expect(node.value).toBe('lion'); + // This must use the native event dispatching. If we simulate, we will + // bypass the lazy event attachment system so we won't actually test this. + dispatchEventOnNode(node, 'change'); - document.body.removeChild(container); + expect(node.value).toBe('lion'); + } finally { + document.body.removeChild(container); + } }); it('should control a value in reentrant events', () => { @@ -169,26 +169,24 @@ describe('ReactDOMInput', () => { describe('switching text inputs between numeric and string numbers', () => { it('does change the number 2 to "2.0" with no change handler', () => { - let stub = ; - stub = ReactTestUtils.renderIntoDocument(stub); - const node = ReactDOM.findDOMNode(stub); + const stub = ; + const node = ReactTestUtils.renderIntoDocument(stub); node.value = '2.0'; - ReactTestUtils.Simulate.change(stub); + ReactTestUtils.Simulate.change(node); expect(node.getAttribute('value')).toBe('2'); expect(node.value).toBe('2'); }); it('does change the string "2" to "2.0" with no change handler', () => { - let stub = ; - stub = ReactTestUtils.renderIntoDocument(stub); - const node = ReactDOM.findDOMNode(stub); + const stub = ; + const node = ReactTestUtils.renderIntoDocument(stub); node.value = '2.0'; - ReactTestUtils.Simulate.change(stub); + ReactTestUtils.Simulate.change(node); expect(node.getAttribute('value')).toBe('2'); expect(node.value).toBe('2'); @@ -315,8 +313,7 @@ describe('ReactDOMInput', () => { it('should display `defaultValue` of number 0', () => { let stub = ; - stub = ReactTestUtils.renderIntoDocument(stub); - const node = ReactDOM.findDOMNode(stub); + const node = ReactTestUtils.renderIntoDocument(stub); expect(node.getAttribute('value')).toBe('0'); expect(node.value).toBe('0'); @@ -348,16 +345,14 @@ describe('ReactDOMInput', () => { it('should display "true" for `defaultValue` of `true`', () => { let stub = ; - stub = ReactTestUtils.renderIntoDocument(stub); - const node = ReactDOM.findDOMNode(stub); + const node = ReactTestUtils.renderIntoDocument(stub); expect(node.value).toBe('true'); }); it('should display "false" for `defaultValue` of `false`', () => { let stub = ; - stub = ReactTestUtils.renderIntoDocument(stub); - const node = ReactDOM.findDOMNode(stub); + const node = ReactTestUtils.renderIntoDocument(stub); expect(node.value).toBe('false'); }); @@ -467,17 +462,15 @@ describe('ReactDOMInput', () => { }, }; - let stub = ; - stub = ReactTestUtils.renderIntoDocument(stub); - const node = ReactDOM.findDOMNode(stub); + const stub = ; + const node = ReactTestUtils.renderIntoDocument(stub); expect(node.value).toBe('foobar'); }); it('should display `value` of number 0', () => { - let stub = ; - stub = ReactTestUtils.renderIntoDocument(stub); - const node = ReactDOM.findDOMNode(stub); + const stub = ; + const node = ReactTestUtils.renderIntoDocument(stub); expect(node.value).toBe('0'); }); @@ -593,9 +586,8 @@ describe('ReactDOMInput', () => { }); it('should properly control a value of number `0`', () => { - let stub = ; - stub = ReactTestUtils.renderIntoDocument(stub); - const node = ReactDOM.findDOMNode(stub); + const stub = ; + const node = ReactTestUtils.renderIntoDocument(stub); node.value = 'giraffe'; ReactTestUtils.Simulate.change(node); @@ -603,9 +595,8 @@ describe('ReactDOMInput', () => { }); it('should properly control 0.0 for a text input', () => { - let stub = ; - stub = ReactTestUtils.renderIntoDocument(stub); - const node = ReactDOM.findDOMNode(stub); + const stub = ; + const node = ReactTestUtils.renderIntoDocument(stub); node.value = '0.0'; ReactTestUtils.Simulate.change(node, {target: {value: '0.0'}}); @@ -613,9 +604,8 @@ describe('ReactDOMInput', () => { }); it('should properly control 0.0 for a number input', () => { - let stub = ; - stub = ReactTestUtils.renderIntoDocument(stub); - const node = ReactDOM.findDOMNode(stub); + const stub = ; + const node = ReactTestUtils.renderIntoDocument(stub); node.value = '0.0'; ReactTestUtils.Simulate.change(node, {target: {value: '0.0'}}); @@ -702,9 +692,8 @@ describe('ReactDOMInput', () => { }); it('should not set a value for submit buttons unnecessarily', () => { - let stub = ; - stub = ReactTestUtils.renderIntoDocument(stub); - const node = ReactDOM.findDOMNode(stub); + const stub = ; + const node = ReactTestUtils.renderIntoDocument(stub); // The value shouldn't be '', or else the button will have no text; it // should have the default "Submit" or "Submit Query" label. Most browsers @@ -1460,10 +1449,9 @@ describe('ReactDOMInput', () => { }); it('an uncontrolled number input will not update the value attribute on blur', () => { - const stub = ReactTestUtils.renderIntoDocument( + const node = ReactTestUtils.renderIntoDocument( , ); - const node = ReactDOM.findDOMNode(stub); node.value = 4; @@ -1473,10 +1461,9 @@ describe('ReactDOMInput', () => { }); it('an uncontrolled text input will not update the value attribute on blur', () => { - const stub = ReactTestUtils.renderIntoDocument( + const node = ReactTestUtils.renderIntoDocument( , ); - const node = ReactDOM.findDOMNode(stub); node.value = 4; diff --git a/packages/react-dom/src/__tests__/ReactDOMOption-test.js b/packages/react-dom/src/__tests__/ReactDOMOption-test.js index 02e1f662c062..8cbd0118d2ce 100644 --- a/packages/react-dom/src/__tests__/ReactDOMOption-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMOption-test.js @@ -26,8 +26,7 @@ describe('ReactDOMOption', () => { {1} {'foo'} ); - stub = ReactTestUtils.renderIntoDocument(stub); - const node = ReactDOM.findDOMNode(stub); + const node = ReactTestUtils.renderIntoDocument(stub); expect(node.innerHTML).toBe('1 foo'); }); @@ -59,17 +58,15 @@ describe('ReactDOMOption', () => { {undefined} {2} ); - stub = ReactTestUtils.renderIntoDocument(stub); + const node = ReactTestUtils.renderIntoDocument(stub); - const node = ReactDOM.findDOMNode(stub); expect(node.innerHTML).toBe('1 2'); }); it('should be able to use dangerouslySetInnerHTML on option', () => { let stub = ); - stub = ReactTestUtils.renderIntoDocument(stub); - const node = ReactDOM.findDOMNode(stub); + const node = ReactTestUtils.renderIntoDocument(stub); expect(node.options[0].selected).toBe(false); // one expect(node.options[1].selected).toBe(false); // two @@ -259,7 +250,7 @@ describe('ReactDOMSelect', () => { it('should reset child options selected when they are changed and `value` is set', () => { let stub = @@ -270,8 +261,6 @@ describe('ReactDOMSelect', () => { container, ); - const node = ReactDOM.findDOMNode(stub); - expect(node.options[0].selected).toBe(true); // a expect(node.options[1].selected).toBe(true); // b expect(node.options[2].selected).toBe(false); // c @@ -293,8 +282,7 @@ describe('ReactDOMSelect', () => { ); const container = document.createElement('div'); - const stub = ReactDOM.render(el, container); - const node = ReactDOM.findDOMNode(stub); + const node = ReactDOM.render(el, container); expect(node.options[0].selected).toBe(false); // monkey expect(node.options[1].selected).toBe(true); // giraffe @@ -327,8 +315,7 @@ describe('ReactDOMSelect', () => { ); const options = stub.props.children; const container = document.createElement('div'); - stub = ReactDOM.render(stub, container); - const node = ReactDOM.findDOMNode(stub); + const node = ReactDOM.render(stub, container); expect(node.options[0].selected).toBe(false); // monkey expect(node.options[1].selected).toBe(true); // giraffe @@ -357,8 +344,7 @@ describe('ReactDOMSelect', () => { ); const options = stub.props.children; const container = document.createElement('div'); - stub = ReactDOM.render(stub, container); - const node = ReactDOM.findDOMNode(stub); + const node = ReactDOM.render(stub, container); expect(node.options[0].selected).toBe(false); // monkey expect(node.options[1].selected).toBe(true); // giraffe @@ -386,8 +372,7 @@ describe('ReactDOMSelect', () => { ); const options = stub.props.children; const container = document.createElement('div'); - stub = ReactDOM.render(stub, container); - const node = ReactDOM.findDOMNode(stub); + const node = ReactDOM.render(stub, container); expect(node.options[0].selected).toBe(false); // monkey expect(node.options[1].selected).toBe(true); // giraffe @@ -410,8 +395,7 @@ describe('ReactDOMSelect', () => { ); const options = stub.props.children; const container = document.createElement('div'); - stub = ReactDOM.render(stub, container); - const node = ReactDOM.findDOMNode(stub); + const node = ReactDOM.render(stub, container); ReactDOM.render( ); - stub = ReactTestUtils.renderIntoDocument(stub); - const node = ReactDOM.findDOMNode(stub); + const node = ReactTestUtils.renderIntoDocument(stub); ReactTestUtils.Simulate.change(node); @@ -648,8 +630,7 @@ describe('ReactDOMSelect', () => { ); - stub = ReactDOM.render(stub, container); - const node = ReactDOM.findDOMNode(stub); + const node = ReactDOM.render(stub, container); expect(() => ReactTestUtils.Simulate.change(node)).not.toThrow(); }); diff --git a/packages/react-dom/src/__tests__/ReactDOMTextComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMTextComponent-test.js index f3f9dc5485b3..2adb55d69b45 100644 --- a/packages/react-dom/src/__tests__/ReactDOMTextComponent-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMTextComponent-test.js @@ -39,7 +39,7 @@ describe('ReactDOMTextComponent', () => {
, el, ); - let nodes = filterOutComments(ReactDOM.findDOMNode(inst).childNodes); + let nodes = filterOutComments(inst.childNodes); let foo = nodes[1]; let bar = nodes[2]; @@ -56,7 +56,7 @@ describe('ReactDOMTextComponent', () => { ); // After the update, the text nodes should have stayed in place (as opposed // to getting unmounted and remounted) - nodes = filterOutComments(ReactDOM.findDOMNode(inst).childNodes); + nodes = filterOutComments(inst.childNodes); expect(nodes[1]).toBe(foo); expect(nodes[2]).toBe(bar); expect(foo.data).toBe('baz'); @@ -74,8 +74,7 @@ describe('ReactDOMTextComponent', () => { el, ); - let container = ReactDOM.findDOMNode(inst); - let childNodes = filterOutComments(container.childNodes); + let childNodes = filterOutComments(inst.childNodes); let childDiv = childNodes[1]; inst = ReactDOM.render( @@ -86,8 +85,7 @@ describe('ReactDOMTextComponent', () => {
, el, ); - container = ReactDOM.findDOMNode(inst); - childNodes = filterOutComments(container.childNodes); + childNodes = filterOutComments(inst.childNodes); expect(childNodes.length).toBe(1); expect(childNodes[0]).toBe(childDiv); @@ -99,8 +97,7 @@ describe('ReactDOMTextComponent', () => {
, el, ); - container = ReactDOM.findDOMNode(inst); - childNodes = filterOutComments(container.childNodes); + childNodes = filterOutComments(inst.childNodes); expect(childNodes.length).toBe(3); expect(childNodes[0].data).toBe('foo'); expect(childNodes[1]).toBe(childDiv); @@ -125,8 +122,7 @@ describe('ReactDOMTextComponent', () => { el, ); - let container = ReactDOM.findDOMNode(inst); - container.normalize(); + inst.normalize(); inst = ReactDOM.render(
@@ -138,8 +134,7 @@ describe('ReactDOMTextComponent', () => {
, el, ); - container = ReactDOM.findDOMNode(inst); - expect(container.textContent).toBe('barbazquxfoo'); + expect(inst.textContent).toBe('barbazquxfoo'); }); xit('can reconcile text merged by Node.normalize()', () => { @@ -153,8 +148,7 @@ describe('ReactDOMTextComponent', () => { el, ); - let container = ReactDOM.findDOMNode(inst); - container.normalize(); + inst.normalize(); inst = ReactDOM.render(
@@ -164,8 +158,7 @@ describe('ReactDOMTextComponent', () => {
, el, ); - container = ReactDOM.findDOMNode(inst); - expect(container.textContent).toBe('barbazqux'); + expect(inst.textContent).toBe('barbazqux'); }); it('can reconcile text from pre-rendered markup', () => { @@ -207,15 +200,14 @@ describe('ReactDOMTextComponent', () => { el, ); - let container = ReactDOM.findDOMNode(inst); - let childNodes = filterOutComments(ReactDOM.findDOMNode(inst).childNodes); + let childNodes = filterOutComments(inst.childNodes); let textNode = childNodes[1]; textNode.textContent = 'foo'; - container.insertBefore( + inst.insertBefore( document.createTextNode('bar'), childNodes[1].nextSibling, ); - container.insertBefore( + inst.insertBefore( document.createTextNode('baz'), childNodes[1].nextSibling, ); @@ -227,8 +219,7 @@ describe('ReactDOMTextComponent', () => {
, el, ); - container = ReactDOM.findDOMNode(inst); - expect(container.textContent).toBe('barbazqux'); + expect(inst.textContent).toBe('barbazqux'); }); xit('can reconcile text arbitrarily split into multiple nodes on some substitutions only', () => { @@ -246,21 +237,20 @@ describe('ReactDOMTextComponent', () => { el, ); - let container = ReactDOM.findDOMNode(inst); - let childNodes = filterOutComments(ReactDOM.findDOMNode(inst).childNodes); + let childNodes = filterOutComments(inst.childNodes); let textNode = childNodes[3]; textNode.textContent = 'foo'; - container.insertBefore( + inst.insertBefore( document.createTextNode('bar'), childNodes[3].nextSibling, ); - container.insertBefore( + inst.insertBefore( document.createTextNode('baz'), childNodes[3].nextSibling, ); let secondTextNode = childNodes[5]; secondTextNode.textContent = 'bar'; - container.insertBefore( + inst.insertBefore( document.createTextNode('foo'), childNodes[5].nextSibling, ); @@ -277,8 +267,7 @@ describe('ReactDOMTextComponent', () => {
, el, ); - container = ReactDOM.findDOMNode(inst); - expect(container.textContent).toBe('bazbarbazquxbarbazbar'); + expect(inst.textContent).toBe('bazbarbazquxbarbazbar'); }); xit('can unmount normalized text nodes', () => { diff --git a/packages/react-dom/src/__tests__/ReactEventIndependence-test.js b/packages/react-dom/src/__tests__/ReactEventIndependence-test.js index 5133c3d8181b..e7b90e360e17 100644 --- a/packages/react-dom/src/__tests__/ReactEventIndependence-test.js +++ b/packages/react-dom/src/__tests__/ReactEventIndependence-test.js @@ -11,7 +11,6 @@ let React; let ReactDOM; -let ReactTestUtils; describe('ReactEventIndependence', () => { beforeEach(() => { @@ -19,49 +18,66 @@ describe('ReactEventIndependence', () => { React = require('react'); ReactDOM = require('react-dom'); - ReactTestUtils = require('react-dom/test-utils'); }); it('does not crash with other react inside', () => { let clicks = 0; - const div = ReactTestUtils.renderIntoDocument( -
clicks++} - dangerouslySetInnerHTML={{ - __html: '
', - }} - />, - ); - ReactTestUtils.SimulateNative.click(div.firstChild); - expect(clicks).toBe(1); + const container = document.createElement('div'); + document.body.appendChild(container); + try { + const div = ReactDOM.render( +
clicks++} + dangerouslySetInnerHTML={{ + __html: '
', + }} + />, + container, + ); + + div.firstChild.click(); + expect(clicks).toBe(1); + } finally { + document.body.removeChild(container); + } }); it('does not crash with other react outside', () => { let clicks = 0; const outer = document.createElement('div'); - outer.setAttribute('data-reactid', '.z'); - const inner = ReactDOM.render( - , - outer, - ); - ReactTestUtils.SimulateNative.click(inner); - expect(clicks).toBe(1); + document.body.appendChild(outer); + try { + outer.setAttribute('data-reactid', '.z'); + const inner = ReactDOM.render( + , + outer, + ); + inner.click(); + expect(clicks).toBe(1); + } finally { + document.body.removeChild(outer); + } }); it('does not when event fired on unmounted tree', () => { let clicks = 0; const container = document.createElement('div'); - const button = ReactDOM.render( - , - container, - ); + document.body.appendChild(container); + try { + const button = ReactDOM.render( + , + container, + ); - // 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: - ReactDOM.unmountComponentAtNode(container); - ReactTestUtils.SimulateNative.click(button); + // 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: + ReactDOM.unmountComponentAtNode(container); + button.click(); - // Since the tree is unmounted, we don't dispatch the click event. - expect(clicks).toBe(0); + // Since the tree is unmounted, we don't dispatch the click event. + expect(clicks).toBe(0); + } finally { + document.body.removeChild(container); + } }); }); diff --git a/packages/react-dom/src/__tests__/ReactIdentity-test.js b/packages/react-dom/src/__tests__/ReactIdentity-test.js index 7849d7d3b752..880266c87d76 100644 --- a/packages/react-dom/src/__tests__/ReactIdentity-test.js +++ b/packages/react-dom/src/__tests__/ReactIdentity-test.js @@ -78,7 +78,7 @@ describe('ReactIdentity', () => { const instance = ReactDOM.render(, container); const span = instance.refs.span; - expect(ReactDOM.findDOMNode(span)).not.toBe(null); + expect(span).not.toBe(null); } it('should allow any character as a key, in a detached parent', () => { diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration.js index 3fa9a18eaa43..1faf45872b87 100644 --- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration.js +++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration.js @@ -12,7 +12,6 @@ let React; let ReactDOM; let ReactDOMServer; -let ReactTestUtils; // These tests rely both on ReactDOMServer and ReactDOM. // If a test only needs ReactDOMServer, put it in ReactServerRendering-test instead. @@ -21,7 +20,6 @@ describe('ReactDOMServerHydration', () => { jest.resetModules(); React = require('react'); ReactDOM = require('react-dom'); - ReactTestUtils = require('react-dom/test-utils'); ReactDOMServer = require('react-dom/server'); }); @@ -48,67 +46,73 @@ describe('ReactDOMServerHydration', () => { } const element = document.createElement('div'); - ReactDOM.render(, element); - - let lastMarkup = element.innerHTML; - - // Exercise the update path. Markup should not change, - // but some lifecycle methods should be run again. - ReactDOM.render(, element); - expect(mountCount).toEqual(1); - - // Unmount and remount. We should get another mount event and - // we should get different markup, as the IDs are unique each time. - ReactDOM.unmountComponentAtNode(element); - expect(element.innerHTML).toEqual(''); - ReactDOM.render(, element); - expect(mountCount).toEqual(2); - expect(element.innerHTML).not.toEqual(lastMarkup); - - // Now kill the node and render it on top of server-rendered markup, as if - // we used server rendering. We should mount again, but the markup should - // be unchanged. We will append a sentinel at the end of innerHTML to be - // sure that innerHTML was not changed. - ReactDOM.unmountComponentAtNode(element); - expect(element.innerHTML).toEqual(''); - - lastMarkup = ReactDOMServer.renderToString(); - element.innerHTML = lastMarkup; - - let instance; - - expect(() => { - instance = ReactDOM.render(, element); - }).toLowPriorityWarnDev( - 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' + - 'will stop working in React v17. Replace the ReactDOM.render() call ' + - 'with ReactDOM.hydrate() if you want React to attach to the server HTML.', - ); - expect(mountCount).toEqual(3); - expect(element.innerHTML).toBe(lastMarkup); - - // Ensure the events system works after mount into server markup - expect(numClicks).toEqual(0); - ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(instance.refs.span)); - expect(numClicks).toEqual(1); - - ReactDOM.unmountComponentAtNode(element); - expect(element.innerHTML).toEqual(''); - - // Now simulate a situation where the app is not idempotent. React should - // warn but do the right thing. - element.innerHTML = lastMarkup; - expect(() => { - instance = ReactDOM.render(, element); - }).toWarnDev('Text content did not match. Server: "x" Client: "y"'); - expect(mountCount).toEqual(4); - expect(element.innerHTML.length > 0).toBe(true); - expect(element.innerHTML).not.toEqual(lastMarkup); - - // Ensure the events system works after markup mismatch. - expect(numClicks).toEqual(1); - ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(instance.refs.span)); - expect(numClicks).toEqual(2); + document.body.appendChild(element); + try { + ReactDOM.render(, element); + + let lastMarkup = element.innerHTML; + + // Exercise the update path. Markup should not change, + // but some lifecycle methods should be run again. + ReactDOM.render(, element); + expect(mountCount).toEqual(1); + + // Unmount and remount. We should get another mount event and + // we should get different markup, as the IDs are unique each time. + ReactDOM.unmountComponentAtNode(element); + expect(element.innerHTML).toEqual(''); + ReactDOM.render(, element); + expect(mountCount).toEqual(2); + expect(element.innerHTML).not.toEqual(lastMarkup); + + // Now kill the node and render it on top of server-rendered markup, as if + // we used server rendering. We should mount again, but the markup should + // be unchanged. We will append a sentinel at the end of innerHTML to be + // sure that innerHTML was not changed. + ReactDOM.unmountComponentAtNode(element); + expect(element.innerHTML).toEqual(''); + + lastMarkup = ReactDOMServer.renderToString(); + element.innerHTML = lastMarkup; + + let instance; + + expect(() => { + instance = ReactDOM.render(, element); + }).toLowPriorityWarnDev( + 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' + + 'will stop working in React v17. Replace the ReactDOM.render() call ' + + 'with ReactDOM.hydrate() if you want React to attach to the server HTML.', + ); + expect(mountCount).toEqual(3); + expect(element.innerHTML).toBe(lastMarkup); + + // Ensure the events system works after mount into server markup + expect(numClicks).toEqual(0); + + instance.refs.span.click(); + expect(numClicks).toEqual(1); + + ReactDOM.unmountComponentAtNode(element); + expect(element.innerHTML).toEqual(''); + + // Now simulate a situation where the app is not idempotent. React should + // warn but do the right thing. + element.innerHTML = lastMarkup; + expect(() => { + instance = ReactDOM.render(, element); + }).toWarnDev('Text content did not match. Server: "x" Client: "y"'); + expect(mountCount).toEqual(4); + expect(element.innerHTML.length > 0).toBe(true); + expect(element.innerHTML).not.toEqual(lastMarkup); + + // Ensure the events system works after markup mismatch. + expect(numClicks).toEqual(1); + instance.refs.span.click(); + expect(numClicks).toEqual(2); + } finally { + document.body.removeChild(element); + } }); it('should have the correct mounting behavior (new hydrate API)', () => { @@ -134,59 +138,64 @@ describe('ReactDOMServerHydration', () => { } const element = document.createElement('div'); - ReactDOM.render(, element); - - let lastMarkup = element.innerHTML; - - // Exercise the update path. Markup should not change, - // but some lifecycle methods should be run again. - ReactDOM.render(, element); - expect(mountCount).toEqual(1); - - // Unmount and remount. We should get another mount event and - // we should get different markup, as the IDs are unique each time. - ReactDOM.unmountComponentAtNode(element); - expect(element.innerHTML).toEqual(''); - ReactDOM.render(, element); - expect(mountCount).toEqual(2); - expect(element.innerHTML).not.toEqual(lastMarkup); - - // Now kill the node and render it on top of server-rendered markup, as if - // we used server rendering. We should mount again, but the markup should - // be unchanged. We will append a sentinel at the end of innerHTML to be - // sure that innerHTML was not changed. - ReactDOM.unmountComponentAtNode(element); - expect(element.innerHTML).toEqual(''); - - lastMarkup = ReactDOMServer.renderToString(); - element.innerHTML = lastMarkup; - - let instance = ReactDOM.hydrate(, element); - expect(mountCount).toEqual(3); - expect(element.innerHTML).toBe(lastMarkup); - - // Ensure the events system works after mount into server markup - expect(numClicks).toEqual(0); - ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(instance.refs.span)); - expect(numClicks).toEqual(1); - - ReactDOM.unmountComponentAtNode(element); - expect(element.innerHTML).toEqual(''); - - // Now simulate a situation where the app is not idempotent. React should - // warn but do the right thing. - element.innerHTML = lastMarkup; - expect(() => { - instance = ReactDOM.hydrate(, element); - }).toWarnDev('Text content did not match. Server: "x" Client: "y"'); - expect(mountCount).toEqual(4); - expect(element.innerHTML.length > 0).toBe(true); - expect(element.innerHTML).not.toEqual(lastMarkup); - - // Ensure the events system works after markup mismatch. - expect(numClicks).toEqual(1); - ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(instance.refs.span)); - expect(numClicks).toEqual(2); + document.body.appendChild(element); + try { + ReactDOM.render(, element); + + let lastMarkup = element.innerHTML; + + // Exercise the update path. Markup should not change, + // but some lifecycle methods should be run again. + ReactDOM.render(, element); + expect(mountCount).toEqual(1); + + // Unmount and remount. We should get another mount event and + // we should get different markup, as the IDs are unique each time. + ReactDOM.unmountComponentAtNode(element); + expect(element.innerHTML).toEqual(''); + ReactDOM.render(, element); + expect(mountCount).toEqual(2); + expect(element.innerHTML).not.toEqual(lastMarkup); + + // Now kill the node and render it on top of server-rendered markup, as if + // we used server rendering. We should mount again, but the markup should + // be unchanged. We will append a sentinel at the end of innerHTML to be + // sure that innerHTML was not changed. + ReactDOM.unmountComponentAtNode(element); + expect(element.innerHTML).toEqual(''); + + lastMarkup = ReactDOMServer.renderToString(); + element.innerHTML = lastMarkup; + + let instance = ReactDOM.hydrate(, element); + expect(mountCount).toEqual(3); + expect(element.innerHTML).toBe(lastMarkup); + + // Ensure the events system works after mount into server markup + expect(numClicks).toEqual(0); + instance.refs.span.click(); + expect(numClicks).toEqual(1); + + ReactDOM.unmountComponentAtNode(element); + expect(element.innerHTML).toEqual(''); + + // Now simulate a situation where the app is not idempotent. React should + // warn but do the right thing. + element.innerHTML = lastMarkup; + expect(() => { + instance = ReactDOM.hydrate(, element); + }).toWarnDev('Text content did not match. Server: "x" Client: "y"'); + expect(mountCount).toEqual(4); + expect(element.innerHTML.length > 0).toBe(true); + expect(element.innerHTML).not.toEqual(lastMarkup); + + // Ensure the events system works after markup mismatch. + expect(numClicks).toEqual(1); + instance.refs.span.click(); + expect(numClicks).toEqual(2); + } finally { + document.body.removeChild(element); + } }); // We have a polyfill for autoFocus on the client, but we intentionally don't diff --git a/packages/react-dom/src/__tests__/ReactTestUtils-test.js b/packages/react-dom/src/__tests__/ReactTestUtils-test.js index 328eefe0b2dc..83437133b6a6 100644 --- a/packages/react-dom/src/__tests__/ReactTestUtils-test.js +++ b/packages/react-dom/src/__tests__/ReactTestUtils-test.js @@ -280,12 +280,11 @@ describe('ReactTestUtils', () => { }; spyOnDevAndProd(obj, 'handler').and.callThrough(); const container = document.createElement('div'); - const instance = ReactDOM.render( + const node = ReactDOM.render( , container, ); - const node = ReactDOM.findDOMNode(instance); node.value = 'giraffe'; ReactTestUtils.Simulate.change(node); @@ -321,7 +320,7 @@ describe('ReactTestUtils', () => { container, ); - const node = ReactDOM.findDOMNode(instance.refs.input); + const node = instance.refs.input; node.value = 'zebra'; ReactTestUtils.Simulate.change(node); diff --git a/packages/react-dom/src/__tests__/refs-test.js b/packages/react-dom/src/__tests__/refs-test.js index f439118cd75e..6ca2c981f6ad 100644 --- a/packages/react-dom/src/__tests__/refs-test.js +++ b/packages/react-dom/src/__tests__/refs-test.js @@ -10,6 +10,7 @@ 'use strict'; let React = require('react'); +let ReactDOM = require('react-dom'); let ReactTestUtils = require('react-dom/test-utils'); /** @@ -81,24 +82,6 @@ class TestRefsComponent extends React.Component { } } -/** - * Render a TestRefsComponent and ensure that the main refs are wired up. - */ -const renderTestRefsComponent = function() { - const testRefsComponent = ReactTestUtils.renderIntoDocument( - , - ); - expect(testRefsComponent instanceof TestRefsComponent).toBe(true); - - const generalContainer = testRefsComponent.refs.myContainer; - expect(generalContainer instanceof GeneralContainerComponent).toBe(true); - - const counter = testRefsComponent.refs.myCounter; - expect(counter instanceof ClickCounter).toBe(true); - - return testRefsComponent; -}; - const expectClickLogsLengthToBe = function(instance, length) { const clickLogs = ReactTestUtils.scryRenderedDOMComponentsWithClass( instance, @@ -109,12 +92,40 @@ const expectClickLogsLengthToBe = function(instance, length) { }; describe('reactiverefs', () => { + let container; + beforeEach(() => { jest.resetModules(); React = require('react'); + ReactDOM = require('react-dom'); ReactTestUtils = require('react-dom/test-utils'); }); + afterEach(() => { + if (container) { + document.body.removeChild(container); + container = null; + } + }); + + /** + * Render a TestRefsComponent and ensure that the main refs are wired up. + */ + const renderTestRefsComponent = function() { + container = document.createElement('div'); + document.body.appendChild(container); + const testRefsComponent = ReactDOM.render(, container); + expect(testRefsComponent instanceof TestRefsComponent).toBe(true); + + const generalContainer = testRefsComponent.refs.myContainer; + expect(generalContainer instanceof GeneralContainerComponent).toBe(true); + + const counter = testRefsComponent.refs.myCounter; + expect(counter instanceof ClickCounter).toBe(true); + + return testRefsComponent; + }; + /** * Ensure that for every click log there is a corresponding ref (from the * perspective of the injected ClickCounter component. @@ -129,18 +140,18 @@ describe('reactiverefs', () => { expectClickLogsLengthToBe(testRefsComponent, 1); // After clicking the reset, there should still only be one click log ref. - ReactTestUtils.Simulate.click(testRefsComponent.refs.resetDiv); + testRefsComponent.refs.resetDiv.click(); expectClickLogsLengthToBe(testRefsComponent, 1); // Begin incrementing clicks (and therefore refs). - ReactTestUtils.Simulate.click(clickIncrementer); + clickIncrementer.click(); expectClickLogsLengthToBe(testRefsComponent, 2); - ReactTestUtils.Simulate.click(clickIncrementer); + clickIncrementer.click(); expectClickLogsLengthToBe(testRefsComponent, 3); // Now reset again - ReactTestUtils.Simulate.click(testRefsComponent.refs.resetDiv); + testRefsComponent.refs.resetDiv.click(); expectClickLogsLengthToBe(testRefsComponent, 1); }); }); @@ -168,6 +179,7 @@ describe('ref swapping', () => { beforeEach(() => { jest.resetModules(); React = require('react'); + ReactDOM = require('react-dom'); ReactTestUtils = require('react-dom/test-utils'); RefHopsAround = class extends React.Component { @@ -293,7 +305,6 @@ describe('ref swapping', () => { describe('root level refs', () => { it('attaches and detaches root refs', () => { - const ReactDOM = require('react-dom'); let inst = null; // host node diff --git a/packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.internal.js b/packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.internal.js index 4020e69fd0ca..2d264fc4ea00 100644 --- a/packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.internal.js +++ b/packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.internal.js @@ -12,23 +12,25 @@ describe('SimpleEventPlugin', function() { let React; let ReactDOM; - let ReactTestUtils; let ReactFeatureFlags; let onClick; + let container; function expectClickThru(element) { - ReactTestUtils.SimulateNative.click(ReactDOM.findDOMNode(element)); + element.click(); expect(onClick).toHaveBeenCalledTimes(1); } function expectNoClickThru(element) { - ReactTestUtils.SimulateNative.click(ReactDOM.findDOMNode(element)); + element.click(); expect(onClick).toHaveBeenCalledTimes(0); } function mounted(element) { - element = ReactTestUtils.renderIntoDocument(element); + container = document.createElement('div'); + document.body.appendChild(container); + element = ReactDOM.render(element, container); return element; } @@ -60,75 +62,80 @@ describe('SimpleEventPlugin', function() { jest.resetModules(); React = require('react'); ReactDOM = require('react-dom'); - ReactTestUtils = require('react-dom/test-utils'); onClick = jest.fn(); }); + afterEach(() => { + if (container && document.body.contains(container)) { + document.body.removeChild(container); + container = null; + } + }); + it('A non-interactive tags click when disabled', function() { const element =
; expectClickThru(mounted(element)); }); it('A non-interactive tags clicks bubble when disabled', function() { - const element = ReactTestUtils.renderIntoDocument( + const element = mounted(
, ); - const child = ReactDOM.findDOMNode(element).firstChild; - - ReactTestUtils.SimulateNative.click(child); + const child = element.firstChild; + child.click(); expect(onClick).toHaveBeenCalledTimes(1); }); it('does not register a click when clicking a child of a disabled element', function() { - const element = ReactTestUtils.renderIntoDocument( + const element = mounted( , ); - const child = ReactDOM.findDOMNode(element).querySelector('span'); + const child = element.querySelector('span'); - ReactTestUtils.SimulateNative.click(child); + child.click(); expect(onClick).toHaveBeenCalledTimes(0); }); it('triggers click events for children of disabled elements', function() { - const element = ReactTestUtils.renderIntoDocument( + const element = mounted( , ); - const child = ReactDOM.findDOMNode(element).querySelector('span'); + const child = element.querySelector('span'); - ReactTestUtils.SimulateNative.click(child); + child.click(); expect(onClick).toHaveBeenCalledTimes(1); }); it('triggers parent captured click events when target is a child of a disabled elements', function() { - const element = ReactTestUtils.renderIntoDocument( + const element = mounted(
, ); - const child = ReactDOM.findDOMNode(element).querySelector('span'); + const child = element.querySelector('span'); - ReactTestUtils.SimulateNative.click(child); + child.click(); expect(onClick).toHaveBeenCalledTimes(1); }); it('triggers captured click events for children of disabled elements', function() { - const element = ReactTestUtils.renderIntoDocument( + const element = mounted( , ); - const child = ReactDOM.findDOMNode(element).querySelector('span'); + const child = element.querySelector('span'); - ReactTestUtils.SimulateNative.click(child); + child.click(); expect(onClick).toHaveBeenCalledTimes(1); }); @@ -152,7 +159,8 @@ describe('SimpleEventPlugin', function() { }); it('should forward clicks when it becomes not disabled', () => { - const container = document.createElement('div'); + container = document.createElement('div'); + document.body.appendChild(container); let element = ReactDOM.render( React.createElement(tagName, {onClick: onClick, disabled: true}), container, @@ -165,7 +173,8 @@ describe('SimpleEventPlugin', function() { }); it('should not forward clicks when it becomes disabled', () => { - const container = document.createElement('div'); + container = document.createElement('div'); + document.body.appendChild(container); let element = ReactDOM.render( React.createElement(tagName, {onClick: onClick}), container, @@ -178,7 +187,8 @@ describe('SimpleEventPlugin', function() { }); it('should work correctly if the listener is changed', () => { - const container = document.createElement('div'); + container = document.createElement('div'); + document.body.appendChild(container); let element = ReactDOM.render( React.createElement(tagName, {onClick: onClick, disabled: true}), container, @@ -193,7 +203,7 @@ describe('SimpleEventPlugin', function() { }); it('batches updates that occur as a result of a nested event dispatch', () => { - const container = document.createElement('div'); + container = document.createElement('div'); document.body.appendChild(container); let ops = []; @@ -251,7 +261,7 @@ describe('SimpleEventPlugin', function() { }); it('flushes pending interactive work before extracting event handler', () => { - const container = document.createElement('div'); + container = document.createElement('div'); const root = ReactDOM.unstable_createRoot(container); document.body.appendChild(container); @@ -331,7 +341,7 @@ describe('SimpleEventPlugin', function() { }); it('end result of many interactive updates is deterministic', () => { - const container = document.createElement('div'); + container = document.createElement('div'); const root = ReactDOM.unstable_createRoot(container); document.body.appendChild(container); @@ -386,7 +396,7 @@ describe('SimpleEventPlugin', function() { }); it('flushes lowest pending interactive priority', () => { - const container = document.createElement('div'); + container = document.createElement('div'); document.body.appendChild(container); let button; @@ -459,7 +469,7 @@ describe('SimpleEventPlugin', function() { // See http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html it('does not add a local click to interactive elements', function() { - const container = document.createElement('div'); + container = document.createElement('div'); ReactDOM.render(