web-dev-qa-db-ja.com

jsdomテストでコンポーネントをアンマウント/破棄します

Jsdomテスト内でTestUtils.renderIntoDocumentを使用してマウントされたReactコンポーネントをアンマウントしてガベージコレクションする方法はありますか？

componentWillUnmountで発生する問題をテストしようとしていますが、TestUtils.renderIntoDocumentがReact. unmountComponentAtNodeを呼び出すDOMノードを返しません。

javascriptreactjsjsdom
21
treznik

いいえ、ただしReactDOM.render手動：

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

これは正確に とにかくReactTestUtilsが行うこと なので、コンテナーへの参照が必要な場合に、この方法を行わない理由はありません。

29
Sophie Alpert

componentWillUnmountを直接呼び出すことは、マウント解除の際にクリーンアップする必要がある子には機能しません。また、renderIntoDocumentだけを使用できるため、parentNodeメソッドを実際に複製する必要もありません。

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

更新：React 15現在、ReactDOMを使用して同じことを行う必要があります：

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

@BenAlpertの回答を更新するだけです。 React.renderComponentはまもなく廃止されるため、代わりにReactDOMメソッドを使用する必要があります。

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

この質問に遭遇したばかりですが、図で説明されているrenderIntoDocument APIを使用して直接取り組む方法を提供します。このソリューションは、PhantomJSのコンテキストで機能します。

ドキュメントノードにマウントするには：

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

ドキュメントノードからマウント解除するには：

React.unmountComponentAtNode(document);
0
MST

テスト後、コンポーネントのcomponentWillUnmount（）を手動で呼び出すことができます。

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

afterEach ->
  @myComponent.componentWillUnmount()
0
Jeff