Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
vue-testing-library
Advanced tools
Simple and complete Vue DOM testing utilities that encourage good testing practices.
Lightweight adapter allowing dom-testing-library to be used to test Vue.js components built on top of @vue/test-utils
The vue-testing-library
is a an adapter that enables Vue testing using the framework-agnostic DOM testing library dom-testing-library
This module is distributed via npm which is bundled with node and
should be installed as one of your project's devDependencies
:
npm install --save-dev vue-testing-library
npm install --save-dev vue-testing-library
jest
vue-jest
babel-jest
babel-preset-env
babel-plugin-transform-runtime
// package.json
"scripts": {
"test": "jest"
}
"jest": {
"moduleDirectories": [
"node_modules",
"src"
],
"moduleFileExtensions": [
"js",
"vue"
],
"testPathIgnorePatterns": [
"/node_modules/"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
}
}
// .babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}]
],
"plugins": [
"transform-runtime"
],
"env": {
"test": {
"presets": ["env"]
}
}
}
// src/TestComponent.vue
<template>
<div>
<span data-testid="test1">Hello World</span>
</div>
</template>
// src/TestComponent.spec.js
import 'jest-dom/extend-expect'
import { render } from 'vue-testing-library'
import TestComponent from './TestComponent'
test('should render HelloWorld', () => {
const { queryByTestId } = render(TestComponent)
expect(queryByTestId('test1')).toHaveTextContent('Hello World')
})
The render
function takes up to 3 parameters and returns an object with some helper methods
render
will configure a Vuex store and pass to mount.Lightweight wrapper around DOM element events and methods. Will call wait, so can be awaited to allow effects to propagate.
When in need to wait for non-deterministic periods of time you can use wait
,
to wait for your expectations to pass. The wait
function is a small wrapper
around the
wait-for-expect
module.
Waiting can be very important in Vue components, @vue/test-utils has succeeded in making the majority of updates happen
synchronously however there are occasions when wait will allow the DOM to update. For example, see here
You'll find examples of testing with different libraries in the test directory. Some included are:
Feel free to contribute more!
MIT
FAQs
Simple and complete Vue DOM testing utilities that encourage good testing practices.
The npm package vue-testing-library receives a total of 435 weekly downloads. As such, vue-testing-library popularity was classified as not popular.
We found that vue-testing-library demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.