diff --git a/docs/api/ReactWrapper/getDOMNode.md b/docs/api/ReactWrapper/getDOMNode.md new file mode 100644 index 000000000..3b56f007f --- /dev/null +++ b/docs/api/ReactWrapper/getDOMNode.md @@ -0,0 +1,21 @@ +# `.getDOMNode() => DOMComponent` + +Returns the outer most DOMComponent of the current wrapper. + +Notes: +- can only be called on a wrapper of a single node. +- will raise if called on a wrapper of a stateless functional component. + + +#### Returns + +`DOMComponent`: The retrieved DOM component. + + + +#### Examples + +```jsx +const wrapper = mount(); +expect(wrapper.getDOMNode()).to.have.property("className"); +``` diff --git a/docs/api/mount.md b/docs/api/mount.md index afcc8c9b6..c2ff8cf00 100644 --- a/docs/api/mount.md +++ b/docs/api/mount.md @@ -122,6 +122,9 @@ Returns a static HTML rendering of the current node. #### [`.get(index) => ReactElement`](ReactWrapper/get.md) Returns the node at the provided index of the current wrapper. +#### [`.getDOMNode() => DOMComponent`](ReactWrapper/getDOMNode.md) +Returns the outer most DOMComponent of the current wrapper. + #### [`.at(index) => ReactWrapper`](ReactWrapper/at.md) Returns a wrapper of the node at the provided index of the current wrapper. diff --git a/src/ReactWrapper.jsx b/src/ReactWrapper.jsx index f47323d29..75bb8abe0 100644 --- a/src/ReactWrapper.jsx +++ b/src/ReactWrapper.jsx @@ -29,6 +29,7 @@ import { typeOfNode, displayNameOfNode, ITERATOR_SYMBOL, + isFunctionalComponent, } from './Utils'; import { debugInsts, @@ -130,6 +131,23 @@ class ReactWrapper { return this.nodes; } + /** + * Returns the outer most DOMComponent of the current wrapper. + * + * NOTE: can only be called on a wrapper of a single node. + * + * @returns {DOMComponent} + */ + getDOMNode() { + return this.single('getDOMNode', (n) => { + if (isFunctionalComponent(n)) { + throw new TypeError('Method “getDOMNode” cannot be used on functional components.'); + } + + return findDOMNode(n); + }); + } + /** * If the root component contained a ref, you can access it here * and get a wrapper around it. diff --git a/test/ReactWrapper-spec.jsx b/test/ReactWrapper-spec.jsx index 45c8f3460..0f94b23fc 100644 --- a/test/ReactWrapper-spec.jsx +++ b/test/ReactWrapper-spec.jsx @@ -3267,6 +3267,45 @@ describeWithDOM('mount', () => { }); }); + describe('.getDOMNode', () => { + class Test extends React.Component { + render() { + return ( +
+
+ + +
+
+ ); + } + } + + it('should return the outer most DOMComponent of the root wrapper', () => { + const wrapper = mount(); + expect(wrapper.getDOMNode()).to.have.property('className', 'outer'); + }); + + it('should return the outer most DOMComponent of the inner div wrapper', () => { + const wrapper = mount(); + expect(wrapper.find('.inner').getDOMNode()).to.have.property('className', 'inner'); + }); + + it('should throw when wrapping multiple elements', () => { + const wrapper = mount().find('span'); + expect(() => wrapper.getDOMNode()).to.throw(Error); + }); + + describeIf(!REACT013, 'stateless components', () => { + const SFC = () => (
); + + it('should throw when wrapping an SFC', () => { + const wrapper = mount(); + expect(() => wrapper.getDOMNode()).to.throw(TypeError, 'Method “getDOMNode” cannot be used on functional components.'); + }); + }); + }); + describe('#single()', () => { it('throws if run on multiple nodes', () => { const wrapper = mount(
).children();