diff --git a/README.md b/README.md index b4b1905e15cd..b76d24331b84 100644 --- a/README.md +++ b/README.md @@ -1,35 +1,19 @@ -

- -

Jest

-

🃏 Delightful JavaScript Testing

-

- -

- CircleCI Build Status - Azure Pipelines Build Status - Travis Build Status - Windows Build Status - Codecov badge - npm version - SemVer - Blazing Fast -

-

- Backers on Open Collective - Sponsors on Open Collective - PR's welcome - License: MIT - Known Vulnerabilities -

-

- Follow on Twitter +

+ npm version + Follow on Twitter

-**👩🏻‍💻 Developer Ready**: Complete and ready to set-up JavaScript testing solution. Works out of the box for any React project. +

+ +

🃏 Delightful JavaScript Testing

+ +**👩🏻‍💻 Developer Ready**: A comprehensive JavaScript testing solution. Works out of the box for most JavaScript projects. -**🏃🏽 Instant Feedback**: Fast interactive watch mode runs only test files related to changed files and is optimized to give signal quickly. +**🏃🏽 Instant Feedback**: Fast, interactive watch mode only runs test files related to changed files. -**📸 Snapshot Testing**: Capture snapshots of React trees or other serializable values to simplify testing and to analyze how state changes over time. +**📸 Snapshot Testing**: Capture snapshots of large objects to simplify testing and to analyze how they change over time. + +

See more on jestjs.io

## Getting Started @@ -119,25 +103,18 @@ To use [Babel](http://babeljs.io/), install required dependencies via `yarn`: 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: +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: ```javascript // babel.config.js module.exports = { - presets: [ - [ - '@babel/preset-env', - { - targets: { - node: 'current', - }, - }, - ], - ], + presets: [['@babel/preset-env', {targets: {node: 'current'}}]], }; ``` -**The ideal configuration for Babel will depend on your project.** See [Babel's docs](https://babeljs.io/docs/en/) 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. + +
Making your Babel config jest-aware 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. @@ -162,20 +139,7 @@ module.exports = { }; ``` -#### Babel 6 - -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: - -``` -"dependencies": { - "babel-core": "^6.26.3", - "babel-jest": "^23.6.0", - "babel-preset-env": "^1.7.0", - "jest": "^24.0.0" -} -``` - -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. + ### Using webpack @@ -183,9 +147,25 @@ Jest can be used in projects that use [webpack](https://webpack.github.io/) to m ### Using TypeScript -Jest supports TypeScript out of the box, via Babel. +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`: + +```bash +yarn add --dev @babel/preset-typescript +``` + +Then add `@babel/preset-typescript` to the list of presets in your `babel.config.js`. + +```diff +// babel.config.js +module.exports = { + presets: [ + ['@babel/preset-env', {targets: {node: 'current'}}], ++ '@babel/preset-typescript', + ], +}; +``` -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). +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). @@ -200,7 +180,7 @@ Learn more about using [Jest on the official site!](https://jestjs.io) ## Badge -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) +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) ```md [![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) diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md index 2da889c273a8..588f6a5ccc10 100644 --- a/docs/GettingStarted.md +++ b/docs/GettingStarted.md @@ -107,6 +107,8 @@ module.exports = { **The ideal configuration for Babel will depend on your project.** See [Babel's docs](https://babeljs.io/docs/en/) for more details. +
Making your Babel config jest-aware + 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 @@ -130,7 +132,9 @@ module.exports = { }; ``` -#### Babel 6 +
+ +
Babel 6 support 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: @@ -145,6 +149,8 @@ Jest 24 dropped support for Babel 6. We highly recommend you to upgrade to Babel 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. +
+ ### Using webpack 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 Then add `@babel/preset-typescript` to the list of presets in your `babel.config.js`. -```javascript +```diff // babel.config.js module.exports = { presets: [ ['@babel/preset-env', {targets: {node: 'current'}}], - '@babel/preset-typescript', ++ '@babel/preset-typescript', ], }; ``` -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). +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). diff --git a/website/static/img/jest-readme-headline.png b/website/static/img/jest-readme-headline.png new file mode 100644 index 000000000000..f3d543f8a203 Binary files /dev/null and b/website/static/img/jest-readme-headline.png differ