WIP: React test renderer wrapper#1649
Conversation
|
|
||
| const instanceToElement = instance => React.createElement(instance.type, instance.props); | ||
|
|
||
| class ReactMountWrapper { |
There was a problem hiding this comment.
ReactMountWrapper functions as a drop-in replacement for the ReactWrapper in enzyme. I think about this class as kind of a container for a component tree query. The results of the query are represented as ReactTestInstances that are stored in this.instances.
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
|
|
||
| class ReactTestRendererAdapter extends EnzymeAdapter { |
There was a problem hiding this comment.
This is pretty much a streamlined version of ReactSixteenAdapter. Because enzyme never interacts with this class, I haven't tried very hard to encapsulate ReactDOM operations in here but that could be possible.
| const renderer = adapter.createMountRenderer(passedOptions); | ||
| const rootWrapper = renderer.render(rootNode, passedOptions.context); | ||
| const rootInstance = new ReactTestInstance(rootWrapper._reactInternalFiber); | ||
| return new ReactMountWrapper(rootInstance.children, rootWrapper, rootNode); |
There was a problem hiding this comment.
This is the codepath that glues together the adapter and the wrapper. I create a new instance of ReactTestInstance and pass that to my wrapper. This is the functionality that we need to be exposed from react-test-renderer. Ideally, what is exposed should help me avoid having to reference rootWrapper._reactInternalFiber
| const { wrapper } = require('enzyme-adapter-react-renderer'); | ||
|
|
||
| Enzyme.configure({ adapter: new Adapter() }); | ||
| Enzyme.configure({ adapter: new Adapter(), wrapper }); |
There was a problem hiding this comment.
This is how a user configures Enzyme to use a different wrapper.
| const { wrapper } = configuration.get(); | ||
| // the API for creating built-in wrapper vs a custom wrapper | ||
| // should be standardised | ||
| return wrapper ? wrapper(node, options) : new ReactWrapper(node, null, options); |
There was a problem hiding this comment.
the mount function knows that the default wrapper can be swapped out.
ljharb
force-pushed
the
master
branch
3 times, most recently
from
40cc703 to
0a17404
Compare
|
@petegleeson is this something you're still interested in pursuing? Avoiding react-test-renderer mismatches would avoid a lot of bugs for users. |
ljharb
force-pushed
the
master
branch
4 times, most recently
from
2227326 to
0d5ead7
Compare
ljharb
force-pushed
the
master
branch
3 times, most recently
from
43eb75e to
39e6b1f
Compare
2 participants
I am not intending for this branch to be merged
This shows off the spike that is described in #1648. I will add some comments to the interesting parts of the code.