Debug util that would only print displayed text

Describe the Feature

When debugging tests on large components, i.e. pages, snapshots can be very long and may not be convenient for debugging purposes. Very often I’m mostly interested in seing what text / testID is displayed on the screen and don’t really care about the design so I think that a function that would log only the displayed text and maybe also the testIDs could come in pretty handy.

Possible Implementations

We’d have a function to transform the json representation into a string with just text and maybe also testIDs displayed. I implemented such a function on my current project and it looks like this :

export const toText = (node: ReactTestRendererNode | null, textSeparator = '\n'): string | null => {
  if (!node) return '';
  if (typeof node === 'string') return node;
  if (Array.isArray(node)) return toText({ type: 'Fragment', props: {}, children: node });

  const texts = [
    getImageSource(node),
    ...(node.children?.map(child => toText(child, textSeparator)) || []),
  ].filter(truthy);

  return texts.length > 0
    ? texts.join(textSeparator) +
        // Arbitrarily add a separator if more than 1 child, just to add some space in the snap
        (texts.length > 1 ? textSeparator : '')
    : null;
};

Then the api would need to be modified to add this functionality. I’m thinking of two ways to do this :

• Add a debugText function to RenderResult (not sure about the naming yet, this could be something else)
• Add options to the current debug function to enable customization of the output

Second option would allow more customization in the future and we may want to combine several options (for instance text and testID are visible or just text or just testID) but it also makes the api more complex and more difficult to use. Also people may not notice that this feature exists. Alternatively both approach could be combined to have an accessible and easy way of printing just text and also the ability to custom output according to one’s needs.

Related Issues

No related issues as far as I know

@mdjastrzebski @AugustinLF what are your thoughts on this ?

[mdjastrzebski]

I’ve submitted #1141 for adding configure

[AugustinLF]

I love the suggested API by @mdjastrzebski. I feel filterProps should be renamed to something akin mapNode, or whatever, because here we don’t filter a prop, we just rewrite what is printed.

And I think it’d be nice to also expose that as global configuration through an API akin to RTL’s configure. And with of course a priority if passed as an option to debug().