Enzyme: get root DOM node


Given the React component:

class Component extends React.Component {
  render() {
    return <div>text</div>;
  }
}

Is it possible to get the root DOM node with enzyme?

Ever since 2.7.0, you can do it with getDOMNode:

import { mount } from 'enzyme';

const wrapper = mount(<Component />);
const node = wrapper.getDOMNode();

// now you can access node properties
console.log(node.innerText); // 'text'

But getDOMNode doesn’t work for functional components:

function FunctionalComponent() {
  return <div>text</div>;
}

const wrapper = mount(<FunctionalComponent />);
wrapper.getDOMNode(); // throws an error

You’ll need to use findDOMNode on the wrapper’s node:

import { findDOMNode } from 'react-dom';

const wrapper = mount(<FunctionalComponent />);
const node = findDOMNode(wrapper.node);

// works
console.log(node.innerHTML); // 'text'


Please support this site and join our Discord!