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

Adding Fragment support for shallow .find and .findWhere #1733

Merged
merged 2 commits into from
Aug 5, 2018

Conversation

madicap
Copy link
Contributor

@madicap madicap commented Aug 5, 2018

This fixes #1664 by altering childrenOfNode() in RSTTraversal to return (recursively if needed to accommodate nesting) the children of any node it encounters that is a Fragment instead of the Fragment element. It additionally updates matchAdjacentSiblings() and matchGeneralSibling() to make use of childrenOfNode() instead of looking directly at parent.rendered in order to make use of the new Fragment logic, which lives inside of the ReactSixteenAdapter's isFragment()

Consider the following example

const FragmentExample = () => (
  <div className="container">
    <React.Fragment>
      <React.Fragment>
        <span>A span</span>
      </React.Fragment>
    </React.Fragment>
  </div>
);

Calling const wrapper = mount(<FragmentExample />); will yield a wrapper with the following structure:

<FragmentExample>
  <div className="container">
    <span>
      A span
    </span>
  </div>
</FragmentExample>

and direct selectors like wrapper.find('.container > span') will behave as expected to find the span.

If we instead say const wrapper = shallow(<FragmentExample />), however, the wrapper has additional layers in the form of <Symbol(React.fragment)>:

<div className="container">
  <Symbol(React.fragment)>
    <Symbol(React.fragment)>
      <span>
        A span
      </span>
    </Symbol(React.fragment)>   
  </Symbol(React.fragment)>
</div>

These additional layers caused direct selectors to fail, since simply looking at the .rendered of the container div would show the symbol type node, and not a span, as expected.

Please let me know if I need any additional tests.

@madicap madicap requested a review from ljharb August 5, 2018 03:36
@ljharb ljharb added this to Fragments in React 16 Aug 5, 2018
@ljharb ljharb force-pushed the mac--support-for-fragments-in-shallow branch from 3280135 to 54498a0 Compare August 5, 2018 05:59
Copy link
Member

@ljharb ljharb left a comment

Choose a reason for hiding this comment

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

This is excellent, thank you!

@ljharb ljharb merged commit 4d4f7bd into master Aug 5, 2018
@ljharb ljharb deleted the mac--support-for-fragments-in-shallow branch August 5, 2018 06:31
ljharb added a commit that referenced this pull request Aug 8, 2018
 - [new] add `isFragment` (#1733)
 - [new] Add `displayNameOfNode`, `isValidElementType`
 - [new] `mount`: add `hydrateIn` option (#1317, #1707)
 - [new] Add support for react context element types (#1513)
 - [new] `shallow`: Add getSnapshotBeforeUpdate support (#1657)
 - [fix] portals and roots may render fragments (#1733)
 - [fix] add missing support for animation events (#1569)
 - [fix] `shallow`: SFCs do not get a `this` (#1703)
 - [refactor]: add “lifecycles” adapter option (#1696)
 - [fix] call ref for a root element (#1541)
 - [fix] Allow empty strings as key props (#1524)
 - [fix] Fix ShallowWrapper for array-rendering components (#1498)
 - [refactor] use `react-is` package
 - [meta] ensure a license and readme is present in all packages when published
@ljharb ljharb mentioned this pull request Aug 8, 2018
41 tasks
evanpurkhiser added a commit to getsentry/sentry that referenced this pull request Aug 28, 2018
Fragment's disappearing (or being renamed) is likely due to enzymejs/enzyme#1733
evanpurkhiser added a commit to getsentry/sentry that referenced this pull request Aug 28, 2018
Fragment's disappearing (or being renamed) is likely due to enzymejs/enzyme#1733
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
React 16
  
Fragments
Development

Successfully merging this pull request may close these issues.

Shallow does not find direct child when inside React.Fragment
2 participants