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

IT技术 javascript reactjs jsdom
2021-05-13 14:40:38

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

我正在尝试测试发生的事情componentWillUnmount并且TestUtils.renderIntoDocument不返回任何要调用的 DOM 节点React. unmountComponentAtNode

4个回答

不,但您可以简单地ReactDOM.render手动使用

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

这正是ReactTestUtils 所做的,所以如果您需要对容器的引用,没有理由不这样做。

componentWillUnmount对于需要在卸载时清理东西的任何孩子,直接调用将不起作用。而且您也不需要复制该renderIntoDocument方法,因为您可以只使用parentNode

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

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

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

只是为了更新@BenAlpert 的答案。React.renderComponent 很快就会被弃用,所以你应该改用 ReactDOM 方法:

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

测试后,您可以手动调用组件上的 componentWillUnmount()。

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

afterEach ->
  @myComponent.componentWillUnmount()