Make snapshots more HTML friendly

[oliverwatkins]

🚀 Feature Proposal

Make snapshots more HTML friendly

Motivation

If I want to view a snapshot as a HTML document I have to remove javascript {Object} from style
attributes, and 'Function' objects from callbacks.

Example

Some examples :

                    <div
                            className="inner-section co-field"
                            style={Object {"minHeight": "638px", } }
                    >

and..

                            <input
                                    className="form-control"
                                    onChange={[Function]}
                                    type="text"
                            />

Pitch

Mostly it is not a big deal removing these [Function]s and {Object}s but if it is a really big snapshot file it becomes incredibly tedious. Maybe just surround this code with quotation marks so that is runnable as HTML. And would it not be too hard to replace the className with class?

[pedrottimark]

This brings back a memory, so I must have edited some snapshots to view as HTML too :)

If the situation is once-in-while for you like is was for me, then an editing script might give you a favorable return on investment. What do you think?

Here is a facebook/react#13525 (comment) that discusses at length whether React might ever replace className with class

By the way, snapshots of DOM elements created outside React in tests with js-dom package:

• have ordinary class or style attributes
• can still have on callback attributes which would need to be deleted

[oliverwatkins]

thanks for your comments :) I think changing "className" to "class" is less of an issue for me, because it is still runnable HTML.

[pedrottimark]

@oliverwatkins Something came to mind that might be relevant to you.

To create SVG diagrams from code, I used ReactDOMServer.renderToStaticMarkup

If your tests create React elements (in contrast to React Test Renderer objects) then a quick and dirty technique to explore is temporarily edit a passing test to also write the static markup to an external file, run the test, and then undo your change to the test file.

[oliverwatkins]

yes thankyou. the renderToSaticMarkup would be a good idea to get the HTML. cheers

[github-actions]

This issue is stale because it has been open for 1 year with no activity. Remove stale label or comment or this will be closed in 14 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity. Please open a new issue if the issue is still relevant, linking to this one.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.