@vue/test-utils

Mounting Components

Mounting components allows you to render a Vue component in a test environment and returns a wrapper that contains the mounted component and methods to interact with it.

import { mount } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';

const wrapper = mount(MyComponent);

Finding Elements

Finding elements within the mounted component using CSS selectors, Vue component options, or ref attributes, which can then be used to test the component's behavior.

const button = wrapper.find('button');

Simulating User Interaction

Simulating user interactions such as clicks, typing, or other events on the mounted component to test how it responds to user input.

button.trigger('click');

Accessing Component Data and Methods

Accessing the Vue instance's data, computed properties, and methods to assert their values and behavior within the test.

const vm = wrapper.vm;
console.log(vm.someData);

Stubbing Child Components

Stubbing child components to prevent their actual implementation from being rendered, which can simplify tests and improve test performance.

const wrapper = mount(MyComponent, {
  stubs: {
    ChildComponent: true
  }
});