Skip to content

Commit 212ec8f

Browse files
committed
Update the README
1 parent 690221b commit 212ec8f

File tree

3 files changed

+48
-60
lines changed

3 files changed

+48
-60
lines changed

README.md

+38-56
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,19 @@
1-
<h1 align="center">
2-
<img src="https://jestjs.io/img/jest.png" height="150" width="150"/>
3-
<p align="center">Jest</p>
4-
<p align="center" style="font-size: 0.5em">🃏 Delightful JavaScript Testing</p>
5-
</h1>
6-
7-
<p align="center">
8-
<a href="https://circleci.com/gh/facebook/jest"><img src="https://circleci.com/gh/facebook/jest.svg?style=shield" alt="CircleCI Build Status"></a>
9-
<a href="https://dev.azure.com/jestjs/jest/_build/latest?definitionId=1?branchName=master"><img src="https://dev.azure.com/jestjs/jest/_apis/build/status/facebook.jest?branchName=master" alt="Azure Pipelines Build Status"></a>
10-
<a href="https://travis-ci.org/facebook/jest"><img src="https://travis-ci.org/facebook/jest.svg?branch=master" alt="Travis Build Status"></a>
11-
<a href="https://ci.appveyor.com/project/Daniel15/jest/branch/master"><img src="https://ci.appveyor.com/api/projects/status/8n38o44k585hhvhd/branch/master?svg=true" alt="Windows Build Status"></a>
12-
<a href="https://codecov.io/gh/facebook/jest"><img src="https://codecov.io/gh/facebook/jest/branch/master/graph/badge.svg" alt="Codecov badge"></a>
13-
<a href="http://badge.fury.io/js/jest"><img src="https://badge.fury.io/js/jest.svg" alt="npm version"></a>
14-
<a href="https://dependabot.com/compatibility-score.html?dependency-name=jest&amp;package-manager=npm_and_yarn&amp;version-scheme=semver"><img src="https://api.dependabot.com/badges/compatibility_score?dependency-name=jest&amp;package-manager=npm_and_yarn&amp;version-scheme=semver" alt="SemVer">
15-
<a href="https://twitter.com/acdlite/status/974390255393505280"><img src="https://img.shields.io/badge/speed-blazing%20%F0%9F%94%A5-brightgreen.svg" alt="Blazing Fast"></a>
16-
</p>
17-
<p align="center">
18-
<a href="#backers"><img src="https://opencollective.com/jest/backers/badge.svg" alt="Backers on Open Collective"></a>
19-
<a href="#sponsors"><img src="https://opencollective.com/jest/sponsors/badge.svg" alt="Sponsors on Open Collective"></a>
20-
<a href="https://github.com/facebook/jest/blob/master/CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs%20-welcome-brightgreen.svg" alt="PR's welcome"></a>
21-
<a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License: MIT"></a>
22-
<a href="https://snyk.io/test/github/facebook/jest?targetFile=packages/jest/package.json"><img src="https://snyk.io/test/github/facebook/jest/badge.svg?targetFile=packages/jest/package.json" alt="Known Vulnerabilities" data-canonical-src="https://snyk.io/test/github/facebook/jest?targetFile=packages/jest/package.json" style="max-width:100%;"></a>
23-
</p>
24-
<p align="center">
25-
<a href="https://twitter.com/intent/follow?screen_name=fbjest"><img src="https://img.shields.io/twitter/follow/fbjest.svg?style=social&label=Follow%20@fbjest" alt="Follow on Twitter"></a>
1+
<p>
2+
<a href="http://badge.fury.io/js/jest"><img src="https://badge.fury.io/js/jest.svg" alt="npm version"></a>
3+
<a href="https://twitter.com/intent/follow?screen_name=fbjest"><img align="right" src="https://img.shields.io/twitter/follow/fbjest.svg?style=social&label=Follow%20@fbjest" alt="Follow on Twitter"></a>
264
</p>
275

28-
**👩🏻‍💻 Developer Ready**: Complete and ready to set-up JavaScript testing solution. Works out of the box for any React project.
6+
<p align="center"><img src="website/static/img/jest-readme-headline.png" height="289" width="700"/></p>
7+
8+
<h1 align="center">🃏 Delightful JavaScript Testing</h1>
299

30-
**🏃🏽 Instant Feedback**: Fast interactive watch mode runs only test files related to changed files and is optimized to give signal quickly.
10+
**👩🏻‍💻 Developer Ready**: A comprehensive JavaScript testing solution. Works out of the box for most JavaScript projects.
3111

32-
**📸 Snapshot Testing**: Capture snapshots of React trees or other serializable values to simplify testing and to analyze how state changes over time.
12+
**🏃🏽 Instant Feedback**: Fast, interactive watch mode only runs test files related to changed files.
13+
14+
**📸 Snapshot Testing**: Capture snapshots of large objects to simplify testing and to analyze how they change over time.
15+
16+
<p align="right"><em>See more on <a href="https://jestjs.io">jestjs.io</a></em></p>
3317

3418
## Getting Started
3519

@@ -119,25 +103,18 @@ To use [Babel](http://babeljs.io/), install required dependencies via `yarn`:
119103
yarn add --dev babel-jest @babel/core @babel/preset-env
120104
```
121105

122-
Configure Babel to target your current version of Node by creating a `babel.config.js` file in the root of your project:
106+
If you do not already have babel configured for your project, you can use Babel to target your current version of Node by creating a `babel.config.js` file in the root of your project:
123107

124108
```javascript
125109
// babel.config.js
126110
module.exports = {
127-
presets: [
128-
[
129-
'@babel/preset-env',
130-
{
131-
targets: {
132-
node: 'current',
133-
},
134-
},
135-
],
136-
],
111+
presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
137112
};
138113
```
139114

140-
**The ideal configuration for Babel will depend on your project.** See [Babel's docs](https://babeljs.io/docs/en/) for more details.
115+
_The ideal configuration for Babel will depend on your project._ See [Babel's docs](https://babeljs.io/docs/en/) for more details.
116+
117+
<details><summary markdown="span"><strong>Making your Babel config jest-aware</strong></summary>
141118

142119
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.
143120

@@ -162,30 +139,35 @@ module.exports = {
162139
};
163140
```
164141

165-
#### Babel 6
166-
167-
Jest 24 dropped support for Babel 6. We highly recommend you to upgrade to Babel 7, which is actively maintained. However, if you cannot upgrade to Babel 7, either keep using Jest 23 or upgrade to Jest 24 with `babel-jest` locked at version 23, like in the example below:
168-
169-
```
170-
"dependencies": {
171-
"babel-core": "^6.26.3",
172-
"babel-jest": "^23.6.0",
173-
"babel-preset-env": "^1.7.0",
174-
"jest": "^24.0.0"
175-
}
176-
```
142+
</details>
177143

178-
While we generally recommend using the same version of every Jest package, this workaround will allow you to continue using the latest version of Jest with Babel 6 for now.
144+
<!-- Note that the Babel 6 section in the Getting Started was removed -->
179145

180146
### Using webpack
181147

182148
Jest can be used in projects that use [webpack](https://webpack.github.io/) to manage assets, styles, and compilation. webpack does offer some unique challenges over other tools. Refer to the [webpack guide](https://jestjs.io/docs/en/webpack) to get started.
183149

184150
### Using TypeScript
185151

186-
Jest supports TypeScript out of the box, via Babel.
152+
Jest supports TypeScript, via Babel. First make sure you followed the instructions on [using Babel](#using-babel) above. Next install the `@babel/preset-typescript` via `yarn`:
153+
154+
```bash
155+
yarn add --dev @babel/preset-typescript
156+
```
157+
158+
Then add `@babel/preset-typescript` to the list of presets in your `babel.config.js`.
159+
160+
```diff
161+
// babel.config.js
162+
module.exports = {
163+
presets: [
164+
['@babel/preset-env', {targets: {node: 'current'}}],
165+
+ '@babel/preset-typescript',
166+
],
167+
};
168+
```
187169

188-
However, there are some caveats to using Typescript with Babel, see http://artsy.github.io/blog/2017/11/27/Babel-7-and-TypeScript/. Another caveat is that Jest will not typecheck your tests. If you want that, you can use [ts-jest](https://github.com/kulshekhar/ts-jest).
170+
Note, there are some [caveats](https://babeljs.io/docs/en/next/babel-plugin-transform-typescript.html#caveats) to using TypeScript with Babel. Because TypeScript support in Babel is just transpilation, Jest will not type-check your tests as they are ran. If you want that, you can use [ts-jest](https://github.com/kulshekhar/ts-jest).
189171

190172
<!-- end copied -->
191173

@@ -200,7 +182,7 @@ Learn more about using [Jest on the official site!](https://jestjs.io)
200182

201183
## Badge
202184

203-
Show the world you're using _Jest_ [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest) [![jest](https://jestjs.io/img/jest-badge.svg)](https://github.com/facebook/jest)
185+
Show the world you're using _Jest_ `` [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest) [![jest](https://jestjs.io/img/jest-badge.svg)](https://github.com/facebook/jest)
204186

205187
```md
206188
[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest) [![jest](https://jestjs.io/img/jest-badge.svg)](https://github.com/facebook/jest)

docs/GettingStarted.md

+10-4
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,8 @@ module.exports = {
107107

108108
**The ideal configuration for Babel will depend on your project.** See [Babel's docs](https://babeljs.io/docs/en/) for more details.
109109

110+
<details><summary markdown="span"><strong>Making your Babel config jest-aware</strong></summary>
111+
110112
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.
111113

112114
```javascript
@@ -130,7 +132,9 @@ module.exports = {
130132
};
131133
```
132134

133-
#### Babel 6
135+
</details>
136+
137+
<details><summary markdown="span"><strong>Babel 6 support</strong></summary>
134138

135139
Jest 24 dropped support for Babel 6. We highly recommend you to upgrade to Babel 7, which is actively maintained. However, if you cannot upgrade to Babel 7, either keep using Jest 23 or upgrade to Jest 24 with `babel-jest` locked at version 23, like in the example below:
136140

@@ -145,6 +149,8 @@ Jest 24 dropped support for Babel 6. We highly recommend you to upgrade to Babel
145149

146150
While we generally recommend using the same version of every Jest package, this workaround will allow you to continue using the latest version of Jest with Babel 6 for now.
147151

152+
</details>
153+
148154
### Using webpack
149155

150156
Jest can be used in projects that use [webpack](https://webpack.github.io/) to manage assets, styles, and compilation. webpack does offer some unique challenges over other tools. Refer to the [webpack guide](Webpack.md) to get started.
@@ -159,14 +165,14 @@ yarn add --dev @babel/preset-typescript
159165

160166
Then add `@babel/preset-typescript` to the list of presets in your `babel.config.js`.
161167

162-
```javascript
168+
```diff
163169
// babel.config.js
164170
module.exports = {
165171
presets: [
166172
['@babel/preset-env', {targets: {node: 'current'}}],
167-
'@babel/preset-typescript',
173+
+ '@babel/preset-typescript',
168174
],
169175
};
170176
```
171177

172-
Note that there are some caveats to using Typescript with Babel, see http://artsy.github.io/blog/2017/11/27/Babel-7-and-TypeScript/. Another caveat is that Jest will not typecheck your tests. If you want that, you can use [ts-jest](https://github.com/kulshekhar/ts-jest).
178+
However, there are some [caveats](https://babeljs.io/docs/en/next/babel-plugin-transform-typescript.html#caveats) to using TypeScript with Babel. Because TypeScript support in Babel is just transpilation, Jest will not type-check your tests as they are ran. If you want that, you can use [ts-jest](https://github.com/kulshekhar/ts-jest).
87.2 KB
Loading

0 commit comments

Comments
 (0)