Skip to content
Go to file
Cannot retrieve contributors at this time
87 lines (64 sloc) 2.41 KB

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.js

// Set up JSDom.

// 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')

You can find more information about setting up Babel with AVA in @ava/babel.

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 nyc config to instrument .vue files.

	"nyc": {
		"extension": [
You can’t perform that action at this time.