feat: serialize Wrapper Instances (#4)

breaking change

index.js

@@ -1,11 +1,18 @@
 const beautify = require('pretty')
 
+const isHtmlString = received => typeof received === 'string' && received[0] === '<'
+const isVueWrapper = received => (
+  typeof received === 'object' &&
+  typeof received.isVueInstance === 'function'
+)
+
 module.exports = {
-  test (object) {
-    return typeof object === 'string' && object[0] === '<'
+  test (received) {
+    return isHtmlString(received) || isVueWrapper(received)
   },
-  print (val) {
-    const removedServerRenderedText = val.replace(/ data-server-rendered="true"/, '')
+  print (received) {
+    const html = isVueWrapper(received) ? received.html() : received
+    const removedServerRenderedText = html.replace(/ data-server-rendered="true"/, '')
     return beautify(removedServerRenderedText, { indent_size: 2 })
   }
 }

jest.config.json

@@ -0,0 +1,5 @@
+{
+  "snapshotSerializers": [
+    "<rootDir>/index.js"
+  ]
+}

test/Parent.spec.js

@@ -12,4 +12,14 @@ describe('Parent.vue', () => {
     const wrapper = shallow(Parent)
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  it('properly serializes a shallowly-rendered wrapper', () => {
+    const wrapper = shallow(Parent)
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it('properly serializes a fully-mounted wrapper', () => {
+    const wrapper = mount(Parent)
+    expect(wrapper).toMatchSnapshot()
+  })
 })

test/__snapshots__/Parent.spec.js.snap

@@ -33,6 +33,28 @@ exports[`Parent.vue mount snapshot 2`] = `
 </div>
 `;
 
+exports[`Parent.vue properly serializes a fully-mounted wrapper 1`] = `
+<div>
+  <h1>parent</h1>
+  <main>
+    <p>this is a child component</p>
+    <p>this is a child component</p>
+    <p>this is a child component</p>
+  </main>
+</div>
+`;
+
+exports[`Parent.vue properly serializes a shallowly-rendered wrapper 1`] = `
+<div>
+  <h1>parent</h1>
+  <main>
+    <!---->
+    <!---->
+    <!---->
+  </main>
+</div>
+`;
+
 exports[`Parent.vue shallow snapshot 1`] = `
 <div>
   <h1>parent</h1>