Vue-test-utils: Pretty-print html() output by default

[ianwalter]

What problem does this feature solve?

My team is using @vue/test-utils for snapshot testing components but the snapshots are hard to parse because the HTML string output from .html() is not formatted in a readable way. If html() pretty-printed the HTML it would be a lot easier to review changes to the component-generated HTML.

What does the proposed API look like?

html() would pretty-print the returned HTML string by default, perhaps using something like https://github.com/prettydiff/prettydiff. If necessary, a user could bypass pretty-printing by passing an option to .html(), perhaps .html(false) or .html({ prettyPrint: false }).

[eddyerburgh]

For snapshot tests, I recommend using the DOM element:

expect(wrapper.element).toMatchSnapshot()

[ianwalter]

Thank you for your recommendation Edd. I'm sorry that I forgot to mention that I'm mounting/testing the components in Chrome with Puppeteer using page.evaluate so the return value (which then gets its snapshot taken) has to be serializable.

[denisinvader]

I think you can just use diffable-html in your tests

[briwa]

I needed this too in my test! @eddyerburgh if anyone isn't actively looking into this, I'm interested to work on this, but I guess we might have to agree on the API, whether it's .html(true | false) or .html({ prettyPrint: true | false }).

[addisonssense]

@briwa @eddyerburgh I have a tentative Pull Request for this feature. Are there any preferences on .html(bool) vs .html({ prettyPrint: bool })?

[briwa]

@addisonssense I'd vote for .html(pretty = false) but let's hear it from the majority.

[eddyerburgh]

I prefer html({ prettyPrint: true | false }) in case we add extra options in the future

[addisonssense]

I have created a PR to resolve this issue. I welcome feedback :)
https://github.com/vuejs/vue-test-utils/pull/1229

[eddyerburgh]

Thinking about it more, I think it should pretty print by default. Vue Test Utils is still in beta so we can make breaking changes now.

[TheJaredWilcurt]

Please see: https://github.com/eddyerburgh/jest-serializer-vue/issues/13