enzymejs/enzyme

React toTree() handling mismatches

Open

#1512 opened on Feb 5, 2018

View on GitHub
 (4 comments) (0 reactions) (0 assignees)JavaScript (19,979 stars) (2,016 forks)batch import
Fiber Supportdiscussionhelp wantedpackage: react adapter: 16

Description

Sorry for deleting the template, there are a few very specific problems I saw in the source.

  • I'm not sure how I feel about https://github.com/airbnb/enzyme/pull/1399. It gives a false sense of security but in practice can still break in patch versions. I explain the reasoning in a comment there—basically, it works by accident, and if react-dom internal logic changes you'd have to fork it again anyway because you'd need to support multiple versions.

  • It seems like this call won't handle a fragment inside a root correctly. It will just skip over any but the first item. I'm not sure Enzyme API allows rendering an array or a <Fragment> as a root node but React does. (Note React's toTree() is also broken in this way—but I fixed it in https://github.com/facebook/react/pull/12154.)

  • If the above is right, I suspect that this call might also not work with fragments. It is totally legitimate to put a fragment inside a portal.

I haven't had time to verify these in detail because I'm in the middle of fixing React toTree() bugs myself. But I thought it might be helpful to report for further investigation.

Contributor guide

Tech stack
javascriptreact
Domain
testingfrontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
4
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
over 1 week
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
React internalsEnzyme adapter architecture
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
20
Research direction
Investigate the handling of fragments in React's toTree() within the Enzyme adapter. Specifically, examine lines 71 and 73 in packages/enzyme adapter react 16/src/ReactSixteenAdapter.js to see if they correctly handle fragments as root nodes and inside portals. Also review the approach in PR #1399 which may give a false sense of security. Check the linked React PR #12154 for insights on fixing toTree() for fragments.