Vue Test Utils is a set of tools to make it easier to test Vue applications with Jest.
Quick Reference
Mounting
Mount a component by passing the component to the library’s mount function or shallowMount function. mount is preferred as it most closely mirrors the actual application. shallowMount stubs every nested component automatically. This can be done piecemeal with mount using the stubs option.
Either mounting function returns a wrapper.
Options
| Key | Function |
|---|---|
context | Passes context to functional component. Can only be used with functional components. |
data | Passes data to a component. It will merge with the existing data function. |
slots | Provide an object of slot contents to the component. The key corresponds to the slot name. The value can be either a component, an array of components, or a template string, or text. |
scopedSlots | Provide an object of scoped slots to the component. The key corresponds to the slot name. |
stubs | Stubs child components can be an Array of component names to stub, or an object. If stubs is an Array, every stub is <${component name}-stub>. |
mocks | Add additional properties to the instance. Useful for mocking global injections. |
localVue | A local copy of Vue created by createLocalVue to use when mounting the component. Installing plugins on this copy of Vue prevents polluting the original Vue copy. |
attachTo | This either specifies a specific HTMLElement or CSS selector string targeting an HTMLElement, to which your component will be fully mounted in the document. |
attrs | Set the component instance’s $attrs object. |
propsData | Set the component instance’s props when the component is mounted. |
listeners | Set the component instance’s $listeners object. |
parentComponent | Component to use as parent for mounted component. |
provide | Pass properties for components to use in injection. See provide/inject. |
| other options | Any other options will be applied to the mounted component using extend on existing options with that key. |
Wrappers
Examples
// Import the `mount()` method from Vue Test Utils
import { mount } from '@vue/test-utils';
// The component to test
const MessageComponent = {
template: '<p>{{ msg }}</p>',
props: ['msg']
};
test('displays message', () => {
// mount() returns a wrapped Vue component we can interact with
const wrapper = mount(MessageComponent, {
propsData: {
msg: 'Hello world'
}
});
// Assert the rendered text of the component
expect(wrapper.text()).toContain('Hello world');
});Resources
- Using Vue Test Uitls with Vue Router- Very basic information about testing Vue Router and even testing around Vue Router (for when the router isn’t what you want to test). Great useful info, but not much meat here.