Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: setting up babel, fixes regeneratorRuntime not defined #7701

Merged
merged 11 commits into from
Jan 26, 2019
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After merging in master, please move up to correct section


### Performance

Expand Down
30 changes: 22 additions & 8 deletions docs/GettingStarted.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,21 +81,35 @@ 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
SimenB marked this conversation as resolved.
Show resolved Hide resolved
```

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`:
SimenB marked this conversation as resolved.
Show resolved Hide resolved

```js
module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react'],
};
```bash
yarn add @babel/polyfill
```

You are now set up to use all ES2018 features and React-specific syntax.
Load the polyfill and configure Babel in your `package.json` file:
SimenB marked this conversation as resolved.
Show resolved Hide resolved

```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.

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:

Expand Down