Not able to serialize Vue 3 component

[Kaijiro]

Hey !

Actually the library is not able to serialize Vue 3 component, even when embed in a VueWrapper (from @vue/test-utils, right ?).

The trick I used to "extract" the template from the Vue 3 wrapper :

import {shallowMount} from "@vue/test-utils";
import MyComp from "../MyComp.vue";

describe("Vue 3 component", () => {
  it("should test with a snapshot", () => {
    const component = shallowMount(MyComp, {});

    expect(component.__app._container).toMatchSnapshot();
  });
});

By doing this trick, I actually have a readable snapshot :

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Vue 3 component should test with a snapshot 1`] = `
<div
  data-v-app=""
>
  <div
    class="container"
  >
    <h2>
      Weeeew, this is my comp !
    </h2>
  </div>
</div>
`;

If I don't use this trick, the whole VueWrapper instance is serialized as an object, with all properties and methods.

[doutatsu]

Would Vue 3 support ever get added?

[doutatsu]

Bumping this up

[eddyerburgh]

I'm pretty busy atm but would happily accept a PR adding support

[visualjerk]

For anyone needing a way to at least come close to the snapshot output with Vue 3 components, this might be useful:

Install diffable-html:

yarn add -D diffable-html

Create a file snapshot-serializer.js

const toDiffableHtml = require('diffable-html')

module.exports = {
  test(received) {
    return received instanceof HTMLElement
  },
  print(received) {
    return toDiffableHtml(received.outerHTML).trim()
  },
}

Add it to jest.config.js:

module.exports = {
  ...
  snapshotSerializers: ['<rootDir>/tests/unit/snapshot-serializer'],
  ...
}

Unfortunately this does not support test-utils wrapper, so you need to pass in their element like so:

expect(wrapper.element).toMatchSnapshot()

Be aware that this will still alter the snapshot outcome compared to what jest-serializer-vue did with Vue 2 components. But it came close enough for our use case.

[renatodeleao]

From a quick look, it doesn't work because isVueInstance property was already deprecated in @vue/test-utils@1 and as such it does not exist in v2 (for vue3). That property is used to assert if the input is a @vue/test-utils wrapper. In theory, a quick fix would be to replace this check with another one, for example:

 const isVueWrapper = received => ( 
   received && 
   typeof received === 'object' && 
-   typeof received.isVueInstance === 'function' 
+   typeof received.html === 'function' 

jest-serializer-vue/index.js

Lines 4 to 7 in 600b2c0

	const isVueWrapper = received => (
	received &&
	typeof received === 'object' &&
	typeof received.isVueInstance === 'function'

Alternatives

Just call .html() beforehand in your tests.

  it('smokes', () => {
    const wrapper = shallowMount(Component);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.html()).toMatchSnapshot();
  });

[TheJaredWilcurt]

This is now possible in:

• https://thejaredwilcurt.com/vue-snapshot-serializer