Visualize debug output

[sregg]

I was wondering if it was possible to visualize the debut output as it looks like a proper React-Native view tree. It would be great if we could copy paste that tree into a https://snack.expo.io/ or even better, generate a SVG (with something like https://github.com/jest-community/jest-snapshots-svg?).

I tried to copy the output into a storybook story and it worked with a couple of caveats:

1. style objects are marked as Object {} and style arrays are marked as Array [] Example:

   <View
   style={
   Array [
     Object {
       "backgroundColor": "rgba(250, 186, 48, 0.95)",
     },
     Object {
       "height": 48,
       "justifyContent": "center",
       "marginTop": 0.5,
       "paddingHorizontal": 12,
     },
   ]
   }
   >

2. Some multiline strings are breaking the tree.

After manually removing these, I was able to visualize the component under test in Storybook.

It'd be great to see if we can automate this process, to make debugging tests even easier (e.g. "why is this view not showing?")

[bcarroll22]

Hi, thanks for using Testing Library!

I'd be open to seeing a pull request to do something like this if anyone wants to take it. Unfortunately, I don't think I'll have the capacity any time soon to look into how we could make this work. If anyone wants to take a shot at it, feel free!

Do note though, debug output only displays "host nodes", not any custom implementation components. That's a hard requirement, because it allows us to stay in line with the guiding principles of the rest of the Testing Library family. So any pull request that changes this would have to keep that piece in mind.

One last thing, in the future, could you please submit feature request issues using the feature request issue template? It makes it easier to quickly parse the issues and determine what next steps should be, and how the issue should be categorized.

Thanks again!

[thymikee]

The debug supports pretty printing in v7.0. FYI, this repository is no longer responsible for this package. See the migration guide to v7.0.