feat(wrapper): Add raw option to .html()

docs/api/index.md

@@ -1378,10 +1378,14 @@ test('getComponent', () => {
 
 Returns the HTML of an element.
 
+By default the output is formatted with [`js-beautify`](https://github.com/beautify-web/js-beautify)
+to make snapshots more readable. Use `raw: true` option to receive the unformatted html string.
+
 **Signature:**
 
 ```ts
 html(): string
+html(options?: { raw?: boolean }): string
 ```
 
 **Details:**
@@ -1405,7 +1409,13 @@ import Component from './Component.vue'
 test('html', () => {
   const wrapper = mount(Component)
 
-  expect(wrapper.html()).toBe('<div><p>Hello world</p></div>')
+  expect(wrapper.html()).toBe(
+    '<div>\n' +
+    '  <p>Hello world</p>\n' +
+    '</div>'
+  )
+
+  expect(wrapper.html({ raw: true })).toBe('<div><p>Hello world</p></div>')
 })
 ```
 

package.json

@@ -27,8 +27,8 @@
     "@rollup/plugin-node-resolve": "15.0.0",
     "@rollup/plugin-replace": "5.0.0",
     "@rollup/plugin-typescript": "9.0.1",
+    "@types/js-beautify": "1.13.3",
     "@types/node": "18.0.6",
-    "@types/pretty": "2.0.1",
     "@typescript-eslint/eslint-plugin": "5.40.1",
     "@typescript-eslint/parser": "5.40.1",
     "@vitejs/plugin-vue": "3.1.2",
@@ -43,11 +43,11 @@
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-prettier": "4.2.1",
     "husky": "8.0.1",
+    "js-beautify": "1.14.6",
     "jsdom": "20.0.1",
     "jsdom-global": "3.0.2",
     "lint-staged": "13.0.3",
     "prettier": "2.7.1",
-    "pretty": "2.0.0",
     "reflect-metadata": "0.1.13",
     "rollup": "3.2.3",
     "tslib": "2.4.0",

src/baseWrapper.ts

@@ -29,7 +29,7 @@ import { isElement } from './utils/isElement'
 import type { DOMWrapper } from './domWrapper'
 import { createDOMWrapper, createVueWrapper } from './wrapperFactory'
 import { stringifyNode } from './utils/stringifyNode'
-import pretty from 'pretty'
+import beautify from 'js-beautify'
 
 export default abstract class BaseWrapper<ElementType extends Node>
   implements WrapperLike
@@ -216,9 +216,19 @@ export default abstract class BaseWrapper<ElementType extends Node>
     )
   }
   abstract setValue(value?: any): Promise<void>
-  html(): string {
-    return this.getRootNodes()
-      .map((node) => pretty(stringifyNode(node)))
+
+  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
+        })
+      )
       .join('\n')
   }
 

src/vueWrapper.ts

@@ -4,8 +4,6 @@ import {
   ComponentCustomProperties,
   ComponentPublicInstance
 } from 'vue'
-// @ts-ignore todo - No DefinitelyTyped package exists for this
-import pretty from 'pretty'
 
 import { config } from './config'
 import domEvents from './constants/dom-events'

tests/html.spec.ts

@@ -3,6 +3,12 @@ import { defineComponent, h } from 'vue'
 
 import { mount } from '../src'
 
+const nestedTemplate =
+  '<div><div class="element"><span>Text 1</span></div><div>Text 2</div></div>'
+const NestedNodes = defineComponent({
+  template: nestedTemplate
+})
+
 describe('html', () => {
   it('returns html when mounting single root node', () => {
     const Component = defineComponent({
@@ -16,6 +22,29 @@ describe('html', () => {
     expect(wrapper.html()).toBe('<div>Text content</div>')
   })
 
+  it('returns formatted html string', () => {
+    const wrapper = mount(NestedNodes)
+
+    expect(wrapper.html()).toBe(
+      '<div>\n' +
+        '  <div class="element"><span>Text 1</span></div>\n' +
+        '  <div>Text 2</div>\n' +
+        '</div>'
+    )
+    expect(wrapper.html()).toBe(
+      '<div>\n' +
+        '  <div class="element"><span>Text 1</span></div>\n' +
+        '  <div>Text 2</div>\n' +
+        '</div>'
+    )
+  })
+
+  it('returns raw html string', () => {
+    const wrapper = mount(NestedNodes)
+
+    expect(wrapper.html({ raw: true })).toBe(nestedTemplate)
+  })
+
   describe('multiple root components', () => {
     const originalTemplate = [
       '<div>foo</div>',
@@ -35,6 +64,11 @@ describe('html', () => {
       expect(wrapper.html()).toBe(originalTemplate.join('\n'))
     })
 
+    it('returns the raw html when mounting multiple root nodes', () => {
+      const wrapper = mount(Component)
+      expect(wrapper.html({ raw: true })).toBe(originalTemplate.join(''))
+    })
+
     it('returns the html when multiple root component is located inside other component', () => {
       const ParentComponent = defineComponent({
         components: { MultipleRoots: Component },