Unmount / destroy Component in jsdom test

javascript reactjs jsdom
treznik picture treznik · May 31, 2014 · Viewed 19.5k times · Source

Is there a way to unmount and garbage collect a React Component that was mounted using TestUtils.renderIntoDocument inside a jsdom test?

I'm trying to test something that happens on componentWillUnmount and TestUtils.renderIntoDocument doesn't return any DOM node to call React. unmountComponentAtNode on.

Answer

Sophie Alpert picture Sophie Alpert · May 31, 2014

No, but you can simply use ReactDOM.render manually:

var container = document.createElement('div');
ReactDOM.render(<Component />, container);
// ...
ReactDOM.unmountComponentAtNode(container);

This is exactly what ReactTestUtils does anyway, so there's no reason not to do it this way if you need a reference to the container.

Related questions

Simulating click on document ReactJS/JSDom

So I am writing some tests for code that adds a click event on the document. I am using JSDom, ReactJS, and Mocha/Chai setup. I have tried the following code in a test: document.addEventListener('click', function() { console.log(…

Read More
React + enzyme unit tests, can't access window.addEventListener

I have some unit tests set up, testing with enzyme's shallow method with a jsdom configuration. This has been working well until I have run into a component where I am using window.addEventListener. The unit tests is now giving …

Read More
Loop inside React JSX

I'm trying to do something like the following in React JSX (where ObjectRow is a separate component): <tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody> I realize and understand why this isn't …

Read More