Bug: wrapper.html() produces wrong output for components with multiple root nodes

[jessevanassen]

Describe the bug
When calling the .html() function on a wrapper containing multiple root nodes, the output of the individual nodes will be joined by a \n character.

This is problematic if the root nodes are inline elements. A \n between inline elements is rendered as whitespace, which means the nodes are separated by a space when rendered in the browser.
This is inconsistent with the actual rendered output of the component.

To Reproduce

import { mount } from '@vue/test-utils';
import { expect, test } from 'vitest';
import { defineComponent, h } from 'vue';

const Component = defineComponent({
	setup: () => {
		return () => [ h('strong', 'strong'), h('em', 'emphasized') ];
	},
});

test('HTML elements should be joined together without whitespace', () => {
	const wrapper = mount(Component);

	// wrapper.html() returns '<strong>strong</strong>\n<em>emphasized</em>'
	//                                                ^^
	expect(wrapper.html())
		.toBe('<strong>strong</strong><em>emphasized</em>');
});

test('innerHTML and .html() should be consistent', () => {
	const wrapper = mount(Component);

	expect(wrapper.html())
		.toBe(wrapper.element.innerHTML);
});

test('textContent of element and rendered .html() should be equal', () => {
	const wrapper = mount(Component);

	const other = document.createElement('div');
	other.innerHTML = wrapper.html();

	// .innerText would be a better comparison, but it isn't implemented in JSDom
	expect(wrapper.element.textContent)
		.toBe(other.textContent);
});

Workaround
wrapper.element.innerHTML can be used.

Related information:

• @vue/test-utils version: 2.1.0
• Vue version: 3.2.38
• node version: 18.11.0
• npm version: 8.19.2

[freakzlike]

I already have thought about adding an option to .html() to avoid call pretty and just return the raw string. Maybe I will check this out within the next few days