Permalink
Fetching contributors…
Cannot retrieve contributors at this time
78 lines (58 sloc) 1.67 KB

Testing Vue.js components

Translations: Français

Dependencies

Setup

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

package.json:

{
	"ava": {
		"require": [
			"./test/helpers/setup.js"
		]
	}
}
// ./test/helpers/setup.js

// Setup browser environment
require('browser-env')();
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`
hooks('vue').plugin('vue').push();
// Setup vue and js files to be processed by `require-extension-hooks-babel`
hooks(['vue', 'js']).plugin('babel').push();

You can find more information about setting up Babel with AVA in the Babel recipe.

Sample snapshot test

import test from 'ava';
import Vue from 'vue';
import Component from 'component.vue';

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

Coverage reporting

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

{
	"nyc": {
		"extension": [
			".js",
			".vue"
		]
	}
}