From 423d7ce67ef9e8bc84ad589e8affa0d2bf2772de Mon Sep 17 00:00:00 2001 From: Dylan Vann Date: Thu, 24 Jan 2019 09:19:38 -0500 Subject: [PATCH 1/9] docs: setting up babel, fixes regeneratorRuntime not defined --- docs/GettingStarted.md | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md index 74fce98a586d..2b57f07964a7 100644 --- a/docs/GettingStarted.md +++ b/docs/GettingStarted.md @@ -81,13 +81,32 @@ 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 development dependencies via `yarn`: ```bash -yarn add --dev babel-jest @babel/core +yarn add --dev @babel/core @babel/preset-env @babel/preset-react ``` -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: +Install `@babel/polyfill`: + +```bash +yarn add @babel/polyfill +``` + +Load the polyfill in your Jest configuration: + +```json +// package.json +{ + "jest": { + "setupFiles": ["@babel/polyfill"] + } +} +``` + +You should also import `@babel/polyfill` in your app. If you are creating a library you should look into using [`@babel/plugin-transform-runtime`](https://babeljs.io/docs/en/babel-plugin-transform-runtime) instead. + +Create a [`babel.config.js`](https://babeljs.io/docs/en/config-files) file in your project's root folder: ```js module.exports = { @@ -95,7 +114,7 @@ module.exports = { }; ``` -You are now set up to use all ES2018 features and React-specific syntax. +You are now set up to use all ES2018 features and [React](https://reactjs.org) specific syntax. If you are not using React you can exclude `@babel/preset-react` from the above commands/config. > 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: From 6b00aee35c3b4c35e77ad14a6e90a489c9b5fe0e Mon Sep 17 00:00:00 2001 From: Dylan Vann Date: Thu, 24 Jan 2019 21:32:38 -0500 Subject: [PATCH 2/9] docs: setting up babel, update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d07069ad3cd8..861f9ff33deb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -171,6 +171,7 @@ - `[diff-sequences]` Add performance benchmark to package ([#7603](https://github.com/facebook/jest/pull/7603)) - `[*]` Replace as many `Object.assign` with object spread as possible ([#7627](https://github.com/facebook/jest/pull/7627)) - `[ci]` Initial support for Azure Pipelines ([#7556](https://github.com/facebook/jest/pull/7556)) +- `[docs]` Changed Babel setup documentation to fix `async/await` ([#7701](https://github.com/facebook/jest/pull/7701)) ### Performance From ff324e59cdd92e88aba91eb4a6fcb79d69b05ca9 Mon Sep 17 00:00:00 2001 From: Dylan Vann Date: Thu, 24 Jan 2019 21:51:44 -0500 Subject: [PATCH 3/9] docs: setting up babel, use package.json instead --- docs/GettingStarted.md | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md index 2b57f07964a7..a9c61d53b1e2 100644 --- a/docs/GettingStarted.md +++ b/docs/GettingStarted.md @@ -93,27 +93,22 @@ Install `@babel/polyfill`: yarn add @babel/polyfill ``` -Load the polyfill in your Jest configuration: +Load the polyfill and configure Babel in your `package.json` file: ```json // package.json { "jest": { "setupFiles": ["@babel/polyfill"] + }, + "babel": { + "presets": ["@babel/preset-env", "@babel/preset-react"] } } ``` You should also import `@babel/polyfill` in your app. If you are creating a library you should look into using [`@babel/plugin-transform-runtime`](https://babeljs.io/docs/en/babel-plugin-transform-runtime) instead. -Create a [`babel.config.js`](https://babeljs.io/docs/en/config-files) file in your project's root folder: - -```js -module.exports = { - presets: ['@babel/preset-env', '@babel/preset-react'], -}; -``` - You are now set up to use all ES2018 features and [React](https://reactjs.org) specific syntax. If you are not using React you can exclude `@babel/preset-react` from the above commands/config. > 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: From 2dde2ff8f3a41b6651ca9149a7e6d48512aad48f Mon Sep 17 00:00:00 2001 From: Dylan Vann Date: Fri, 25 Jan 2019 05:46:16 -0500 Subject: [PATCH 4/9] docs: setting up babel, use node target --- docs/GettingStarted.md | 72 +++++++++++++++++++++++++++--------------- 1 file changed, 46 insertions(+), 26 deletions(-) diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md index a9c61d53b1e2..404b3a8c4908 100644 --- a/docs/GettingStarted.md +++ b/docs/GettingStarted.md @@ -81,45 +81,65 @@ jest --init ### Using Babel -To use [Babel](http://babeljs.io/), install required development dependencies via `yarn`: +To use [Babel](http://babeljs.io/), install required dependencies via `yarn`: ```bash -yarn add --dev @babel/core @babel/preset-env @babel/preset-react +yarn add --dev babel-jest @babel/core @babel/preset-env @babel/preset-react ``` -Install `@babel/polyfill`: +Configure Babel to target your current version of Node by creating a `babel.config.js` file in the root of your project: -```bash -yarn add @babel/polyfill +```javascript +// babel.config.js +module.exports = { + presets: [ + [ + '@babel/preset-env', + { + targets: { + node: 'current', + }, + }, + ], + '@babel/preset-react + ], +}; ``` -Load the polyfill and configure Babel in your `package.json` file: +If you are not using React you can exclude `@babel/preset-react` from the above commands/config. -```json -// package.json -{ - "jest": { - "setupFiles": ["@babel/polyfill"] - }, - "babel": { - "presets": ["@babel/preset-env", "@babel/preset-react"] - } -} -``` +The ideal configuration for Babel will depend on your project. See [Babel's docs](https://babeljs.io/docs/en/babel-preset-env) for more details. -You should also import `@babel/polyfill` in your app. If you are creating a library you should look into using [`@babel/plugin-transform-runtime`](https://babeljs.io/docs/en/babel-plugin-transform-runtime) instead. +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. -You are now set up to use all ES2018 features and [React](https://reactjs.org) specific syntax. If you are not using React you can exclude `@babel/preset-react` from the above commands/config. +```javascript +// babel.config.js +module.exports = + process.env.NODE_ENV === 'test' + ? { + presets: [ + [ + '@babel/preset-env', + { + targets: { + node: 'current', + }, + }, + ], + ], + } + : { + // Configuration needed for production. + }; +``` > 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 From 3dd2cbb92178bdbe774bed4561854b9ff2332c9f Mon Sep 17 00:00:00 2001 From: Dylan Vann Date: Fri, 25 Jan 2019 05:47:23 -0500 Subject: [PATCH 5/9] docs: setting up babel, a character --- docs/GettingStarted.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md index 404b3a8c4908..722ff0f04d49 100644 --- a/docs/GettingStarted.md +++ b/docs/GettingStarted.md @@ -101,7 +101,7 @@ module.exports = { }, }, ], - '@babel/preset-react + '@babel/preset-react', ], }; ``` From d36ac7d445a9913e0ba3c5a4214db154568f7ffa Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Fri, 25 Jan 2019 09:05:11 -0500 Subject: [PATCH 6/9] docs: setting up babel, `test` Co-Authored-By: DylanVann --- docs/GettingStarted.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md index 722ff0f04d49..698e97fe4955 100644 --- a/docs/GettingStarted.md +++ b/docs/GettingStarted.md @@ -110,7 +110,7 @@ If you are not using React you can exclude `@babel/preset-react` from the above The ideal configuration for Babel will depend on your project. See [Babel's docs](https://babeljs.io/docs/en/babel-preset-env) 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. +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 From 5625f38a9d581524c22c2af1c7999b506150a7d6 Mon Sep 17 00:00:00 2001 From: Dylan Vann Date: Fri, 25 Jan 2019 10:45:22 -0500 Subject: [PATCH 7/9] docs: simplify instructions --- docs/GettingStarted.md | 30 ++++++++---------------------- 1 file changed, 8 insertions(+), 22 deletions(-) diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md index 698e97fe4955..bcee34e1d4f3 100644 --- a/docs/GettingStarted.md +++ b/docs/GettingStarted.md @@ -84,7 +84,7 @@ jest --init To use [Babel](http://babeljs.io/), install required dependencies via `yarn`: ```bash -yarn add --dev babel-jest @babel/core @babel/preset-env @babel/preset-react +yarn add --dev babel-jest @babel/core @babel/preset-env ``` Configure Babel to target your current version of Node by creating a `babel.config.js` file in the root of your project: @@ -101,36 +101,22 @@ module.exports = { }, }, ], - '@babel/preset-react', ], }; ``` -If you are not using React you can exclude `@babel/preset-react` from the above commands/config. - -The ideal configuration for Babel will depend on your project. See [Babel's docs](https://babeljs.io/docs/en/babel-preset-env) for more details. +**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 = - process.env.NODE_ENV === 'test' - ? { - presets: [ - [ - '@babel/preset-env', - { - targets: { - node: 'current', - }, - }, - ], - ], - } - : { - // Configuration needed for production. - }; +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: From 845773a3f96a9d8a92d73c64c4a6e6c3114fd710 Mon Sep 17 00:00:00 2001 From: Dylan Vann Date: Sat, 26 Jan 2019 15:48:23 -0500 Subject: [PATCH 8/9] docs: update versioned docs --- .../version-24.0/GettingStarted.md | 46 +++++++++++++------ 1 file changed, 33 insertions(+), 13 deletions(-) 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 From aaaf4124cc2312a90ff7651d200e4d3ad626ee09 Mon Sep 17 00:00:00 2001 From: Dylan Vann Date: Sat, 26 Jan 2019 16:05:54 -0500 Subject: [PATCH 9/9] docs: move changelog entry --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6bf4d222da3d..833f41ae1bf4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,8 @@ ### Chore & Maintenance +- `[docs]` Changed Babel setup documentation to correctly compile `async/await` ([#7701](https://github.com/facebook/jest/pull/7701)) + ### Performance ## 24.0.0 @@ -184,7 +186,6 @@ - `[diff-sequences]` Add performance benchmark to package ([#7603](https://github.com/facebook/jest/pull/7603)) - `[*]` Replace as many `Object.assign` with object spread as possible ([#7627](https://github.com/facebook/jest/pull/7627)) - `[ci]` Initial support for Azure Pipelines ([#7556](https://github.com/facebook/jest/pull/7556)) -- `[docs]` Changed Babel setup documentation to fix `async/await` ([#7701](https://github.com/facebook/jest/pull/7701)) ### Performance