Skip to content

Commit

Permalink
Improve Babel and Vue recipes
Browse files Browse the repository at this point in the history
- Add webpack alias section to Babel and Vue recipes
- Add exclusion of `node_modules` to `require-extension-hooks` in Vue recipe
  • Loading branch information
pearofducks authored and novemberborn committed Jan 11, 2019
1 parent dc552bc commit c3bcbf2
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 2 deletions.
26 changes: 26 additions & 0 deletions docs/recipes/babel.md
Expand Up @@ -206,5 +206,31 @@ Now instead of requiring `@babel/register`, require `test/_register` instead.

Note that loading `@babel/register` in every worker process has a non-trivial performance cost. If you have lots of test files, you may want to consider using a build step to compile your sources *before* running your tests. This isn't ideal, since it complicates using AVA's watch mode, so we recommend using `@babel/register` until the performance penalty becomes too great. Setting up a precompilation step is out of scope for this document, but we recommend you check out one of the many [build systems that support Babel](http://babeljs.io/docs/setup/). There is an [issue](https://github.com/avajs/ava/issues/577) discussing ways we could make this experience better.

## Webpack aliases

[Webpack aliases](https://webpack.js.org/configuration/resolve/#resolve-alias) can be used to provide a shortcut to deeply nested or otherwise inconvenient paths. If you already use aliases in your source files, you'll need to make sure you can use the same aliases in your test files.

Install `babel-plugin-webpack-alias-7` as a dev-dependency. Then add the plugin to AVA's Babel config:

`package.json`:

```json
{
"ava": {
"babel": {
"testOptions": {
"plugins": [
[
"babel-plugin-webpack-alias-7",
{
"config": "./path/to/webpack.config.test.js"
}
]
]
}
}
}
}
```

[Babel options]: https://babeljs.io/docs/en/options
9 changes: 7 additions & 2 deletions docs/recipes/vue.md
Expand Up @@ -5,11 +5,14 @@ Translations: [Fran莽ais](https://github.com/avajs/ava-docs/blob/master/fr_FR/do
## 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`
- `npm i --save-dev require-extension-hooks require-extension-hooks-vue require-extension-hooks-babel@beta`

- [browser-env](browser-testing.md)
- `npm i --save-dev browser-env`

- Optional: [babel-plugin-webpack-alias-7](https://github.com/shortminds/babel-plugin-webpack-alias-7) if you want to use [webpack aliases](https://webpack.js.org/configuration/resolve/#resolve-alias) or use them in your source files
- `npm i --save-dev babel-plugin-webpack-alias-7`

## Setup

The first step is setting up a helper to configure the environment to transpile `.vue` files and run in a browser like environment.
Expand Down Expand Up @@ -40,9 +43,11 @@ 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();
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')`

You can find more information about setting up Babel with AVA in the [Babel recipe](babel.md).

## Sample snapshot test
Expand Down

0 comments on commit c3bcbf2

Please sign in to comment.