Not able to serialize Vue 3 component about jest-serializer-vue

[eddyerburgh]

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

[doutatsu]

Would Vue 3 support ever get added?

[doutatsu]

Bumping this up

[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();
  });