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 @@ -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

Expand Down
46 changes: 33 additions & 13 deletions docs/GettingStarted.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
DylanVann marked this conversation as resolved.
Show resolved Hide resolved
// jest.config.js
module.exports = {
transform: {},
};
```

#### Babel 6
Expand Down
46 changes: 33 additions & 13 deletions website/versioned_docs/version-24.0/GettingStarted.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down