vue.md

---

Nota del traduttore

Questa è la traduzione del file vue.md. Qui c'è il link dove si confrontano le differenze tra commit di riferimento di questa traduzione e l'ultimo commit di AVA sul branch master (Se si clicca sul link, e non si vede il file vue.md nella lista dei file modificati, questa traduzione è aggiornata).

---

Testare componenti Vue.js

Traduzioni: Français, Italiano

Dipendenze

• Estensione per gli hook require:

  • npm i --save-dev require-extension-hooks require-extension-hooks-vue require-extension-hooks-babel

• browser-env

  • npm i --save-dev browser-env

Setup

Il primo passo consiste nell'impostare un helper per configurare l'ambiente per la traspilazione dei file .vue e la simulazione di un ambiente browser:

{
	"ava": {
		"babel": "inherit",
		"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();

Puoi trovare maggiori informazioni su come configurare Babel con AVA nella ricetta babelrc.

Snapshot test semplice

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);
});

Report di code coverage

Come primo passo segui la ricetta [code coverage] Follow the coverage reporting recipe, poi aggiungi l'estensione .vue alla configurazione di nyc per instrumentare i file .vue.

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