Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
wants to merge 16 commits into from
Closed

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

Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
f6b723b
docs(test): reorganize `Running Test` section
luftywiranda13 Jun 22, 2017
126089a
docs(test): add instruction on how to integrate test in pre-commit hook
luftywiranda13 Jun 23, 2017
9438203
Merge branch 'master' into chore/docs
luftywiranda13 Jun 23, 2017
89bc434
docs(test): use `cross-env`
luftywiranda13 Jun 23, 2017
f63c8cc
Merge branch 'master' into chore/docs
luftywiranda13 Jun 27, 2017
68f4d5c
Merge branch 'master' into chore/docs
luftywiranda13 Jun 27, 2017
96fa3ed
chore(docs): move VC & CI sections
luftywiranda13 Jun 27, 2017
6cec549
chore(docs): list `pre-commit` in TOC
luftywiranda13 Jun 27, 2017
5e42aea
chore(docs): move `pre-commit` after `continuous integration` section
luftywiranda13 Jun 27, 2017
d437cd8
docs: add `Useful Hooks` section
luftywiranda13 Jul 4, 2017
a0e0246
Merge remote-tracking branch 'origin/master' into pr/2598
luftywiranda13 Jul 4, 2017
a4983ac
docs: move `Formatting Code Automatically` under `Useful Hooks`
luftywiranda13 Jul 4, 2017
c16f277
docs: update link about `prettier` to point to CRA internal docs
luftywiranda13 Jul 4, 2017
1f29882
docs: move `Pre-Commit Hook` under `Useful Hooks`
luftywiranda13 Jul 4, 2017
2c662c1
docs: update heading
luftywiranda13 Jul 4, 2017
b0942ae
style: add whitespace
luftywiranda13 Jul 5, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 34 additions & 34 deletions packages/react-scripts/template/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Running Tests](#running-tests)
- [Filename Conventions](#filename-conventions)
- [Command Line Interface](#command-line-interface)
- [Pre-commit Hook](#pre-commit-hook)
- [Writing Tests](#writing-tests)
- [Testing Components](#testing-components)
- [Using Third Party Assertion Libraries](#using-third-party-assertion-libraries)
Expand All @@ -60,6 +59,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Coverage Reporting](#coverage-reporting)
- [Version Control Integration](#version-control-integration)
- [Continuous Integration](#continuous-integration)
- [Pre-commit Hook](#pre-commit-hook)
- [Disabling jsdom](#disabling-jsdom)
- [Snapshot Testing](#snapshot-testing)
- [Editor Integration](#editor-integration)
Expand Down Expand Up @@ -1085,39 +1085,6 @@ The watcher includes an interactive command-line interface with the ability to r

![Jest watch mode](http://facebook.github.io/jest/img/blog/15-watch.gif)

### 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.
Expand Down Expand Up @@ -1327,6 +1294,39 @@ The test command will force Jest to run tests once instead of launching the watc

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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We just merged a very similar PR for Prettier commit hook. Should we unify those sections? We can leave non-hook descriptions in both and link to a section where both hooks are described with a common setup step. Can be called "Useful Hooks".

Copy link
Contributor Author

@luftywiranda13 luftywiranda13 Jun 28, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it really needed to add docs about prettier in CRA? since there's no special step to do it in a CRA based project.
people can read through prettier docs then do exactly what the docs say, it'll just work. and IMO by merging #2006 will make CRA docs bloated day by day.

on the other hand, i think we should add docs & explain something which are specific/special in CRA based project like how to run test, storybook, coverage reporting, linting, etc. yeah basically just like what we did so far in our docs except for #2006.

what do you think? but if you think that it doesnt matter, i'll go on and do what you suggested here 😊

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already added docs about Prettier (#2006 is merged). I'm referring to consolidating those two sections and removing duplication between them.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay, any suggestion on where to put the "Useful Hooks"?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Put it somewhere you like, I'll take a look and think about it


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.

### Disabling jsdom

By default, the `package.json` of the generated project looks like this:
Expand Down