Skip to content
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
9 contributors

Users who have contributed to this file

@novemberborn @forresst @Scrum @pearofducks @mdvorscak @BusbyActual @bompus @blake-newman @scottdotjs

Testing Vue.js components

Translations: Fran莽ais



The first step is setting up a helper to configure the environment to transpile .vue files and run in a browser like environment.


	"ava": {
		"require": [
// ./test/_setup.cjs

// Set up JSDom.
const jsdomGlobal = require('jsdom-global');

// Fix the Date object, see <>.
window.Date = Date

// Setup browser environment
const hooks = require('require-extension-hooks');
const Vue = require('vue');

// Setup Vue.js to remove production tip
Vue.config.productionTip = false;

// Setup vue files to be processed by `require-extension-hooks-vue`
// Setup vue and js files to be processed by `require-extension-hooks-babel`
hooks(['vue', 'js']).exclude(({filename}) => filename.match(/\/node_modules\//)).plugin('babel').push();

Note: If you are using babel-plugin-webpack-alias-7, you must also exclude your webpack file - e.g. filename.includes(/\/node_modules\//) || filename.includes('webpack.config.test.js')

Sample snapshot test

const test = require('ava');
const Vue = require('vue');
const Component = require('component.vue');

test('renders', t => {
	const vm = new Vue(Component).$mount();
	const tree = {
		$el: vm.$el.outerHTML

Coverage reporting

Follow the coverage reporting recipe, additionally adding the .vue extension to the c8 config to instrument .vue files.

	"c8": {
		"extension": [