Open TheJaredWilcurt opened 4 years ago
Thanks for this tutorial @TheJaredWilcurt
Thanks for the idea. You could also just replace the comments and attributes with regex. I decided for this instead of adding a library to do it.
describe('Table', () => {
it('renders table', () => {
const wrapper = mount(Component)
expect(getRenderedHTML(wrapper)).toMatchSnapshot()
})
function getRenderedHTML(wrapper) {
const html = wrapper.html()
// remove vue-fragment dynamic comments and attributes
return html.replace(/<!--fragment(.*)-->/g, '').replace(/fragment="(.*?)"/g, '')
}
})
Vue-Fragment is a great bridge between Vue 2 and 3, however it took a lot of effort to get it to work with snapshot testing. So I'm posting this here for anyone else that needs these steps.
Here is my simple component:
Here is my test file:
This example includes a
doMock
. This is specifically for a Jest snapshot plugin that is required for this to work.This Jest plugin must be installed for Vue-Fragment snapshots to work
That plugin will let you apply per-test settings for tweaking your snapshots. It has many improvements over the default snapshot serializer that comes with Vue-CLI.
Without the Jest-Serializer-Vue-TJW plugin (and those settings) the snapshots will look like this:
instead of this:
where the fragment ID (
ba77906b55
) is randomized on every test run (thus breaking the snapshots).