testing-framework.spec.js

const { createApp, h, nextTick, ref } = require('vue')

const Increment = {
  setup(props, context) {
    return () => h('button', { onClick: () => context.emit('increment') }, 'Button')
  }
}

const App = {
  components: {
    Increment
  },

  setup() {
    return {
      count: ref(0)
    }
  },

  render() {
    return h(
      'div',
      {},
      [
        h('div', { id: 'root' }, `Count is ${this.count}`),
        h(Increment, { onIncrement: () => this.count++ })
      ]
    )
  }
}

class DOMWrapper {
  constructor(el) {
    this.el = el
  }

  trigger(evtString) {
    const evt = document.createEvent('Event')
    evt.initEvent(evtString)
    this.el.dispatchEvent(evt)
  }
}

class VueWrapper {
  constructor(vm) {
    this.vm = vm
  }

  find(selector) {
    return new DOMWrapper(this.vm.$el.querySelector(selector))
  }
}

function mount(Component) {
  const el = document.createElement('div')
  el.id = 'app'
  document.body.appendChild(el)
  return new VueWrapper(createApp(Component).mount('#app'))
}


test('Renders', async () => {
  const wrapper = mount(App)

  expect(wrapper.find('#root').el.textContent).toBe('Count is 0')

  wrapper.find('button').trigger('click')

  await nextTick()
  expect(wrapper.find('#root').el.textContent).toBe('Count is 1')
})