diff --git a/CHANGELOG.md b/CHANGELOG.md index 957ba423d82c..57758e6de245 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ ### Chore & Maintenance - `[website]` Fix broken help link on homepage ([#7706](https://github.com/facebook/jest/pull/7706)) +- `[docs]` Changed Babel setup documentation to correctly compile `async/await` ([#7701](https://github.com/facebook/jest/pull/7701)) ### Performance diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md index 74fce98a586d..bcee34e1d4f3 100644 --- a/docs/GettingStarted.md +++ b/docs/GettingStarted.md @@ -81,31 +81,51 @@ jest --init ### Using Babel -To use [Babel](http://babeljs.io/), install the `babel-jest` and `@babel/core` packages via `yarn`: +To use [Babel](http://babeljs.io/), install required dependencies via `yarn`: ```bash -yarn add --dev babel-jest @babel/core +yarn add --dev babel-jest @babel/core @babel/preset-env ``` -Don't forget to add a [`babel.config.js`](https://babeljs.io/docs/en/config-files) file in your project's root folder. For example, if you are using ES2018 and [React](https://reactjs.org) with the [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) and [`@babel/preset-react`](https://babeljs.io/docs/en/babel-preset-react) presets: +Configure Babel to target your current version of Node by creating a `babel.config.js` file in the root of your project: -```js +```javascript +// babel.config.js module.exports = { - presets: ['@babel/preset-env', '@babel/preset-react'], + presets: [ + [ + '@babel/preset-env', + { + targets: { + node: 'current', + }, + }, + ], + ], }; ``` -You are now set up to use all ES2018 features and React-specific syntax. +**The ideal configuration for Babel will depend on your project.** See [Babel's docs](https://babeljs.io/docs/en/) for more details. + +Jest will set `process.env.NODE_ENV` to `'test'` if it's not set to something else. You can use that in your configuration to conditionally setup only the compilation needed for Jest, e.g. + +```javascript +// babel.config.js +module.exports = api => { + const isTest = api.env('test'); + // You can use isTest to determine what presets and plugins to use. + + return ... +}; +``` > Note: `babel-jest` is automatically installed when installing Jest and will automatically transform files if a babel configuration exists in your project. To avoid this behavior, you can explicitly reset the `transform` configuration option: -```json -// package.json -{ - "jest": { - "transform": {} - } -} +```javascript +// jest.config.js +module.exports = { + transform: {}, +}; ``` #### Babel 6 diff --git a/website/versioned_docs/version-24.0/GettingStarted.md b/website/versioned_docs/version-24.0/GettingStarted.md index 7add3262401f..272dac70167a 100644 --- a/website/versioned_docs/version-24.0/GettingStarted.md +++ b/website/versioned_docs/version-24.0/GettingStarted.md @@ -82,31 +82,51 @@ jest --init ### Using Babel -To use [Babel](http://babeljs.io/), install the `babel-jest` and `@babel/core` packages via `yarn`: +To use [Babel](http://babeljs.io/), install required dependencies via `yarn`: ```bash -yarn add --dev babel-jest @babel/core +yarn add --dev babel-jest @babel/core @babel/preset-env ``` -Don't forget to add a [`babel.config.js`](https://babeljs.io/docs/en/config-files) file in your project's root folder. For example, if you are using ES2018 and [React](https://reactjs.org) with the [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) and [`@babel/preset-react`](https://babeljs.io/docs/en/babel-preset-react) presets: +Configure Babel to target your current version of Node by creating a `babel.config.js` file in the root of your project: -```js +```javascript +// babel.config.js module.exports = { - presets: ['@babel/preset-env', '@babel/preset-react'], + presets: [ + [ + '@babel/preset-env', + { + targets: { + node: 'current', + }, + }, + ], + ], }; ``` -You are now set up to use all ES2018 features and React-specific syntax. +**The ideal configuration for Babel will depend on your project.** See [Babel's docs](https://babeljs.io/docs/en/) for more details. + +Jest will set `process.env.NODE_ENV` to `'test'` if it's not set to something else. You can use that in your configuration to conditionally setup only the compilation needed for Jest, e.g. + +```javascript +// babel.config.js +module.exports = api => { + const isTest = api.env('test'); + // You can use isTest to determine what presets and plugins to use. + + return ... +}; +``` > Note: `babel-jest` is automatically installed when installing Jest and will automatically transform files if a babel configuration exists in your project. To avoid this behavior, you can explicitly reset the `transform` configuration option: -```json -// package.json -{ - "jest": { - "transform": {} - } -} +```javascript +// jest.config.js +module.exports = { + transform: {}, +}; ``` #### Babel 6