javascript 在 jsdom 测试中卸载/销毁组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23973942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unmount / destroy Component in jsdom test
提问by treznik
Is there a way to unmount and garbage collect a React Component that was mounted using TestUtils.renderIntoDocumentinside a jsdom test?
有没有办法卸载和垃圾收集TestUtils.renderIntoDocument在 jsdom 测试中使用的 React 组件？
I'm trying to test something that happens on componentWillUnmountand TestUtils.renderIntoDocumentdoesn't return any DOM node to call React. unmountComponentAtNodeon.
我正在尝试测试发生的事情componentWillUnmount并且TestUtils.renderIntoDocument不返回任何要调用的 DOM 节点React. unmountComponentAtNode。
回答by Sophie Alpert
No, but you can simply use ReactDOM.rendermanually:
不，但您可以简单地ReactDOM.render手动使用：
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.
这正是ReactTestUtils 所做的，所以如果您需要对容器的引用，没有理由不这样做。
回答by Chris
Calling componentWillUnmountdirectly won't work for any children that need to clean up things on unmount. And you also don't really need to replicate the renderIntoDocumentmethod, either since you can just use parentNode:
componentWillUnmount对于需要在卸载时清理东西的任何孩子，直接调用将不起作用。而且您也不需要复制该renderIntoDocument方法，因为您可以只使用parentNode：
React.unmountComponentAtNode(React.findDOMNode(component).parentNode);
Update: as of React 15 you need to use ReactDOMto achieve the same:
更新：从 React 15 开始，您需要使用它ReactDOM来实现相同的目标：
import ReactDOM from 'react-dom';
// ...
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(component).parentNode);
回答by carlesba
Just to update @BenAlpert answer. React.renderComponent will be deprecated soon so you should use ReactDOM methods instead:
只是为了更新@BenAlpert 的答案。React.renderComponent 很快就会被弃用，所以你应该改用 ReactDOM 方法：
var container = document.createElement('div');
ReactDOM.render(<Component />, container);
// ...
ReactDOM.unmountComponentAtNode(container);
回答by MST
Just stumbled across this question, figure I would provide a way to directly tackle it using the described renderIntoDocument API. This solution works in the context of PhantomJS.
刚刚偶然发现了这个问题，图我将提供一种使用所描述的 renderIntoDocument API 直接解决它的方法。此解决方案适用于 PhantomJS 的上下文。
To mount onto the document node:
挂载到文档节点：
theComponent = TestUtils.renderIntoDocument(<MyComponent/>);
To unmount from the document node:
从文档节点卸载：
React.unmountComponentAtNode(document);
回答by Jeff
After your test you can call componentWillUnmount() on the component manually.
测试后，您可以手动调用组件上的 componentWillUnmount()。
beforeEach ->
@myComponent = React.addons.TestUtils.renderIntoDocument <MyComponent/>
afterEach ->
@myComponent.componentWillUnmount()
