Skip to content

Commit

Permalink
implement ReactWrapper#getDOMNode
Browse files Browse the repository at this point in the history
  • Loading branch information
christian-schulze committed Nov 16, 2016
1 parent 88853ab commit 27db1b0
Show file tree
Hide file tree
Showing 4 changed files with 81 additions and 0 deletions.
21 changes: 21 additions & 0 deletions docs/api/ReactWrapper/getDOMNode.md
Original file line number Diff line number Diff line change
@@ -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(<MyComponent />);
expect(wrapper.getDOMNode()).to.have.property("className");
```
3 changes: 3 additions & 0 deletions docs/api/mount.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
18 changes: 18 additions & 0 deletions src/ReactWrapper.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
typeOfNode,
displayNameOfNode,
ITERATOR_SYMBOL,
isFunctionalComponent,
} from './Utils';
import {
debugInsts,
Expand Down Expand Up @@ -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.
Expand Down
39 changes: 39 additions & 0 deletions test/ReactWrapper-spec.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3267,6 +3267,45 @@ describeWithDOM('mount', () => {
});
});

describe('.getDOMNode', () => {
class Test extends React.Component {
render() {
return (
<div className="outer">
<div className="inner">
<span />
<span />
</div>
</div>
);
}
}

it('should return the outer most DOMComponent of the root wrapper', () => {
const wrapper = mount(<Test />);
expect(wrapper.getDOMNode()).to.have.property('className', 'outer');
});

it('should return the outer most DOMComponent of the inner div wrapper', () => {
const wrapper = mount(<Test />);
expect(wrapper.find('.inner').getDOMNode()).to.have.property('className', 'inner');
});

it('should throw when wrapping multiple elements', () => {
const wrapper = mount(<Test />).find('span');
expect(() => wrapper.getDOMNode()).to.throw(Error);
});

describeIf(!REACT013, 'stateless components', () => {
const SFC = () => (<div />);

it('should throw when wrapping an SFC', () => {
const wrapper = mount(<SFC />);
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(<div><i /><i /></div>).children();
Expand Down

0 comments on commit 27db1b0

Please sign in to comment.