Skip to content
Permalink
main
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

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/_setup.js"
		]
	}
}
// ./test/_setup.cjs

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

// Fix the Date object, see <https://github.com/vuejs/vue-test-utils/issues/936#issuecomment-415386167>.
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`
hooks('vue').plugin('vue').push();
// 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
	};
	t.snapshot(tree);
});

Coverage reporting

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

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