Get innerHTML of Enzyme wrapper


In Enzyme, wrapper’s have a handle .html() method that will return the outerHTML for that element in the tree. It’s handy in the rare instance when the markup that your code outputs needs to be precise. You can read more about in the documentation.

However, there isn’t a method that returns the innerHTML. A use case I came across for this was caring about the children of an element, but not caring about the element itself. I didn’t want this test to fail if I needed to add an attribute to the parent element, only if the children changed.

So I wrote this little helper function to grab the innerHTML of a shallow wrapper in Enzyme:

function getInnerHTML(node) {
return node.children().reduce((string, node) => {
// A text node's html method doesn't return
// anything, so we use text instead.
return string + node.html() || node.text()
}, '')
}

There might be other strategies using some of Enzyme’s built-in methods like .reduce() or .forEach(), so let me know if you come up with a better alternative.

Happy testing!

1 Samuel 16:7 (SDG)

About the author

My name is Sean McPherson, and I am a software engineer interesed in all areas of front-end development. Here I write articles about programming for developers of all levels, and occassionally other topics.

Currently I work for Niche.com and live with my lovely family in Pittsburgh, PA.