diff --git a/README.md b/README.md index 49662a69baa3..c684c3c12c06 100644 --- a/README.md +++ b/README.md @@ -12,21 +12,10 @@ Painless JavaScript Testing ## Getting Started -[Egghead.io video](https://egghead.io/lessons/javascript-test-javascript-with-jest) - -Install Jest with `npm` by running: - -``` -npm install --save-dev jest -``` - -Great! Now let's get started by writing a test for a hypothetical `sum.js` file: +Install Jest with `npm` by running `npm install --save-dev jest`. Let's get started by writing a test for a hypothetical `sum.js` file: ```javascript -function sum(a, b) { - return a + b; -} -module.exports = sum; +module.exports = (a, b) => a + b; ``` 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: @@ -46,29 +35,20 @@ Add the following to your `package.json`: } ``` -Run `npm test`: - -``` -PASS __tests__/sum-test.js -``` - -Please read the [API documentation](https://facebook.github.io/jest/docs/api.html) to learn about all available assertions, ways of writing tests, configuration options and Jest specific APIs. There is also a great introductory guide available at [Plotly Academy](https://academy.plot.ly/react/6-testing) that walks you through testing a react and redux application. - -The code for this example is available at [examples/getting_started](https://github.com/facebook/jest/tree/master/examples/getting_started). +Run `npm test` and Jest will print this message: `PASS __tests__/sum-test.js`. You just successfully wrote your first test using Jest! -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. +**You are ready to use Jest! Here are some more resources to help you get started:** -**And you are ready to use Jest!** +* 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. ### Babel Integration -[Egghead.io video](https://egghead.io/lessons/javascript-add-babel-integration-with-jest) - -If you'd like to use [Babel](http://babeljs.io/), it can easily be enabled: - -``` -npm install --save-dev babel-jest babel-polyfill -``` +If you'd like to use [Babel](http://babeljs.io/), it can easily be enabled: `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 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: @@ -80,19 +60,17 @@ Don't forget to add a [`.babelrc`](https://babeljs.io/docs/usage/babelrc/) file You are now set up to use all ES2015 features and React specific syntax. -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. - -### React, React-Native and Snapshot Testing +It will not use `development` section like Babel does by default when no `NODE_ENV` is set.* -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. +### React, React Native and Snapshot Testing -We recommend using React's test renderer (`npm install --save-dev react-test-renderer`) to capture snapshots with Jest's snapshot feature. Write a test using `toMatchSnapshot`: +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 (`npm install --save-dev react-test-renderer`) to capture snapshots with Jest's snapshot feature and the `toMatchSnapshot` matcher: ```js import renderer from 'react-test-renderer'; -it('renders correctly', () => { +test('Link renders correctly', () => { const tree = renderer.create( Facebook ).toJSON(); @@ -107,103 +85,14 @@ exports[`Link renders correctly 1`] = ` + onMouseEnter={[Function]} + onMouseLeave={[Function]}> Facebook `; ``` -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 `jest -u` to update an outdated snapshot. - -### Advanced Features - -#### Use the interactive watch mode to automatically re-run tests - -``` -npm test -- --watch -// or -jest --watch -``` - -#### Install Jest globally - -Jest can be installed globally: `npm install -g jest` which will make a global `jest` command available that can be invoked from anywhere within your project. - -#### Async testing - -Promises and even async/await can be tested easily. - -Assume a `user.getUserName` function that returns a promise, now consider this async test with Babel and [`babel-plugin-transform-async-to-generator`](http://babeljs.io/docs/plugins/transform-async-to-generator/) or [`babel-preset-stage-3`](http://babeljs.io/docs/plugins/preset-stage-3/): - -```js -import * as user from '../user'; - -// The promise that is being tested should be returned. -it('works with promises', () => { - return user.getUserName(5) - .then(name => expect(name).toEqual('Paul')); -}); - -it('works with async/await', async () => { - const userName = await user.getUserName(4); - expect(userName).toEqual('Mark'); -}); -``` - -Check out the [Async tutorial](https://facebook.github.io/jest/docs/tutorial-async.html) for more. - -#### Only run test files related to changes with `jest -o` - -On large projects and applications it is often not feasible to run thousands of tests when a single file changes. Jest uses static analysis to look up dependency trees in reverse starting from changed JavaScript files only. During development, it is recommended to use `jest -o` or `jest --onlyChanged` which will find tests related to changed JavaScript files and only run relevant tests. - -#### Mocking and Sandboxing - -Jest isolates test files into their own environment and isolates module execution between test runs. Jest swaps out `require()` and can inject mocks that were either [created manually](https://facebook.github.io/jest/docs/manual-mocks.html) by the user or automatically mocked through explicit calls to `jest.mock('moduleName')`. - -#### Use `--bail` to abort after the first failed test. - -If you don't want to wait until a full test run completes `--bail` can be used to abort the test run after the first error. - -#### Use `--coverage` to generate a code coverage report - -Code coverage can be generated easily with `--coverage`. - -``` ------------------------|----------|----------|----------|----------| -File | % Stmts | % Branch | % Funcs | % Lines | ------------------------|----------|----------|----------|----------| - react/ | 91.3 | 60.61 | 100 | 100 | - CheckboxWithLabel.js | 91.3 | 60.61 | 100 | 100 | ------------------------|----------|----------|----------|----------| -``` - -#### Use `--json` for CI integrations - -Jest can be integrated into Continuous Integration test runs and wrapped with other scripts to further analyze test results. - -Example Output: - -```js -{ - "success": true, - "startTime": 1456983486661, - "numTotalTests": 1, - "numTotalTestSuites": 1, - "numRuntimeErrorTestSuites": 0, - "numPassedTests": 1, - "numFailedTests": 0, - "numPendingTests": 0, - "testResults":[ - { - "name": "react/__tests__/CheckboxWithLabel-test.js", - "status": "passed", - "startTime": 1456983488908, - "endTime": 1456983493037 - } - ] -} -``` +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. ## API & Configuration diff --git a/blog/2016-10-03-jest-16.md b/blog/2016-10-03-jest-16.md new file mode 100644 index 000000000000..89b083e3ebc4 --- /dev/null +++ b/blog/2016-10-03-jest-16.md @@ -0,0 +1,79 @@ +--- +title: Jest 16.0: Turbocharged CLI & Community Update +author: Christoph Pojer +authorURL: http://twitter.com/cpojer +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. + +## Upgraded CLI + +![reporter](/jest/img/blog/16-reporter.gif) + +Jest 16 features a new reporter interface that shows running tests as well as a live summary and a progress bar based on the estimated test runtime from previous test runs. We also improved the CLI output to work better with different color schemes. If there were test failures in a previous run, Jest will now always run those tests first to give useful signal to users as quickly as possible. + +We also added a lot of new features which you may find useful: + +* New CLI flags were added: A `--testNamePattern=pattern` or `-t ` option was added to filter tests from the command line much like `it.only` or `fit` does in tests. +* Previously failed tests now always run first. +* `jest ` is now case-insensitive to make it easier to filter test files. +* A test run in watch mode can now be interrupted. During a test run, simply press any of the keys used for input during watch mode (`a`, `o`, `p`, `q` or `enter`) to abort a test run and start a new one. +* The `--bail` flag now also works in watch mode. Together with running failed tests first, Jest's watch mode will now feel turbocharged! +* Jest now automatically considers files and tests with the `jsx` extension. +* Jest warns about duplicate manual mock files and we improved automatically created mocks for ES modules compiled with babel. +* A `jest.clearAllMocks` function was added to clear all mocks in between tests. +* We improved module resolution when `moduleNameMapper` is used. +* Finally, a `--findRelatedTests ` cli option was added to run tests related to the specified files. This is especially helpful as a pre-commit hook if you'd like to run tests only on a specified set of files that have tests associated with them. + +This is what Jest looks like when a test run is interrupted in watch mode: +![watch](/jest/img/blog/16-watch.gif) + +## Snapshot Updates + +Jest's snapshot implementation was completely rewritten. The new version of the `jest-snapshot` package is now structured in a way that allows for easier integration into other test runners and enables more cool integrations like with [React Storybook](https://voice.kadira.io/snapshot-testing-in-react-storybook-43b3b71cec4f#.qh4lzcadb). Jest doesn't mark snapshots as obsolete in a file with skipped or failing tests. We also made a number of changes to the snapshot format: + +* Objects and Arrays are now printed with a trailing comma to minimize future changes to snapshots. +* We removed function names from snapshots. They were causing issues with different versions of Node, with code coverage instrumentation and we generally felt like it wasn't useful signal to show to the user that the name of a function has changed. +* Snapshots are now sorted using natural sort order within a file. + +When upgrading to Jest 16, the diff might look similar to this one: +![snapshots](/jest/img/blog/16-snapshots.png) + +## Test Library Updates + +We finished the migration of Jasmine assertions to the new Jest matchers. We added three new matchers: `toBeInstanceOf`, `toContainEqual` and `toThrowErrorMatchingSnapshot` . We have more readable failure messages for the spy/mock matchers `toHaveBeenLastCalledWith`, `toHaveBeenCalledWith`, `lastCalledWith` and `toBeCalledWith`. Now that we have rewritten all assertions and separated them into their own package, we'll be working on making them standalone so they can be integrated into any test framework if you'd like to use them outside of Jest. + +We also added a bunch of aliases that were requested by the community. To make Jest focus on a single test you can now use either `it.only` or `test.only` or keep using `fit`; For skipping a test, `it.skip` or `test.skip` are now available alongside of `xit`; finally to define a test as concurrent you can use `test.concurrent` which is useful in case your test accesses network resources or databases. + +Finally, if you'd like to overwrite the `expect` global with a different assertion library like [chai](http://chaijs.com/), this can now be done using the `setupTestFrameworkScriptFile` configuration option. + +## Community Update + +Over the last month lots of articles were written about Jest's snapshot testing feature, how to migrate to Jest and how to get started writing tests. I also did a few live videos to explain how Jest and snapshot testing works: + +* [FB Live Video about Snapshot Testing](https://www.facebook.com/react/videos/1035427199869020/). +* [JavaScript & React Testing with Kent C. Dodds](https://www.youtube.com/watch?v=i31VtyJSM-I&feature=youtu.be). + +A number of people wrote articles about snapshot testing. The most opinionated article that resonated with the Jest team was “[Testing with Jest Snapshots: First Impressions](http://benmccormick.org/2016/09/19/testing-with-jest-snapshots-first-impressions/)”. Ben makes three great points in his blog post: + +1. Snapshot tests are a complement for conventional tests not a replacement. +2. Snapshot tests are more useful with a healthy code review process. +3. Snapshot tests work well with auto-mocking. + +We highly recommend reading the entire blog post. Ben did a fantastic job explaining the reasons why we built snapshot testing. It's important to point out that we didn't introduce snapshot testing to replace all other forms of testing but rather as a way to enable engineers to write tests for code that they otherwise wouldn't write tests for. It works well for things like React components, CLI output, error messages and many others but it doesn't solve all problems. Jest's goal is to provide many different ways to write effective tests without sacrificing performance or the project's maintainability. + +Other highlights about snapshot testing: + +* A React Native testing series: [Part 1: Jest – Snapshot come into play](https://blog.callstack.io/unit-testing-react-native-with-the-new-jest-i-snapshots-come-into-play-68ba19b1b9fe) and [Part 2: Jest – Redux Snapshots for your Actions and Reducers](https://blog.callstack.io/unit-testing-react-native-with-the-new-jest-ii-redux-snapshots-for-your-actions-and-reducers-8559f6f8050b#.putt9eipm). +* [How we landed on Jest snapshot testing for JavaScript](https://blog.grommet.io/post/2016/09/01/how-we-landed-on-jest-snapshot-testing-for-javascript). +* [Picture This: Snapshot Testing](http://guigrpa.github.io/2016/09/27/picture-this-snapshot-testing/). +* [Snapshot testing with React Storybook](https://voice.kadira.io/snapshot-testing-in-react-storybook-43b3b71cec4f). +* [Testing React and Redux Applications](https://medium.com/@ryancollinsio/testing-react-redux-applications-fee79ac0087f#.lyjl7st1n). +* If you are using the popular [enzyme](https://github.com/airbnb/enzyme) testing utility, there is now a project [enzyme-to-json](https://github.com/trayio/enzyme-to-json) which makes it possible to use Jest's snapshot testing feature together with enzyme. + +[Redux itself now uses Jest](https://github.com/reactjs/redux/commit/7296d3cba1f5f899bdee5ef6695a8d21149f8d6c) and Max Stoiber wrote a [tutorial on how to test code written with redux](http://academy.plot.ly/react/6-testing/). There is also a great [guide on how to write tests for MobX](https://semaphoreci.com/community/tutorials/how-to-test-react-and-mobx-with-jest). If you are using [create-react-app](https://github.com/facebookincubator/create-react-app), Jest is now included by default. Kent C. Dodds created a ton of [videos on egghead.io](https://egghead.io/lessons/javascript-use-jest-s-snapshot-testing-feature?pl=testing-javascript-with-jest-a36c4074) that will help you get started with Jest. + +If you are using other test runners, Kenneth Skovhus built an awesome [jest-codemods](https://github.com/skovhus/jest-codemods) library that will automate the conversion for you. Codemods are awesome: they'll allow you to quickly evaluate whether Jest will work for you. Give it a try! + +The full [changelog can be found on GitHub](https://github.com/facebook/jest/blob/master/CHANGELOG.md#jest-1600). Jest 16 was a true JavaScript community effort and the project now has more than 220 contributors. We thank each and every one of you for your help to make this project great. diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md index 673c5baa225e..9ee7f713dd64 100644 --- a/docs/GettingStarted.md +++ b/docs/GettingStarted.md @@ -7,21 +7,10 @@ permalink: docs/getting-started.html next: tutorial-react --- -[Egghead.io video](https://egghead.io/lessons/javascript-test-javascript-with-jest) - -Install Jest with `npm` by running: - -``` -npm install --save-dev jest -``` - -Great! Now let's get started by writing a test for a hypothetical `sum.js` file: +Install Jest with `npm` by running `npm install --save-dev jest`. Let's get started by writing a test for a hypothetical `sum.js` file: ```javascript -function sum(a, b) { - return a + b; -} -module.exports = sum; +module.exports = (a, b) => a + b; ``` 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: @@ -41,29 +30,20 @@ Add the following to your `package.json`: } ``` -Run `npm test`: - -``` -PASS __tests__/sum-test.js -``` - -Please read the [API documentation](/jest/docs/api.html) to learn about all available assertions, ways of writing tests, configuration options and Jest specific APIs. There is also a great introductory guide available at [Plotly Academy](https://academy.plot.ly/react/6-testing) that walks you through testing a react and redux application. - -The code for this example is available at [examples/getting_started](https://github.com/facebook/jest/tree/master/examples/getting_started). +Run `npm test` and Jest will print this message: `PASS __tests__/sum-test.js`. You just successfully wrote your first test using Jest! -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. +**You are ready to use Jest! Here are some more resources to help you get started:** -**And you are ready to use Jest!** +* Read the [API Documentation](/jest/docs/api.html) to learn about all available assertions, ways of writing tests and Jest specific APIs. +* [Jest Configuration](/jest/docs/configuration.html). +* [Example Code](https://github.com/facebook/jest/tree/master/examples/getting_started). +* [Migration from other test runners](/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. ### Babel Integration -[Egghead.io video](https://egghead.io/lessons/javascript-add-babel-integration-with-jest) - -If you'd like to use [Babel](http://babeljs.io/), it can easily be enabled: - -``` -npm install --save-dev babel-jest babel-polyfill -``` +If you'd like to use [Babel](http://babeljs.io/), it can easily be enabled: `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 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: @@ -75,19 +55,17 @@ Don't forget to add a [`.babelrc`](https://babeljs.io/docs/usage/babelrc/) file You are now set up to use all ES2015 features and React specific syntax. -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. - -### React, React-Native and Snapshot Testing +It will not use `development` section like Babel does by default when no `NODE_ENV` is set.* -Check out the [React tutorial](/jest/docs/tutorial-react.html) and the [React-Native tutorial](/jest/docs/tutorial-react-native.html) to get started with React or React-Native codebases. +### React, React Native and Snapshot Testing -We recommend using React's test renderer (`npm install --save-dev react-test-renderer`) to capture snapshots with Jest's snapshot feature. Write a test using `toMatchSnapshot`: +Check out the [React tutorial](/jest/docs/tutorial-react.html) and the [React Native tutorial](/jest/docs/tutorial-react-native.html) to get started with React or React Native codebases. You can use React's test renderer (`npm install --save-dev react-test-renderer`) to capture snapshots with Jest's snapshot feature and the `toMatchSnapshot` matcher: ```js import renderer from 'react-test-renderer'; -it('renders correctly', () => { +test('Link renders correctly', () => { const tree = renderer.create( Facebook ).toJSON(); @@ -102,100 +80,11 @@ exports[`Link renders correctly 1`] = ` + onMouseEnter={[Function]} + onMouseLeave={[Function]}> Facebook `; ``` -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 `jest -u` to update an outdated snapshot. - -### Advanced Features - -#### Use the interactive watch mode to automatically re-run tests - -``` -npm test -- --watch -// or -jest --watch -``` - -#### Install Jest globally - -Jest can be installed globally: `npm install -g jest` which will make a global `jest` command available that can be invoked from anywhere within your project. - -#### Async testing - -Promises and even async/await can be tested easily. - -Assume a `user.getUserName` function that returns a promise, now consider this async test with Babel and [`babel-plugin-transform-async-to-generator`](http://babeljs.io/docs/plugins/transform-async-to-generator/) or [`babel-preset-stage-3`](http://babeljs.io/docs/plugins/preset-stage-3/): - -```js -import * as user from '../user'; - -// The promise that is being tested should be returned. -it('works with promises', () => { - return user.getUserName(5) - .then(name => expect(name).toEqual('Paul')); -}); - -it('works with async/await', async () => { - const userName = await user.getUserName(4); - expect(userName).toEqual('Mark'); -}); -``` - -Check out the [Async tutorial](/jest/docs/tutorial-async.html) for more. - -#### Only run test files related to changes with `jest -o` - -On large projects and applications it is often not feasible to run thousands of tests when a single file changes. Jest uses static analysis to look up dependency trees in reverse starting from changed JavaScript files only. During development, it is recommended to use `jest -o` or `jest --onlyChanged` which will find tests related to changed JavaScript files and only run relevant tests. - -#### Mocking and Sandboxing - -Jest isolates test files into their own environment and isolates module execution between test runs. Jest swaps out `require()` and can inject mocks that were either [created manually](/jest/docs/manual-mocks.html) by the user or automatically mocked through explicit calls to `jest.mock('moduleName')`. - -#### Use `--bail` to abort after the first failed test. - -If you don't want to wait until a full test run completes `--bail` can be used to abort the test run after the first error. - -#### Use `--coverage` to generate a code coverage report - -Code coverage can be generated easily with `--coverage`. - -``` ------------------------|----------|----------|----------|----------| -File | % Stmts | % Branch | % Funcs | % Lines | ------------------------|----------|----------|----------|----------| - react/ | 91.3 | 60.61 | 100 | 100 | - CheckboxWithLabel.js | 91.3 | 60.61 | 100 | 100 | ------------------------|----------|----------|----------|----------| -``` - -#### Use `--json` for CI integrations - -Jest can be integrated into Continuous Integration test runs and wrapped with other scripts to further analyze test results. - -Example Output: - -```js -{ - "success": true, - "startTime": 1456983486661, - "numTotalTests": 1, - "numTotalTestSuites": 1, - "numRuntimeErrorTestSuites": 0, - "numPassedTests": 1, - "numFailedTests": 0, - "numPendingTests": 0, - "testResults":[ - { - "name": "react/__tests__/CheckboxWithLabel-test.js", - "status": "passed", - "startTime": 1456983488908, - "endTime": 1456983493037 - } - ] -} -``` +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. diff --git a/docs/TutorialReact.md b/docs/TutorialReact.md index e8455a75c0a8..0835376510cb 100644 --- a/docs/TutorialReact.md +++ b/docs/TutorialReact.md @@ -110,7 +110,7 @@ import React from 'react'; import Link from '../Link.react'; import renderer from 'react-test-renderer'; -it('changes the class when hovered', () => { +test('Link changes the class when hovered', () => { const component = renderer.create( Facebook ); @@ -139,8 +139,8 @@ exports[`Link changes the class when hovered 1`] = ` + onMouseEnter={[Function]} + onMouseLeave={[Function]}> Facebook `; @@ -149,8 +149,8 @@ exports[`Link changes the class when hovered 2`] = ` + onMouseEnter={[Function]} + onMouseLeave={[Function]}> Facebook `; @@ -159,8 +159,8 @@ exports[`Link changes the class when hovered 3`] = ` + onMouseEnter={[Function]} + onMouseLeave={[Function]}> Facebook `; diff --git a/docs/TutorialReactNative.md b/docs/TutorialReactNative.md index 4e0642a8d343..a98ff724cb51 100644 --- a/docs/TutorialReactNative.md +++ b/docs/TutorialReactNative.md @@ -123,7 +123,7 @@ exports[`Intro renders correctly 1`] = ` "alignItems": "center", "backgroundColor": "#F5FCFF", "flex": 1, - "justifyContent": "center" + "justifyContent": "center", } }> Welcome to React Native! @@ -141,7 +141,7 @@ exports[`Intro renders correctly 1`] = ` Object { "color": "#333333", "marginBottom": 5, - "textAlign": "center" + "textAlign": "center", } }> This is a React Native snapshot test. diff --git a/website/core/home/GridBlock.js b/website/core/home/GridBlock.js index 2b8bbe3b990e..58f7e5f83491 100644 --- a/website/core/home/GridBlock.js +++ b/website/core/home/GridBlock.js @@ -15,6 +15,7 @@ class GridBlock extends React.Component { 'alignRight': this.props.align === "right", 'twoByGridBlock': this.props.layout === "twoColumn", 'fourByGridBlock': this.props.layout === "fourColumn", + 'threeByGridBlock': this.props.layout === "threeColumn", 'imageAlignTop': (block.image && this.props.imagealign === "top"), 'imageAlignSide': (block.image && this.props.imagealign === "side"), }); diff --git a/website/siteConfig.js b/website/siteConfig.js index 269dbf87939c..42ba4223e1d4 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -3,7 +3,7 @@ var Button = require('Button'); var siteConfig = { title: "Jest", tagline: "Painless JavaScript Testing", - description: "Jest is a JavaScript unit testing framework, used by Facebook to test services and React applications.", + description: "Jest is a JavaScript testing framework, used by Facebook to test all JavaScript code including React applications.", url: "https://facebook.github.io", baseUrl: "/jest/", repo: "facebook/jest", @@ -19,18 +19,18 @@ var siteConfig = { features: [ { image: "/jest/img/content/adaptable.svg", - title: "Adaptable", - content: "Jest uses Jasmine assertions by default and Jest is modular, extendible and configurable." + title: "Turbocharged", + content: "Jest is a complete and easy to setup JavaScript testing solution." }, { image: "/jest/img/content/sandboxed.svg", - title: "Sandboxed and Fast", - content: "Jest virtualizes JavaScript environments, provides browser mocks and runs tests in parallel across workers." + title: "Fast and Sandboxed", + content: "Jest virtualizes JavaScript environments and runs tests in parallel across worker processes." }, { image: "/jest/img/content/snapshots.svg", title: "Snapshot Testing", - content: "Jest can [capture snapshots](/jest/docs/tutorial-react.html#snapshot-testing) of React trees or other serializable values to write tests quickly and it provides a seamless update experience." + content: "Jest can [capture snapshots](/jest/docs/tutorial-react.html#snapshot-testing) of React trees or other serializable values to simplify UI testing." }, ] }; diff --git a/website/src/jest/css/jest.css b/website/src/jest/css/jest.css index 09a920e2eabc..ba1aa5b66a52 100644 --- a/website/src/jest/css/jest.css +++ b/website/src/jest/css/jest.css @@ -616,7 +616,7 @@ code, a code, .mainContainer .wrapper a code, .mainContainer .wrapper a:focus code { - color: #5e9f24; + color: #a05757; font-family: Hack, monospace; font-size: 90%; font-weight: 300; @@ -784,6 +784,11 @@ a:hover code { display: flex; flex-flow: row wrap; } +.testingFeatures { + background: #f4f4f4; + border-radius: 10px; + margin: 0 8px 8px 0; +} .blockImage { max-width: 150px; width: 50%; @@ -865,6 +870,11 @@ a:hover code { flex: 1 0 50%; padding: 10px; } + .gridBlock .threeByGridBlock { + box-sizing: border-box; + flex: 1 0 26%; + padding: 10px; + } .gridBlock .fourByGridBlock { box-sizing: border-box; flex: 1 0 25%; diff --git a/website/src/jest/index.js b/website/src/jest/index.js index 50a770fa3101..4d78811c07d0 100644 --- a/website/src/jest/index.js +++ b/website/src/jest/index.js @@ -17,31 +17,19 @@ var gettingStartedContent = require('./docs/getting-started.js').content; var index = React.createClass({ render: function() { - var whyUseJest = [ - { - content: "Jest automatically finds tests to execute in your repo", - }, - { - content: "It sandboxes test files, and resets state automatically for every test.", - }, - { - content: "Jest allows you to [test asynchronous code synchronously](/jest/docs/timer-mocks.html) as well as [Promises and async/await](/jest/docs/tutorial-async.html).", - }, - { - content: "Uses static analysis to find and only run relevant test files during local development.", - }, - { - content: "Runs your tests with a fake DOM implementation (via [jsdom](https://github.com/tmpvar/jsdom)) on the command line.", - }, - { - content: "Runs tests in parallel processes to minimize test runtime.", - }, - { - content: "It works with any compile-to-JS language and integrates seamlessly with [Babel](https://babeljs.io).", - }, - { - content: "Jest provides a [manual mocking library](/jest/docs/mock-functions.html). And it creates coverage reports.", - }, + var whyJest = [ + {content: 'Fast interactive mode with `--watch`.'}, + {content: 'Create coverage reports with `--coverage`. No additional setup or libraries needed!'}, + {content: 'Automatically find tests related to changed files to execute in your project with `-o`.'}, + {content: 'Error messages are helpful and color coded. Stack traces point to the source of problems quickly.'}, + {content: 'Jest runs previously failed tests first. Together with `--bail` it provides useful signal quickly.'}, + {content: 'Sandboxed test files and automatic global state resets for every test.'}, + {content: 'Integrated support for testing with [promises and async/await](/jest/docs/tutorial-async.html)'}, + {content: 'Run your tests with in a fake DOM implementation (via [jsdom](https://github.com/tmpvar/jsdom)) on the command line.'}, + {content: 'Run tests in parallel processes to minimize test runtime.'}, + {content: 'Jest Work with any compile-to-JS language and integrates seamlessly with [Babel](https://babeljs.io).'}, + {content: 'Integrated [manual mocking library](/jest/docs/mock-functions.html).'}, + {content: 'Can run [asynchronous code synchronously](/jest/docs/timer-mocks.html).'}, ]; return ( @@ -52,8 +40,8 @@ var index = React.createClass({ -

Why use Jest?

- +

Jest's Testing Features

+

diff --git a/website/src/jest/support.js b/website/src/jest/support.js index 52027ddaf72b..c8ffac6b8983 100644 --- a/website/src/jest/support.js +++ b/website/src/jest/support.js @@ -16,21 +16,23 @@ var support = React.createClass({
-

Need help?

+

Need help?

-

- Jest is worked on full-time by Facebook's - product infrastructure engineering teams. They're often around - and available for questions. -

+ Jest is worked on full-time by Facebook's + product infrastructure engineering teams. They're often around + and available for questions.
Troubleshooting
-

Check out the Troubleshooting documentation entry.

+ +
Discord
+

Join the #jest channel on Reactiflux to ask questions and find answers.

Stack Overflow

Many members of the community use Stack Overflow to ask questions. Read through the existing questions tagged with jestjs or ask your own!

-
Discord
-

Join the #jest channel on Reactiflux to ask questions and find answers.