Vue Testing
vue-test-utils
is the official unit testing library for Vue.js.A
Wrapper
is an object containing the mounted component or vnode and methods to test these.This is the
Vue
instance.The root DOM node of the wrapper
options.attachedToDocument
Returns true if component is attached to document when rendered.Returns HTML of
Wrapper
DOM node as a string.wrapper.html()
Here are some common issues you might run into when unit testing Vue.
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')
})
Last modified 3yr ago