Add Vue.js recipe

docs/recipes/vue.md

@@ -0,0 +1,72 @@
+# Testing Vue.js components
+
+## Dependencies
+
+- [Require Extension hooks](https://github.com/jackmellis/require-extension-hooks):
+  - `npm i -D require-extension-hooks require-extension-hooks-vue require-extension-hooks-babel`
+
+- [browser-env](browser-testing.md)
+  - `npm i -D 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 configuration to instrument `.vue` files.
+
+```json
+{
+  "nyc": {
+    "extension": [
+      ".js",
+      ".vue"
+    ]
+  }
+}
+```

readme.md

@@ -1158,6 +1158,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)