reactjs / reactjs/react.dev

Improve/create documentation for ReactTestUtils.renderIntoDocument()

オープン
#28 コメント 3 件 リアクション 4 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

difficulty: beginner good first issue type: documentation
主要言語
JavaScript
スター
11.8k
フォーク
7.9k
平均マージ
1日 11時間
マージ済み PR(30日)
11

説明

This issue was originally reported by @the-spyke via facebook/react/issues/10330

There is almost none documentation about how to actually use .renderIntoDocument() method. I can't find find answers on those questions on Jest's website or enzyme's (I know that it's not Facebook) either.

  • If I render a component into a DOM in a test, how will it be destroyed?
  • Should I clean up by myself?
  • What tools to use for this?
  • Just .unmountComponentAtNode()?
  • Where I will get the container to pass in?
  • What about additional component trees like in Popovers?
  • What are the best ways to test that there aren't any parts left after my component were unmounted?

It will be nice to see such information before people will met memory leaks in their tests, and also help to establish good practices for writing tests.

Additional notes:

  • Calling .renderIntoDocument() returns you an instance
  • This instance was rendered into freshly created DOM element, which now represents a detached tree
  • There's also a reference to the instance in ReactDOM's internal map
  • So, even if you remove all your references to this instance, on every call to .renderIntoDocument() you will get 1 detached tree hanging in memory + 1 instance of a React component with all its props not available for garbage collection

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

リンクされている renderIntoDocument() の Test Utils ドキュメントから始め、関連するエントリポイント unmountComponentAtNode() を確認してください。分離された DOM ツリーとコンポーネントインスタンスがどのようにクリーンアップされるか、コンテナがどこから取得されるか、追加のツリーがどのように処理されるか、そしてテストでクリーンアップをどのように検証できるかを文書化してください。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript, react
領域
documentation
issue の種類
ドキュメント
難易度
3/5
見積もり時間
1〜2日
活発さ
静か
明瞭さ
おおむね明確
初心者へのやさしさ
42/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。