vue-test-utils is in beta, and will be released soon. When vue-test-utils is released avoriaz will be deprecated.
avoriaz and vue-test-utils have similar APIs. You can use this guide to migrate from avoriaz to vue-test-utils.
The main difference between avoriaz and vue-test-utils is the find API.
In avoriaz there is one method to traverse the render tree—find. find returns an array of wrappers that match the selector.
// avoriaz
const wrapper = mount(Component)
wrapper.find('div')[0].is('div')In vue-test-utils, there are two methods to traverse the render tree—find and findAll. find returns the first wrapper matching the selector, findAll returns an array-like object.
// vue-test-utils
const wrapper = mount(Component)
wrapper.find('div').is('div')
wrapper.findAll('div').at(0).is('div')Another difference is the name of the mounting options:
| avoriaz | vue-test-utils |
|---|---|
globals |
mocks |
instance |
localVue |
In the past, avoriaz exposed data, methods and props on the wrappers for mounted components. Going forward it is recommended that any data from these methods instead be accessed directly from vm.
// avoriaz
const wrapper = mount(Component)
expect(component.$data.propValue).to.equal(123)// vue-test-utils
const wrapper = mount(Component)
expect(component.vm.propValue).to.equal(123)vue-test-utils will replace hasProp, hasClass, and hasAttribute with props, classes, and attributes.
hasProp, hasClass, and hasAttribute exist in the early vue-test-utils beta, but will be removed before the full release.
The reason for this is that hasProp, hasClass, and hasAttribute return booleans, which makes debugging difficult. The new methods enable us to write more value assertions in our tests.