docs(test): add instruction on how to integrate test in pre-commit hook

packages/react-scripts/template/README.md

@@ -52,13 +52,13 @@ You can find the most recent version of this guide [here](https://github.com/fac
   - [Filename Conventions](#filename-conventions)
   - [Command Line Interface](#command-line-interface)
   - [Version Control Integration](#version-control-integration)
+  - [Continuous Integration](#continuous-integration)
   - [Writing Tests](#writing-tests)
   - [Testing Components](#testing-components)
   - [Using Third Party Assertion Libraries](#using-third-party-assertion-libraries)
   - [Initializing Test Environment](#initializing-test-environment)
   - [Focusing and Excluding Tests](#focusing-and-excluding-tests)
   - [Coverage Reporting](#coverage-reporting)
-  - [Continuous Integration](#continuous-integration)
   - [Disabling jsdom](#disabling-jsdom)
   - [Snapshot Testing](#snapshot-testing)
   - [Editor Integration](#editor-integration)
@@ -1088,6 +1088,96 @@ Jest will always explicitly mention that it only ran tests related to the files
 
 Jest will always run all tests on a [continuous integration](#continuous-integration) server or if the project is not inside a Git or Mercurial repository.
 
+### Continuous Integration
+
+By default `npm test` runs the watcher with interactive CLI. However, you can force it to run tests once and finish the process by setting an environment variable called `CI`.
+
+When creating a build of your application with `npm run build` linter warnings are not checked by default. Like `npm test`, you can force the build to perform a linter warning check by setting the environment variable `CI`. If any warnings are encountered then the build fails.
+
+Popular CI servers already set the environment variable `CI` by default but you can do this yourself too:
+
+### On CI servers
+#### Travis CI
+
+1. Following the [Travis Getting started](https://docs.travis-ci.com/user/getting-started/) guide for syncing your GitHub repository with Travis.  You may need to initialize some settings manually in your [profile](https://travis-ci.org/profile) page.
+1. Add a `.travis.yml` file to your git repository.
+```
+language: node_js
+node_js:
+  - 4
+  - 6
+cache:
+  directories:
+    - node_modules
+script:
+  - npm test
+  - npm run build
+```
+1. Trigger your first build with a git push.
+1. [Customize your Travis CI Build](https://docs.travis-ci.com/user/customizing-the-build/) if needed.
+
+### On your own environment
+##### Windows (cmd.exe)
+
+```cmd
+set CI=true&&npm test
+```
+
+```cmd
+set CI=true&&npm run build
+```
+
+(Note: the lack of whitespace is intentional.)
+
+##### Linux, macOS (Bash)
+
+```bash
+CI=true npm test
+```
+
+```bash
+CI=true npm run build
+```
+
+The test command will force Jest to run tests once instead of launching the watcher.
+
+>  If you find yourself doing this often in development, please [file an issue](https://github.com/facebookincubator/create-react-app/issues/new) to tell us about your use case because we want to make watcher the best experience and are open to changing how it works to accommodate more workflows.
+
+The build command will check for linter warnings and fail if any are found.
+
+### Pre-commit Hook
+
+You can run tests against "staged" files before each Git commit by integrating the test script in pre-commit hook.
+
+First, install [husky](https://github.com/typicode/husky) & [lint-staged](https://github.com/okonet/lint-staged):
+```sh
+npm install --save-dev husky lint-staged
+```
+
+Because we don't need the tests to run in watch mode, we need to set `CI` environment variable to `true`. As described in section [Continuous Integration](#continuous-integration).
+
+To make sure it's cross-platform, let's install [cross-env](https://github.com/kentcdodds/cross-env):
+```sh
+npm install --save-dev cross-env
+```
+
+Then add this config to `package.json`:
+```
+"scripts": {
+  ...
+  "precommit": "lint-staged",
+  "test:staged": "cross-env CI=true react-scripts test --env=jsdom --findRelatedTests"
+},
+"lint-staged": {
+  "src/**/*.js": [
+    "test:staged",
+    "git add"
+  ]
+}
+```
+
+This way, instead of running all tests, passing `--findRelatedTests` flag in test script will save our times a lot because Jest will run only the minimal amount of tests related to changes in your staging area.
+
 ### Writing Tests
 
 To create tests, add `it()` (or `test()`) blocks with the name of the test and its code. You may optionally wrap them in `describe()` blocks for logical grouping but this is neither required nor recommended.
@@ -1228,62 +1318,6 @@ Run `npm test -- --coverage` (note extra `--` in the middle) to include a covera
 
 Note that tests run much slower with coverage so it is recommended to run it separately from your normal workflow.
 
-### Continuous Integration
-
-By default `npm test` runs the watcher with interactive CLI. However, you can force it to run tests once and finish the process by setting an environment variable called `CI`.
-
-When creating a build of your application with `npm run build` linter warnings are not checked by default. Like `npm test`, you can force the build to perform a linter warning check by setting the environment variable `CI`. If any warnings are encountered then the build fails.
-
-Popular CI servers already set the environment variable `CI` by default but you can do this yourself too:
-
-### On CI servers
-#### Travis CI
-
-1. Following the [Travis Getting started](https://docs.travis-ci.com/user/getting-started/) guide for syncing your GitHub repository with Travis.  You may need to initialize some settings manually in your [profile](https://travis-ci.org/profile) page.
-1. Add a `.travis.yml` file to your git repository.
-```
-language: node_js
-node_js:
-  - 6
-cache:
-  directories:
-    - node_modules
-script:
-  - npm test
-  - npm run build
-```
-1. Trigger your first build with a git push.
-1. [Customize your Travis CI Build](https://docs.travis-ci.com/user/customizing-the-build/) if needed.
-
-### On your own environment
-##### Windows (cmd.exe)
-
-```cmd
-set CI=true&&npm test
-```
-
-```cmd
-set CI=true&&npm run build
-```
-
-(Note: the lack of whitespace is intentional.)
-
-##### Linux, macOS (Bash)
-
-```bash
-CI=true npm test
-```
-
-```bash
-CI=true npm run build
-```
-
-The test command will force Jest to run tests once instead of launching the watcher.
-
->  If you find yourself doing this often in development, please [file an issue](https://github.com/facebookincubator/create-react-app/issues/new) to tell us about your use case because we want to make watcher the best experience and are open to changing how it works to accommodate more workflows.
-
-The build command will check for linter warnings and fail if any are found.
-
 ### Disabling jsdom
 
 By default, the `package.json` of the generated project looks like this: