Output mapping functionality

[jbrantly]

Would you be open to the addition of some form of node mapping functionality added on top of the existing serialization? Here are some use cases that I've run into where something like this could be really useful:

1. Unwrapping HOC components so that the correct component name can be displayed. It's pretty easy in Enzyme to unwrap the root component but much more difficult (and likely unnecessary) to unwrap descendants. If these could be unwrapped for snapshot output though it would make the output much prettier.
2. Ignoring specific props. In some cases you may not want to pretty-print complex object graphs being passed through props.

I'm sure there are all sorts of other use-cases that people could come up with. It would be awesome if you could specify a function somewhere that would be called for each transformed node and would have access to the raw node as well as the default JSON output which it could transform.

If this is something you would be amenable to I'd be happy to open a PR.

[adriantoine]

Hi @jbrantly!

I am open to any kind of improvements, but I don't think I understand your use cases clearly. Can you provide code examples? As far as I know, if you can do something with Enzyme, you can do it with enzyme-to-json 🤔

Thanks!

[sboudrias-aa]

@adriantoine Hey, I think this would be really useful for people using CSS-in-JS tools. A lot of them are creating a lot of unnecessary noise in the snapshot files.

For example, with styled-jsx:

exports[`<Overlay.Control> click trigger 1`] = `
<div
  className="OverlayControl"
  data-jsx={3299129060}
  onClick={[Function]}
>
  children
  <_class
    css=".OverlayControl[data-jsx=\\"3299129060\\"] {display: inline-block;position: relative;}"
    styleId={4150426368}
  />
  <_class
    css="
                  .OverlayControl .Overlay {
                      display: none;
                  }
              "
    styleId={3597040161}
  />
</div>
`;

Or with glamorous:

exports[`<Button> renders text 1`] = `
<button
  className=""
  data-css-1qmv7zm=""
>
  My Button
</button>
`;

Having less verbose snapshot would certainly be welcomed by a lot of these tools users. Right now they make snapshot a pain to review.

[adriantoine]

@sboudrias-aa it does look like an interesting feature. @jbrantly has started a PR a while ago, I'll see if I can implement it myself.

Thanks for your feedback.

[adriantoine]

Fixed by #56

[adriantoine]

I'm reopening that as it's not really what was implemented in #56, I'll work on a solution for v3.0 (see #67)

[adriantoine]

Ok well I'm closing this again 😁 Just to let you know that the mapping feature will be in 3.0 all the details there: #67 (comment)