how to render shadow DOMs

[julisch94]

Hey folks, I'm using a component library that works with shadow DOM elements but when I call render in my test case and then print the DOM, I can't see any shadow DOM elements. How can I enable vue test utils to render shadow DOM elements, as well?

// navigation.spec.ts
import { describe, expect, it } from 'vitest'
import MyNavigationBar from './NavigationBar.vue'
import { mount } from '@vue/test-utils'

describe('NavigationBar', () => {
  it('displays a log out button', async () => {
    const wrapper = mount(MyNavigationBar)
    console.log(wrapper.html())
  })
})

Output in test:

<ui-header-bar icon-label="Go to home page" icon-href="#">
  <ui-header-meta-link href="#">Logout</ui-header-meta-link>
</ui-header-bar>

Output in browser contains shadow DOMs with anchors and svg's.

[cexbrayat]

Hi @julisch94

That's a good question.
wrapper.html() uses stringifyNode, as you can see here

test-utils/src/baseWrapper.ts

Lines 220 to 235 in d5f95cf

	html(options?: { raw?: boolean }): string {
	const stringNodes = this.getRootNodes().map((node) => stringifyNode(node))
	if (options?.raw) return stringNodes.join('')
	return stringNodes
	.map((node) =>
	beautify.html(node, {
	unformatted: ['code', 'pre', 'em', 'strong', 'span'],
	indent_inner_html: true,
	indent_size: 2,
	inline_custom_elements: false
	// TODO the cast can be removed when @types/js-beautify will be up-to-date
	} as HTMLBeautifyOptions)
	)
	.join('\n')
	}

which is defined here

test-utils/src/utils/stringifyNode.ts

Lines 1 to 5 in d5f95cf

	export function stringifyNode(node: Node): string {
	return node instanceof Element
	? node.outerHTML
	: new XMLSerializer().serializeToString(node)
	}

and uses `outerHTML£

So maybe outerHTML does not include the shadow DOM elements?

I think you can either:

• write your own 'html' function to serialize the wrapper, based on the one in VTU but which would serialize the shadow dom elements, but this might be a lot of work
• try to open a PR in VTU so that wrapper.html() handles this out of the box. If the changes are not too breaking I think we can land this. Maybe it could be behind an option of html() (like the raw option)

[julisch94]

thanks for the quick reply! I'll see if I can find the time to put in the effort to aim for option 2. :)