Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP: React test renderer wrapper #1649

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

petegleeson
Copy link

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.


const instanceToElement = instance => React.createElement(instance.type, instance.props);

class ReactMountWrapper {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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);
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


Enzyme.configure({ adapter: new Adapter() });
Enzyme.configure({ adapter: new Adapter(), wrapper });
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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);
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the mount function knows that the default wrapper can be swapped out.

@ljharb
Copy link
Member

ljharb commented Sep 28, 2019

@petegleeson is this something you're still interested in pursuing? Avoiding react-test-renderer mismatches would avoid a lot of bugs for users.

@ljharb ljharb force-pushed the master branch 4 times, most recently from 2227326 to 0d5ead7 Compare December 21, 2020 07:46
@ljharb ljharb force-pushed the master branch 3 times, most recently from 43eb75e to 39e6b1f Compare November 3, 2022 21:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants