Revamped Jest Docs and Website

New look and feel. Updated all tutorials, docs, guides with latest best practices.

* Cleaned up API Reference docs (jestjs#2422)
* Reorganized Sidebar Navigation
* New Introduction Section (jestjs#2425)
* Simplified Getting Started introduction
* Break up API Reference into multiple docs, separate from Guides (jestjs#2388)
* Support is now Help (jestjs#2370)
* Add "Snapshot Testing", "Testing Asynchronous Code" & "Setup and Teardown" docs (jestjs#2419, jestjs#2406)
* Create Jest user showcase (jestjs#2369)
* New blog post announcing refreshed documentation (jestjs#2522)
* Truncate blog posts in blog index
* New homepage hero (jestjs#2662)
* New mobile nav (jestjs#2664)
* Add standard FB Open Source Footer (jestjs#2660)
* Add RedirectLayout to prevent broken links (jestjs#2700)
* Refreshed Homepage and Colors across site (jestjs#2699)
* Deploy Jest website via CircleCI

.eslintignore

@@ -7,4 +7,8 @@ examples/react-native
 flow-typed/**
 packages/*/build/**
 types/**
-website/
+website/build
+website/node_modules
+website/core/metadata*.js
+website/src/jest/docs
+website/src/jest/blog

.gitignore

@@ -12,6 +12,13 @@
 /packages/*/node_modules/
 /website/build
 /website/node_modules
+/website/core/metadata*.js
+/website/src/jest/docs
+/website/src/jest/blog
+/integration_tests/transform/*/coverage
+/integration_tests/transform/*/node_modules
+/integration_tests/*/node_modules
+npm-debug.log
 coverage
 lerna-debug.log
 npm-debug.log*

CONTRIBUTING.md

@@ -83,7 +83,7 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
 * 2 spaces for indentation (no tabs).
 * 80 character line length strongly preferred.
 * Prefer `'` over `"`.
-* ES2015 syntax when possible.
+* ES6 syntax when possible.
 * `'use strict';`.
 * Use [Flow types](http://flowtype.org/).
 * Use semicolons;

README.md

@@ -12,98 +12,105 @@ Painless JavaScript Testing
 ## Getting Started
 
 <generated_getting_started_start />
-Before you install Jest, you can try out a real version of Jest through [repl.it](https://repl.it). Just edit your test and hit the run button!
-<iframe class="jest-repl" src="https://repl.it/languages/jest?lite=true"></iframe>
+Install Jest using `npm`:
 
-Install Jest with `yarn` or `npm` by running `yarn add -D jest` or `npm install --save-dev jest`. Let's get started by writing a test for a hypothetical `sum.js` file:
+```
+npm install --save-dev jest
+```
+
+Let's get started by writing a test for a hypothetical function that adds two numbers. First, create a `sum.js` file:
 
 ```javascript
-module.exports = (a, b) => a + b;
+function sum(a, b) {
+  return a + b;
+}
+module.exports = sum;
 ```
 
-Create a directory `__tests__/` with a file `sum-test.js` or name it `sum.test.js` or `sum.spec.js` and put it anywhere in your project:
+Then, create a file named `sum.test.js`. This will contain our actual test:
 
 ```javascript
+const sum = require('./sum');
+
 test('adds 1 + 2 to equal 3', () => {
-  const sum = require('../sum');
   expect(sum(1, 2)).toBe(3);
 });
 ```
 
-Add the following to your `package.json`:
+Add the following section to your `package.json`:
 
 ```js
 "scripts": {
   "test": "jest"
 }
 ```
 
-Run `yarn test` and Jest will print this message: `PASS __tests__/sum-test.js`. You just successfully wrote your first test using Jest!
+Finally, run `npm test` and Jest will print this message:
 
-**You are ready to use Jest! Here are some more resources to help you get started:**
+```
+PASS  ./sum.test.js
+✓ adds 1 + 2 to equal 3 (5ms)
+```
+
+**You just successfully wrote your first test using Jest!**
+
+This test used `expect` and `toBe` to test that two values were exactly identical. To learn about the other things that Jest can test, see [Using Matchers](https://facebook.github.io/jest/docs/using-matchers.html).
 
-* Read the [API Documentation](https://facebook.github.io/jest/docs/api.html) to learn about all available assertions, ways of writing tests and Jest specific APIs.
-* [Jest Configuration](https://facebook.github.io/jest/docs/configuration.html).
-* [Example Code](https://github.com/facebook/jest/tree/master/examples/getting_started).
-* [Migration from other test runners](https://facebook.github.io/jest/docs/migration-guide.html).
-* Introductory guide at [Plotly Academy](https://academy.plot.ly/react/6-testing) that walks you through testing a React and Redux application.
-* The [React](https://github.com/facebook/react/tree/master/src/renderers/shared/stack/reconciler/__tests__), [Relay](https://github.com/facebook/relay/tree/master/src/container/__tests__) and [react-native](https://github.com/facebook/react-native/tree/master/Libraries/Animated/src/__tests__) repositories have excellent examples of tests written by Facebook engineers.
+<!--truncate-->
 
-**...or watch a video to get started with Jest:**
-<div class="video">
-  <iframe src="https://fast.wistia.net/embed/iframe/78j73pyz17"></iframe>
-</div>
-<div class="video-shoutout">
-  <a href="https://egghead.io/lessons/javascript-test-javascript-with-jest">Video</a> by <a href="https://twitter.com/kentcdodds">Kent C. Dodds</a> hosted by <a href="https://egghead.io">Egghead</a>.
-</div>
+## Additional Configuration
 
-### Babel Integration
+### Using Babel
 
-If you'd like to use [Babel](http://babeljs.io/), it can easily be enabled: `yarn add -D babel-jest babel-polyfill`.
+To use [Babel](http://babeljs.io/), install the `babel-jest` and `babel-polyfill` packages:
 
-Don't forget to add a [`.babelrc`](https://babeljs.io/docs/usage/babelrc/) file in your project's root folder. For example, if you are using ES2015 and [React.js](https://facebook.github.io/react/) with the [`babel-preset-es2015`](https://babeljs.io/docs/plugins/preset-es2015/) and [`babel-preset-react`](https://babeljs.io/docs/plugins/preset-react/) presets:
+```
+npm install --save-dev babel-jest babel-polyfill
+```
+
+Don't forget to add a [`.babelrc`](https://babeljs.io/docs/usage/babelrc/) file in your project's root folder. For example, if you are using ES6 and [React.js](https://facebook.github.io/react/) with the [`babel-preset-es2015`](https://babeljs.io/docs/plugins/preset-es2015/) and [`babel-preset-react`](https://babeljs.io/docs/plugins/preset-react/) presets:
 
 ```js
 {
   "presets": ["es2015", "react"]
 }
 ```
 
-You are now set up to use all ES2015 features and React specific syntax.
+You are now set up to use all ES6 features and React specific syntax.
 
-*Note: If you are using a more complicated Babel configuration, using Babel's `env` option,
+> Note: If you are using a more complicated Babel configuration, using Babel's `env` option,
 keep in mind that Jest will automatically define `NODE_ENV` as `test`.
-It will not use `development` section like Babel does by default when no `NODE_ENV` is set.*
+It will not use `development` section like Babel does by default when no `NODE_ENV` is set.
 
-### React, React Native and Snapshot Testing
+### Using webpack
 
-Check out the [React tutorial](https://facebook.github.io/jest/docs/tutorial-react.html) and the [React Native tutorial](https://facebook.github.io/jest/docs/tutorial-react-native.html) to get started with React or React Native codebases. You can use React's test renderer (`yarn add -D react-test-renderer`) to capture snapshots with Jest's snapshot feature and the `toMatchSnapshot` matcher:
+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://facebook.github.io/jest/docs/webpack.html) to get started.
 
-```js
-import renderer from 'react-test-renderer';
-test('Link renders correctly', () => {
-  const tree = renderer.create(
-    <Link page="http://www.facebook.com">Facebook</Link>
-  ).toJSON();
-  expect(tree).toMatchSnapshot();
-});
-```
+### Using TypeScript
 
-and it will produce a snapshot like this:
+To use TypeScript in your tests, install the `ts-jest` package:
 
-```js
-exports[`Link renders correctly 1`] = `
-<a
-  className="normal"
-  href="http://www.facebook.com"
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}>
-  Facebook
-</a>
-`;
 ```
+npm install --save-dev test-jest
+```
+
+then modify your `package.json` so the `jest` section looks something like:
 
-On subsequent test runs, Jest will compare the stored snapshot with the rendered output and highlight differences. If there are differences, Jest will ask you to fix your mistake and can be re-run with `-u` or `--updateSnapshot` to update an outdated snapshot.
+```json
+{
+  "jest": {
+    "transform": {
+      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
+    },
+    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js"
+    ]
+  }
+}
+```
 <generated_getting_started_end />
 
 ## API & Configuration

blog/2016-09-01-jest-15.md

@@ -9,6 +9,8 @@ We spent the past year making Jest [faster](http://facebook.github.io/jest/blog/
 
 The most important change to talk about is a set of [new defaults](https://github.com/facebook/jest/pull/1511). If you are an existing Jest user you will very likely need to update your configuration for Jest 15. In most cases it will simplify your setup and Jest will provide useful error messages during the upgrade. All of the new defaults can be disabled to suit your needs, but we still consider the disabled features critical for Jest in certain situations and will continue to use and support them at Facebook long-term. Our [API documentation](https://facebook.github.io/jest/docs/api.html) was also completely rewritten to reflect these changes. [This pull request for React](https://github.com/facebook/react/pull/7625/files) highlights some of the changes necessary for existing projects.
 
+<!--truncate-->
+
 ## New CLI error messages and summaries
 
 As part of our effort to remove Jasmine incrementally within Jest, replacing all Jasmine matchers was almost completed. A lot of time was spent tweaking every error message for every matcher to give the best signal to users when a test is failing – the time when Jest should provide the most value to you. In addition to printing the expected and received values, a diff is printed for the `toBe` and `toEqual` matchers to help spot mistakes. More colors were added and relevant files from stack traces are highlighted more prominently.

blog/2016-10-03-jest-16.md

@@ -7,6 +7,8 @@ authorFBID: 100000023028168
 
 It's been one month since the last major release and we've made significant improvements to Jest since. In this major release we are updating the snapshot format we are using which will likely require snapshots to be updated when upgrading Jest. We don't make these changes lightly and don't expect this to happen often but we think it is necessary to improve the format from time to time.
 
+<!--truncate-->
+
 ## Upgraded CLI
 
 ![reporter](/jest/img/blog/16-reporter.gif)

blog/2016-12-15-2016-in-jest.md

@@ -7,6 +7,8 @@ authorFBID: 100000023028168
 
 2016 was a big year for JavaScript testing with Jest. In the first six months of the year we rewrote Jest and built a solid foundation to significantly improve performance and the developer experience of testing JavaScript code. We flow-typed the entire codebase, built a ton of integration tests for Jest itself and adopted [lerna](https://lernajs.io/) to turn Jest from a framework into a [*Painless JavaScript Testing platform*](https://github.com/facebook/jest/tree/master/packages).
 
+<!--truncate-->
+
 The newly created [react-test-renderer](https://www.npmjs.com/package/react-test-renderer) finally enabled testing of react-native components. Through the jest-react-native preset (now merged directly into react-native) Jest now works out of the box for any React project and comes pre-configured in [create-react-app](https://github.com/facebookincubator/create-react-app) and [react-native](https://github.com/facebook/react-native) projects. We integrated core pieces of Jest into [react-native's packager](https://github.com/facebook/react-native/tree/master/packager/react-packager/src) and the completely new snapshot testing feature has since been used outside of Jest: It was integrated with React Storybook as “[storyshots](https://github.com/storybooks/storyshots)” and is being adopted by other test runners like [ava](https://github.com/avajs/ava/pull/1113).
 
 The [pretty-format](https://github.com/facebook/jest/tree/master/packages/pretty-format) project was rewritten with performance in mind to drive Jest's snapshot feature, was recently merged into Jest's monorepo and is also helpful in other [test runners](https://github.com/avajs/ava/pull/1154). Nowadays Jest is much more about collecting different ideas and solutions to testing than it is about one specific implementation of a test framework.

blog/2017-01-27-a-great-developer-experience.md

@@ -0,0 +1,46 @@
+---
+title: A Great Developer Experience
+author: Héctor Ramos
+authorURL: http://twitter.com/hectorramos
+authorFBID: 121800083
+---
+
+We strongly believe that great documentation is crucial to providing a great developer experience. The docs should be clear, concise, and useful to new users and veterans alike. With that in mind, we recently took some time to overhaul the Jest website.
+
+<!--truncate-->
+
+## Improved Docs
+
+One of the changes you'll notice upon visiting our docs is the updated sidebar. The documentation is now divided into three main areas: an introduction to Jest, advanced guides to Jest's features, and a comprehensive API reference.
+
+The **Introduction** section will guide you from installing Jest and writing your first case, to using Jest's matchers and testing async code. If you're new to Jest or need a quick refresher, these docs should get you up to speed in no time. If you've used Jest before and only need a quick reference on how it's installed, you need to go no further than the [Getting Started](/jest/docs/getting-started.html) guide.
+
+Once you feel comfortable using Jest, proceed to the advanced **Guides** section. The new [Snapshot Testing guide](/jest/docs/snapshot-testing.html) covers everything you need to know about creating and maintaining snapshot test cases.
+
+Finally, we've completely overhauled our API reference docs. You can now find detailed information on all of Jest's [Globals](/jest/docs/api.html), [matchers](/jest/docs/expect.html), and [every flag](/jest/docs/cli.html) supported by the `jest` CLI.
+
+## Who's Using Jest?
+
+We have created a [showcase of users](/jest/users.html) to highlight some of the companies that are using Jest. We're thankful to all of these companies for using Jest to test their websites, mobile apps, and APIs. If you're using Jest, check out the guidelines on GitHub and send us a pull request!
+
+<div class="miniShowcaseSection">
+ <div class="logos">
+   <img src="/jest/img/logos/twitter.png" title="Twitter"/>
+   <img src="/jest/img/logos/pinterest.png" title="Pinterest"/>
+   <img src="/jest/img/logos/paypal.png" title="PayPal"/>
+   <img src="/jest/img/logos/ibm.png" title="IBM"/>
+   <img src="/jest/img/logos/spotify.png" title="Spotify"/>
+ </div>
+</div>
+
+## Jest in the Browser
+
+As highlighted [last month](/jest/blog/2016/12/15/2016-in-jest.html), it is now possible to use Jest directly in the browser using [repl.it](https://repl.it/languages/jest). If you want to try out Jest before installing it, you can easily do so below or directly from the Jest homepage. Go ahead and give it a try!
+
+<iframe class="jest-repl" src="https://repl.it/languages/jest?lite=true"></iframe>
+
+## Get Involved
+
+This is just the start. Go ahead and take a look at the docs, and don't hesitate to send any feedback our way. If you find a mistake in the docs or you just want to let us know what needs to be documented better, please tweet at us at [@fbjest](https://twitter.com/fbjest), [open an issue on GitHub](https://github.com/facebook/jest/issues), or send us a PR by clicking "Edit on GitHub" at the top of the doc.
+
+We're really excited for the year ahead and can't wait to hear from you!