Test Vue components with html-looks-like

Hello.js

const Vue = require('vue')

module.exports = Vue.extend({
  template: `
    <div>
      <h1>Hello</h1>
      <h2>{{name}}</h2>
    </div>
  `,
  props: { name: String }
})

Hello.spec.js

const htmlLooksLike = require('html-looks-like')
const Hello = require('./Hello')

const createVm = name => new Hello({
  propsData: { name }
})

describe('Hello', () => {
  it('renders an arbitrary name', () => {
    const vm = createVm('Human')
    const expected = name => `
      <div>
        {{ ... }}
        <h2>${name}</h2>
      </div>
    `
    vm.$mount()
    htmlLooksLike(vm.$el.outerHTML, expected('Human'))
  })
})