Expose a way of creating a ReactTestInstance for React DOM nodes

[petegleeson]

Do you want to request a feature or report a bug?
I would like to request a new feature.

What is the current behavior?
At the moment there is no way to create an instance of a ReactTestInstance. I would love to be able to do something like:

const div = document.createElement('div');
const componentRef = ReactDOM.render(<MyComponentUnderTest />, div); // or renderIntoDocument
const testInstance = new ReactTestInstance(componentRef);
// now I can run queries using the API of ReactTestInstance
// against a component tree that has been fully DOM rendered
testInstance.findAll(..)
testInstance.children.forEach(() => {});
testInstance.parent

Why?
Libraries such as Enzyme can be used to test React components by full DOM rendering and providing an API to find components and get information about them.

As far as I know, there is no way of querying the component tree created by ReactDOM.render without relying on the internals of React nodes. This means that Enzyme, in order to support full DOM rendering and it's querying API, it has to interact with React nodes directly. This reliance causes problems in Enzyme whenever React adds a new node type (forwardRef, ContextProvider/Consumer for example).

I have started this RFC that proposes that Enzyme uses ReactTestWrapper from react-test-renderer as a layer on top of React node objects. This allows the library to be decoupled from the internals of React. The solution proposed in the RFC relies on the being able to create a ReactTestInstance from a ReactDOM.render component tree.

Please let me know if this is something you would consider 😄

[gaearon]

Somewhat related to #9505 (and discussion there is also relevant).

[petegleeson]

Related to @sebmarkbage comment #9505 (comment) - an alternative might be to export something from react-dom that allows plugging in a custom reconciler to the ReactDOM renderer. If this was possible, someone could create a wrapper of the DOM reconciler that maintains an idea of the component tree as well as passing through everything to an underlying DOM reconciler. This means the representation of the component tree is up to the third-party developer rather than inside React.

Not sure if this is harder than the original suggestion. It depends a bit on how coupled the DOM render is to the DOM reconciler.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!