reactjs / reactjs/react.dev

Improve/create documentation for ReactTestUtils.renderIntoDocument()

Open
#28 3 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

difficulty: beginner good first issue type: documentation
Dominant language
JavaScript
Stars
11.8k
Forks
7.9k
Avg merge
1d 11h
Merged PRs (30d)
11

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Test Utils documentation for renderIntoDocument() and review the related unmountComponentAtNode() entry point. Document how the detached DOM tree and component instance are cleaned up, where the container comes from, how additional trees are handled, and how tests can verify cleanup.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
documentation
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.