react-render-hook uses the React-devtools hook to watch for rendering React components,
and provide an interface to get to the virtual DOM tree and find rendered elements and get the metadata about them.
This is meant to be used from libraries that need access to the whole virtual DOM tree, such as testing/assertion libraries.
It is used from unexpected-react as a plugin for unexpected to allow assertions over the DOM tree. This package is extracted as a separate package, to allow for other implementations for other assertion libraries.
This package uses React-devtools as a git submodule, such that it can keep up-to-date with it. However,
only a small part of the devtools is actually used (specifically, the
backend directory), so it is not anticipated that there will be many updates to this.
As React only checks for the global devtools hook when it is first 'required',
react-render-hook must be included before
react is included.
You can validate that this is the case by checking the
This is set to true when React attaches to the devtools. This should happen immediately after
var RenderHook = require('react-render-hook'); assert(RenderHook.isAttached === false); var React = require('react'); assert(RenderHook.isAttached === true);
react is often required as part of components etc, it is recommended to check this property
before calling the other APIs, such that a useful error message can be given to the user.
devtools representation of the
component is the value returned from
React.render(), or any
valid instance from the children (e.g.
devtools representation currently has the following properties (this is currently more-or-less worked out via guess work,
improvements / links to better documentation greatly appreciated)
element- the element instance
data- metadata about the instance. Contains the following important properties **
nodeType- the type of node, either
'NativeWrapper'exists too, but that is skipped over and the
'Native'child is returned) **
type- the type of the element. This corresponds to the
React.Componentthat created the element, or is a string value of the native node. **
name- tag name of the node **
props- props passed to the render method
Returns an array of the
devtools representation of the
component's rendered children. Note that this is not the children passed in to the
render method as the
children prop, rather the result of the render method of the given component. The
component parameter can be either a
component instance (like that returned from
React.render()) or an
devtools representation of the element, such as that returned from the
react-render-hook maintains an index of mounted components. In a testing scenario, it may be helpful to occassionally clear this index out, as there can be
no way for
react-render-hook to know that the test is completed and the data can be thrown away. Memory will continue to be used whenever React renders a
Contributions are very welcome. This project was made without really any knowledge of the devtools internals, so it is not unlikely that some things are sub-optimal, not best practice, or just plain wrong. The tests show that the rendered content is caught and located by the API.