在jsdom测试中卸载/销毁组件

Question

有没有办法在jsdom测试中卸载和垃圾收集使用TestUtils.renderIntoDocument挂载的React组件？

我试图测试componentWillUnmount上发生的事情，TestUtils.renderIntoDocument并没有返回任何DOM节点来调用React. unmountComponentAtNode。

Answer 1

不，但您只需手动使用ReactDOM.render：

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

这正是what ReactTestUtils does anyway，所以如果你需要对容器的引用，没有理由不这样做。

Answer 2

直接调用componentWillUnmount对于需要在卸载时清理内容的任何子项都不起作用。而且您也不需要复制renderIntoDocument方法，因为您只能使用parentNode：

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

更新：从React 15开始，您需要使用ReactDOM来实现相同的目标：

import ReactDOM from 'react-dom';
// ...
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(component).parentNode);

Answer 3

更新@BenAlpert答案。 React.renderComponent将很快被弃用，因此您应该使用ReactDOM方法：

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

Answer 4

测试完成后，您可以手动调用组件上的componentWillUnmount（）。

beforeEach ->
  @myComponent = React.addons.TestUtils.renderIntoDocument <MyComponent/>

afterEach ->
  @myComponent.componentWillUnmount()

Answer 5

偶然发现了这个问题，我想提供一种方法，使用描述的renderIntoDocument API直接解决它。此解决方案适用于PhantomJS。

要安装到文档节点：

theComponent = TestUtils.renderIntoDocument(<MyComponent/>);

从文档节点卸载：

React.unmountComponentAtNode(document);