Add Vue.js recipe (#1361)

docs/recipes/vue.md

@@ -0,0 +1,74 @@
+# Testing Vue.js components
+
+## Dependencies
+
+- [Require extension hooks](https://github.com/jackmellis/require-extension-hooks):
+	- `npm i --save-dev require-extension-hooks require-extension-hooks-vue require-extension-hooks-babel`
+
+- [browser-env](browser-testing.md)
+	- `npm i --save-dev browser-env`
+
+## Setup
+
+The first step is setting up a helper to configure the environment to transpile `.vue` files and run in a browser like environment:
+
+```json
+{
+	"ava": {
+		"babel": "inherit",
+		"require": [
+			"./test/helpers/setup.js"
+		]
+	}
+}
+```
+
+```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 [babelrc recipe](babelrc.md).
+
+## Sample snapshot test
+
+```js
+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](code-coverage.md), additionally adding the `.vue` extension to the `nyc` config to instrument `.vue` files.
+
+```json
+{
+	"nyc": {
+		"extension": [
+			".js",
+			".vue"
+		]
+	}
+}
+```

readme.md

@@ -1159,6 +1159,7 @@ It's the [Andromeda galaxy](https://simple.wikipedia.org/wiki/Andromeda_galaxy).
 - [TypeScript](docs/recipes/typescript.md)
 - [Configuring Babel](docs/recipes/babelrc.md)
 - [Testing React components](docs/recipes/react.md)
+- [Testing Vue.js components](docs/recipes/vue.md)
 - [JSPM and SystemJS](docs/recipes/jspm-systemjs.md)
 - [Debugging tests with Chrome DevTools](docs/recipes/debugging-with-chrome-devtools.md)
 - [Debugging tests with WebStorm](docs/recipes/debugging-with-webstorm.md)