React 13.3 unmountComponentAtNode() 错误：目标容器不是 DOM 元素

Posted 2023-02-24

【中文标题】React 13.3 unmountComponentAtNode() 错误：目标容器不是 DOM 元素

【英文标题】：React 13.3 unmountComponentAtNode() Error: Target container is not a DOM element

【发布时间】：2015-09-14 09:43:05

【问题描述】：

当我从 React 12.2 升级到 React 13.3 时，我的测试套件中出现以下错误：

错误：不变量违反：unmountComponentAtNode(...): Target 容器不是 DOM 元素。

我正在使用 this blog post 使用 Jasmine 测试我的代码。错误出现在这段代码中：

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/>);
  );
);

我知道 getDOMNode() 已弃用，但这不是导致错误的原因。

当我检查 instance.getDOMNode() 时，它会返回给定的实例，但是当它出错时，instance.getDOMNode().parent 是未定义的。在这个未定义的变量上调用 React.unmountComponentAtNode 会导致错误。

this one 之类的答案表明存在某种竞争条件，但我不确定这将如何应用于我的测试套件。感谢您的帮助！

【参考方案1】：

解决办法是改变：

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

到：

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

或者，如果您要从 getDOMNode() 移动到 findDOMNode()：

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