/** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * * @emails react-core */ 'use strict'; const React = require('react'); const ReactDOM = require('react-dom'); const ReactTestUtils = require('react-dom/test-utils'); const StrictMode = React.StrictMode; describe('findDOMNode', () => { it('findDOMNode should return null if passed null', () => { expect(ReactDOM.findDOMNode(null)).toBe(null); }); it('findDOMNode should find dom element', () => { class MyNode extends React.Component { render() { return (
Noise
); } } const myNode = ReactTestUtils.renderIntoDocument(); const myDiv = ReactDOM.findDOMNode(myNode); const mySameDiv = ReactDOM.findDOMNode(myDiv); expect(myDiv.tagName).toBe('DIV'); expect(mySameDiv).toBe(myDiv); }); it('findDOMNode should find dom element after an update from null', () => { function Bar({flag}) { if (flag) { return A; } return null; } class MyNode extends React.Component { render() { return ; } } const container = document.createElement('div'); const myNodeA = ReactDOM.render(, container); const a = ReactDOM.findDOMNode(myNodeA); expect(a).toBe(null); const myNodeB = ReactDOM.render(, container); expect(myNodeA === myNodeB).toBe(true); const b = ReactDOM.findDOMNode(myNodeB); expect(b.tagName).toBe('SPAN'); }); it('findDOMNode should reject random objects', () => { expect(function() { ReactDOM.findDOMNode({foo: 'bar'}); }).toThrowError('Argument appears to not be a ReactComponent. Keys: foo'); }); it('findDOMNode should reject unmounted objects with render func', () => { class Foo extends React.Component { render() { return
; } } const container = document.createElement('div'); const inst = ReactDOM.render(, container); ReactDOM.unmountComponentAtNode(container); expect(() => ReactDOM.findDOMNode(inst)).toThrowError( 'Unable to find node on an unmounted component.', ); }); it('findDOMNode should not throw an error when called within a component that is not mounted', () => { class Bar extends React.Component { UNSAFE_componentWillMount() { expect(ReactDOM.findDOMNode(this)).toBeNull(); } render() { return
; } } expect(() => ReactTestUtils.renderIntoDocument()).not.toThrow(); }); it('findDOMNode should warn if used to find a host component inside StrictMode', () => { let parent = undefined; let child = undefined; class ContainsStrictModeChild extends React.Component { render() { return (
(child = n)} /> ); } } ReactTestUtils.renderIntoDocument( (parent = n)} />, ); let match; expect(() => (match = ReactDOM.findDOMNode(parent))).toWarnDev([ 'Warning: findDOMNode is deprecated in StrictMode. ' + 'findDOMNode was passed an instance of ContainsStrictModeChild which renders StrictMode children. ' + 'Instead, add a ref directly to the element you want to reference.' + '\n' + '\n in div (at **)' + '\n in StrictMode (at **)' + '\n in ContainsStrictModeChild (at **)' + '\n' + '\nLearn more about using refs safely here:' + '\nhttps://fb.me/react-strict-mode-find-node', ]); expect(match).toBe(child); }); it('findDOMNode should warn if passed a component that is inside StrictMode', () => { let parent = undefined; let child = undefined; class IsInStrictMode extends React.Component { render() { return
(child = n)} />; } } ReactTestUtils.renderIntoDocument( (parent = n)} /> , ); let match; expect(() => (match = ReactDOM.findDOMNode(parent))).toWarnDev([ 'Warning: findDOMNode is deprecated in StrictMode. ' + 'findDOMNode was passed an instance of IsInStrictMode which is inside StrictMode. ' + 'Instead, add a ref directly to the element you want to reference.' + '\n' + '\n in div (at **)' + '\n in IsInStrictMode (at **)' + '\n in StrictMode (at **)' + '\n' + '\nLearn more about using refs safely here:' + '\nhttps://fb.me/react-strict-mode-find-node', ]); expect(match).toBe(child); }); });