diff --git a/docs/08-common-pitfalls.md b/docs/08-common-pitfalls.md index 5791a92b5..a28f08b39 100644 --- a/docs/08-common-pitfalls.md +++ b/docs/08-common-pitfalls.md @@ -12,7 +12,7 @@ AVA currently only transpiles the tests you ask it to run, as well as test helpe If you use Babel you can use its [require hook](https://babeljs.io/docs/usage/require/) to transpile imported modules on-the-fly. To add it, [configure it in your `package.json`](./06-configuration.md). -You can also transpile your modules in a separate process and refer to the transpiled files rather than the sources from your tests. Example [here](./recipes/precompiling-with-webpack.md). +You can also transpile your modules in a separate process and refer to the transpiled files rather than the sources from your tests. ## AVA in Docker @@ -49,7 +49,7 @@ test('fetches foo', async t => { }); ``` -If you're using callbacks, use [`test.cb`](https://github.com/avajs/ava#callback-support): +If you're using callbacks, use [`test.cb`](./01-writing-tests.md#callback-support): ```js test.cb('fetches foo', t => { diff --git a/docs/recipes/babel.md b/docs/recipes/babel.md index d4cd96c2b..19f1d0966 100644 --- a/docs/recipes/babel.md +++ b/docs/recipes/babel.md @@ -27,7 +27,7 @@ You can override the default Babel configuration AVA uses for test file compilat } ``` -All `.babelrc` options are allowed inside the `testOptions` object. +All [Babel options] are allowed inside the `testOptions` object. ## Reset AVA's cache @@ -60,7 +60,7 @@ See also AVA's [`extensions` option](../06-configuration.md#options). ## Make AVA skip your project's Babel options -You may not want AVA to use your project's Babel options, for example if your project is relying on Babel 6. You can set the `babelrc` option to `false`. +You may not want AVA to use your project's Babel options, for example if your project is relying on Babel 6. Set the `babelrc` and `configFile` options to `false`. **`package.json`:** @@ -69,7 +69,8 @@ You may not want AVA to use your project's Babel options, for example if your pr "ava": { "babel": { "testOptions": { - "babelrc": false + "babelrc": false, + "configFile": false } } } @@ -120,8 +121,6 @@ By default AVA's stage-4 preset will convert ES module syntax to CommonJS. This } ``` -You **must** configure the preset in the `testOptions` in order to preserve the ES module syntax. AVA will still apply the preset if you configure it in other files (for instance a `.babelrc` file). This is [due to a Babel issue](https://github.com/babel/babel/issues/7920). - You'll have to use the [`esm`](https://github.com/standard-things/esm) module so that AVA can still load your test files. [See our recipe for details](./es-modules.md). ## Disable AVA's Babel pipeline @@ -206,3 +205,6 @@ 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. + + +[Babel options]: https://babeljs.io/docs/en/options diff --git a/docs/recipes/flow.md b/docs/recipes/flow.md index d729182c9..0192bce2d 100644 --- a/docs/recipes/flow.md +++ b/docs/recipes/flow.md @@ -41,7 +41,7 @@ test(async (t) => { }); ``` -## Typing [`t.context`](https://github.com/avajs/ava#test-context) +## Typing [`t.context`](../01-writing-tests.md#test-context) By default, the type of `t.context` will be the empty object (`{}`). AVA exposes an interface `TestInterface` which you can use to apply your own type to `t.context`. This can help you catch errors at compile-time: diff --git a/docs/recipes/jspm-systemjs.md b/docs/recipes/jspm-systemjs.md index 31207da5e..fbe71e910 100644 --- a/docs/recipes/jspm-systemjs.md +++ b/docs/recipes/jspm-systemjs.md @@ -10,7 +10,7 @@ This recipe has only been tested with JSPM v0.17.0-beta.22, but it should work w ### Babel -Configure your .babelrc to work with AVA if you have not already. NOTE: You can keep additional configuration in your JSPM config files to override these settings during bundling and building. +Set up your Babel options to work with AVA if you have not already. NOTE: You can keep additional configuration in your JSPM config files to override these settings during bundling and building. ``` $ npm install --save-dev @babel/preset-env diff --git a/docs/recipes/precompiling-with-webpack.md b/docs/recipes/precompiling-with-webpack.md deleted file mode 100644 index b86a55a0f..000000000 --- a/docs/recipes/precompiling-with-webpack.md +++ /dev/null @@ -1,274 +0,0 @@ -## Precompiling source files with webpack - -Translations: [Français](https://github.com/avajs/ava-docs/blob/master/fr_FR/docs/recipes/precompiling-with-webpack.md) - -The AVA [readme](https://github.com/avajs/ava#transpiling-imported-modules) mentions precompiling your imported modules as an alternative to runtime compilation, but it doesn't explain how. This recipe discusses several approaches using webpack v2. Multiple approaches are discussed as each has its own pros and cons. You should select the approach that best fits your use case. See the original discussion [here](https://github.com/avajs/ava/pull/1385). - -- [Single test file](#single-test-file) -- [Multiple test files](#multiple-test-files) - -### Single test file - -This is the simplest use case. You might need this if you are [using aliases](https://github.com/avajs/ava/issues/1011). - -###### `webpack.config.js` - -```js -const path = require('path'); -const nodeExternals = require('webpack-node-externals'); - -module.exports = { - entry: ['test.js'], - target: 'node', - output: { - path: path.resolve(__dirname, '_build'), - filename: 'test.js' - }, - externals: [nodeExternals()], - module: { - rules: [ - { - test: /\.(js|jsx)$/, - use: 'babel-loader', - options: { - cacheDirectory: true - } - } - ] - } -}; -``` - -The important bits are `target: 'node'`, which ignores Node.js-specific `require`s (e.g. `fs`, `path`, etc.) and `externals: nodeModules` which prevents webpack from trying to bundle external Node.js modules which it may choke on. - -You can now run `$ npx ava _build/test.js` to run the tests contained in this output. - -### Multiple test files - -Things are a little more complicated with multiple test files. We recommend [using `@babel/register`](babel.md##compile-sources) until the performance penalty becomes too great. - -The possible approaches are: - -- [Refer precompiled source in tests](#refer-precompiled-source-in-tests) -- [Single entry file](#single-entry-file) -- [Multiple entry files](#multiple-entry-files) -- [Test against precompiled sources](#test-against-precompiled-sources) - -#### Refer precompiled source in tests - -Source files can be compiled to `_src` folder and referenced in tests. While this is less than elegant, it performs well and the workflow can be optimized with [`babel-cli` watch mode](https://babeljs.io/docs/usage/cli/#babel). - -```js -// Before -import fresh from '../src'; -// After -import fresh from '../_src'; -``` - -#### Single entry file - -Multiple test files can be compiled into a single file. This may have the best performance, but it does come at a cost. All tests will be in the same file, which can make it harder to know which test has failed, since AVA can't show the file name the test was originally in. You'll also lose [process isolation](https://github.com/avajs/ava#process-isolation). - -###### `webpack.config.js` - -[Related Stack Overflow answer](http://stackoverflow.com/questions/32874025/how-to-add-wildcard-mapping-in-entry-of-webpack/34545812#34545812) - -```js -const path = require('path'); -const glob = require('glob'); -const nodeExternals = require('webpack-node-externals'); - -module.exports = { - target: 'node', - entry: glob.sync('./test/**/*.js'), - output: { - path: path.resolve(__dirname, '_build'), - filename: 'tests.js' - }, - externals: [nodeExternals()], - module: { - rules: [ - { - test: /\.(js|jsx)$/, - use: { - loader: 'babel-loader', - options: { - cacheDirectory: true - } - } - } - ] - } -}; -``` - -
-Error report comparison - -``` -# Before - aggregations-test » cardinality-agg » sets precision_threshold option - E:\Projects\repos\elastic-builder\test\_macros.js:167 - - 166: const expected = getExpected(keyName, recursiveToJSON(propValue)); - 167: t.deepEqual(value, expected); - 168: } - - Difference: - - Object { - my_agg: Object { - cardinality: Object { - - precision_threshol: 5000, - + precision_threshold: 5000, - }, - }, - } - -# After - sets precision_threshold option - E:\Projects\repos\elastic-builder\_build\tests.js:106 - - 105: column: 21 - 106: } - 107: }, - - Difference: - - Object { - my_agg: Object { - cardinality: Object { - - precision_threshol: 5000, - + precision_threshold: 5000, - }, - }, - } - -``` -
- -#### Multiple entry files - -We can ask webpack to generate multiple entry files. This helps retain file names so that error reports are easy to interpret. But each entry file gets its own copy of the source files. This results in considerably larger file sizes. This can [perform quite poorly](https://github.com/avajs/ava/pull/1385#issuecomment-304684047) on the first execution. - -###### `webpack.config.js` - -```js -const path = require('path'); -const glob = require('glob'); -const nodeExternals = require('webpack-node-externals'); - -const entryObj = glob.sync('./test/**/*.js') - .reduce((acc, file) => { - acc[path.basename(file, path.extname(file))] = file; - return acc; - }, {}); - -module.exports = { - target: 'node', - entry: entryObj, - output: { - path: path.resolve(__dirname, '_build'), - filename: '[name].js' - }, - externals: [nodeExternals()], - module: { - rules: [ - { - test: /\.(js|jsx)$/, - use: { - loader: 'babel-loader', - options: { - cacheDirectory: true - } - } - } - ] - } -}; -``` - -#### Test against precompiled sources - -This is the most complicated to setup but performs quite well and also retains file names. In this approach, we use the `babel-cli` to compile the source files but preserve file structure. Require paths in tests are rewritten when compiling them in webpack. The following example is for a specific file structure. Depending on how your source and test files are organised, you might need to make changes. - -File structure: - -``` -├───src -│ ├───my-pkg-fldr -│ │ ├───my-module.js -│ │ └───index.js -│ └───index.js -└───test - ├───my-pkg-fldr - │ └───my-module.test.js - └───index.test.js - -# Generated file structure -├───_src -│ ├───my-pkg-fldr -│ │ ├───my-module.js -│ │ └───index.js -│ └───index.js -└───_build - ├───my-module.test.js - └───index.test.js -``` - -npm scripts: - -```js -{ - "scripts": { - "precompile-src": "cross-env NODE_ENV=test babel src --out-dir _src", - "precompile-tests": "cross-env NODE_ENV=test webpack --config webpack.config.js", - "pretest": "npm run precompile-src && npm run precompile-tests", - "test": "cross-env NODE_ENV=test nyc --cache ava _build" - } -} -``` - -###### `webpack.config.js` - -[Webpack `externals` docs](https://webpack.js.org/configuration/externals/#function) - -```js -const path = require('path'); -const glob = require('glob'); -const nodeExternals = require('webpack-node-externals'); - -const entryObj = glob.sync('./test/**/*.js') - .reduce((acc, file) => { - acc[path.basename(file, path.extname(file))] = file; - return acc; - }, {}); - -module.exports = { - target: 'node', - entry: entryObj, - output: { - path: path.resolve(__dirname, '_build'), - filename: '[name].js' - }, - externals: [ - nodeExternals(), - // Rewrite the require paths to use `_src` - (context, request, callback) => { - // This is a little messy because tests are not output in original file structure - // test/index.test.js → _build/index.test.js - //=> ../src → ../_src - // test/my-pkg-fldr/my-module.test.js → _build/my-module.test.js - //=> ../../src → ../_src - if (request.includes('/src')) { - const requestReqwrite = request - .replace('/src', '/_src') - .replace('../../_src', '../_src'); - return callback(null, `commonjs ${requestReqwrite}`); - } - - callback(); - } - ] -}; -``` diff --git a/docs/recipes/typescript.md b/docs/recipes/typescript.md index b6b20e83e..0642f8bef 100644 --- a/docs/recipes/typescript.md +++ b/docs/recipes/typescript.md @@ -56,7 +56,7 @@ test(async t => { }); ``` -## Using [macros](https://github.com/avajs/ava#test-macros) +## Using [macros](../01-writing-tests.md#reusing-test-logic-through-macros) In order to be able to assign the `title` property to a macro you need to type the function: @@ -86,7 +86,7 @@ const macro: CbMacro = t => { test.cb(macro); ``` -## Typing [`t.context`](https://github.com/avajs/ava#test-context) +## Typing [`t.context`](../01-writing-tests.md#test-context) By default, the type of `t.context` will be the empty object (`{}`). AVA exposes an interface `TestInterface` which you can use to apply your own type to `t.context`. This can help you catch errors at compile-time: diff --git a/docs/recipes/watch-mode.md b/docs/recipes/watch-mode.md index a969e08db..2c97d0519 100644 --- a/docs/recipes/watch-mode.md +++ b/docs/recipes/watch-mode.md @@ -119,5 +119,5 @@ Watch mode is relatively new and there might be some rough edges. Please [report [`chokidar`]: https://github.com/paulmillr/chokidar [Install Troubleshooting]: https://github.com/paulmillr/chokidar#install-troubleshooting [`ignore-by-default`]: https://github.com/novemberborn/ignore-by-default -[`.only` modifier]: https://github.com/avajs/ava#running-specific-tests -[config]: https://github.com/avajs/ava#configuration +[`.only` modifier]: ../01-writing-tests.md#running-specific-tests +[config]: ../06-configuration.md diff --git a/readme.md b/readme.md index f9b3f00e5..f52e6fe6c 100644 --- a/readme.md +++ b/readme.md @@ -172,7 +172,6 @@ We have a growing list of [common pitfalls](docs/08-common-pitfalls.md) you may - [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) -- [Precompiling source files with webpack](docs/recipes/precompiling-with-webpack.md) - [Isolated MongoDB integration tests](docs/recipes/isolated-mongodb-integration-tests.md) - [Testing web apps using Puppeteer](docs/recipes/puppeteer.md)