Unclear why documentation uses wrapper.element for snapshots

[pattrickrice]

Documentation Feedback

Provide a brief summary of what you would like to see changed in our documentation.
Naively, for as long as I've been using this library I've been doing snapshot testing via

expect(wrapper).toMatchSnapshot()

however, the documentation without reasons shows

expect(wrapper.element).toMatchSnapshot()

while vuetify shows

expect(wrapper.html()).toMatchSnapshot()

It's not clear to me what the exact differences between the three are.

Feel free to provide any suggestions of content or examples you’d like us to include.
It would be nice to explain either the pros and cons of the different methods, or to just endorse one and say why explicitly.

Affected documentation page: Insert a link to the affected page
https://vue-test-utils.vuejs.org/guides/#testing-single-file-components-with-jest

[lmiller1990]

If you write a test with all three, do they all pass? Or write three separate tests, and look at the output that is generated. That would be the best way to find out the difference.

I personally am not sure what the difference is, but that is the first thing I would do to find out. I would expect that toMatchSnapshot matches against a string, so the last one (the Vuetify one) makes the most sense to me.

[lmiller1990]

What was the answer for this? Which one should snapshot users be using?

[afontcu]

What was the answer for this? Which one should snapshot users be using?

The snapshot testing section was removed in #1610, but I'd say wrapper.html() makes more sense as it renders the element.outerHTML. However, the goal of having a snapshot is to detect changes between test runs, so as long as people don't change the snapshotted HTML, they should be good 👍

Moreover, as you know very well, component snapshots relies heavily on implementation details, so this should not be the default way of testing components 😉