React 13.3 unmountComponentAtNode() Error: Target container is not a DOM element

Question

I'm getting the following error in my testing suite when I upgrade from React 12.2 to React 13.3:

Error: Invariant Violation: unmountComponentAtNode(...): Target container is not a DOM element.

I'm using this blog post to test my code using Jasmine. The error occurs in this code:

describe("A component", function() {

  var instance;
  var container = document.createElement("div");

  afterEach(function() {
    if (instance && instance.isMounted()) {
      // Only components with a parent will be unmounted
      React.unmountComponentAtNode(instance.getDOMNode().parent);
    }
  });
  ...rest of test suite...
  // the instances of renderIntoDocument that cause the failure look like the below
  it("Causes my test suite to fail.", function() {
    instance = TestUtils.renderIntoDocument(<MyReactElement/>);
  });
)};

I know that getDOMNode() is deprecated but that's not what's causing the error.

When I inspect the instance.getDOMNode() it returns the given instance, but when it errors out, the instance.getDOMNode().parent is undefined. Calling React.unmountComponentAtNode on this undefined variable is causing the error.

Answers like this one suggest that there's some kind of race condition going on but I'm not sure how that would apply to my testing suite. Thanks for any help!

Answer 1

The fix is to change:

React.unmountComponentAtNode(instance.getDOMNode().parent);

to:

React.unmountComponentAtNode(instance.getDOMNode().parentNode);

Or, if you're moving from getDOMNode() to findDOMNode():

React.unmountComponentAtNode(React.findDOMNode(instance).parentNode);