Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@vue/test-utils
Advanced tools
@vue/test-utils is the official unit testing utility library for Vue.js. It provides methods to mount and interact with Vue components in an isolated manner, allowing developers to write unit tests for their Vue components effectively.
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
}
});
Enzyme is a JavaScript testing utility for React that is similar to @vue/test-utils but for React components. It allows for shallow rendering, full DOM rendering, and static rendering. Enzyme provides a more granular approach to testing React components compared to @vue/test-utils.
React Testing Library is another testing library for React that focuses on testing components in a way that resembles how users would interact with them, rather than testing implementation details. It is similar to @vue/test-utils in philosophy but tailored for React.
Angular Testing Library is a set of helpers for testing Angular components with a focus on the user experience. Like @vue/test-utils, it provides utilities for interacting with components, but it is designed specifically for the Angular framework.
Component testing utils for Vue 3.
yarn add @vue/test-utils --dev
npm install @vue/test-utils --save-dev
Get started with the documentation.
Check the migration guide. It's still a work in progress. If you find a problem or something that doesn't work that previously did in Vue Test Utils v1, please open an issue.
See the docs.
Get started by running yarn install
. You can run the tests with yarn test
. That's it!
This is table for those coming from VTU 1, comparing the two APIs. Some things are still a work in progress.
option | status | notes |
---|---|---|
data | ✅ | |
slots | ✅ | |
mocks | ✅ | nested in global |
propsData | ✅ | now called props |
provide | ✅ | nested in global |
mixins | ✅ | (new!) nested in global |
plugins | ✅ | (new!) nested in global |
component | ✅ | (new!) nested in global |
directives | ✅ | (new!) nested in global |
stubs | ✅ | |
attachToDocument | ✅ | renamed attachTo . See here |
attrs | ✅ | |
scopedSlots | ⚰️ | scopedSlots are merged with slots in Vue 3 |
context | ⚰️ | different from Vue 2, does not make sense anymore. |
localVue | ⚰️ | no longer required - Vue 3 there is no global Vue instance to mutate. |
listeners | ⚰️ | no longer exists in Vue 3 |
parentComponent | ⚰️ |
method | status | notes |
---|---|---|
attributes | ✅ | |
classes | ✅ | |
exists | ✅ | |
find | ✅ | only querySelector syntax is supported. find(Comp) under discussion here |
emitted | ✅ | |
findAll | ✅ | see above. .vm is different to Vue 2. We are exploring options. |
get | ✅ | |
html | ✅ | |
setValue | ✅ | works for select, checkbox, radio button, input, textarea. Returns nextTick . |
text | ✅ | |
trigger | ✅ | returns nextTick . You can do await wrapper.find('button').trigger('click') |
setProps | ✅ | |
props | ✅ | |
setData | ✅ | |
destroy | ✅ | renamed to unmount to match Vue 3 lifecycle hook name. |
props | ✅ | |
isVisible | ✅ | |
contains | ⚰️ | use find |
emittedByOrder | ⚰️ | use emitted |
setSelected | ⚰️ | now part of setValue |
setChecked | ⚰️ | now part of setValue |
is | ⚰️ | |
isEmpty | ⚰️ | use matchers such as this |
isVueInstance | ⚰️ | |
name | ⚰️ | |
setMethods | ⚰️ |
FAQs
Component testing utils for Vue 3.
The npm package @vue/test-utils receives a total of 1,440,405 weekly downloads. As such, @vue/test-utils popularity was classified as popular.
We found that @vue/test-utils demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.