Vue Testing

vue-test-utils is the official unit testing library for Vue.js.
Wrapper
A Wrapper is an object containing the mounted component or vnode and methods to test these.
Properties
vm
This is the Vue instance.
element
The root DOM node of the wrapper
options
options.attachedToDocument Returns true if component is attached to document when rendered.
Methods
HTML
Returns HTML of Wrapper DOM node as a string.
wrapper.html()
Common Issues
Here are some common issues you might run into when unit testing Vue.
I trigger events on components but the DOM isn't updating
Cause: Vue re-renders the DOM asynchronously, so you need to wait for this update explicitly. Before this could be done with a setting when mounting your Vue component in your tests via the sync: true flag, but this was depcreated on November 28th, 2019, as per the changelog.
it('render text', async () => {
    const wrapper = mount(TestComponent)
​
    wrapper.trigger('click')
    await Vue.nextTick()
​
    wrapper.text().toContain('some text')
​
    wrapper.trigger('click')
    await Vue.nextTick()
    wrapper.text().toContain('some different text')
})

Common Vue.js Errors

Humans

Last modified 3yr ago