Setting Up React with Git Hooks to Automatically Test and Lint before Pushing Code

One topic I have gotten more and more excited about throughout my software development career is quality! Perhaps I've been burned one too many times. Alas, I decided to test adding git hooks to a React project using the husky package. My goal was to make it so that, prior to either committing code or pushing to a git repository, both the eslint linter and jest test suite must run. The code repository that accompanies this post can be found here.

Set Up from Scratch

Setting this up from scratch turned out to be fairly trivial. I started out by boostapping with create-react-app.

create-react-app fun-with-git-hooks
cd fun-with-git-hooks

Next, I installed husky, which claims to be "git hooks made easy." (Accurate!). Since it's only necessary in the dev environment, only install it as a dev dependency.

npm install husky --save-dev

We actually end up needing one additional dev dependency called cross-env, which will allow us to configure a CI environment variable in whatever environment we're currently in.

npm install cross-env --save-dev

Finally, let's make some modifications to our package.json file to accomplish a few things:

• Reconfigure jest tests to be run in Continuous Integration mode
• Add a linting command (we didn't have to install eslint seperately as it bootstraps with create-react-app)
• Configure our husky hooks to first lint and then test

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "cross-env CI=true react-scripts test --env=jsdom",
  "eject": "react-scripts eject",
  "lint": "eslint src"
},
"husky": {
  "hooks": {
    "pre-commit": "npm run lint && npm test",
    "pre-push": "npm run lint && npm test"
  }
}

And that's it! Now, whenever you try to commit or push your code, you will be prevented from doing so if linting or testing fails.

Quality for the win!

The Annoyance Trade-Off

Admittedly, forcing tests to pass before each commit (or even each push) might hinder your workflow so much that it's not worth it. That's okay! Importantly, you should find the configuration that works best for you. For my current project, I make sure linting passes before each push and then automated tests are run by a Continuous Integration server without blocking git commits or pushes. Find what works for you!

Comments

[Sarah 🦄]

I love using git hooks like this, it helps promote quality across projects. I think it's worth the trade off, slight annoyance on commit/push but higher confidence in code going in!

[Eric Sundquist]

And then wait for the annoyances when your colleagues commit code with --no-verify, and you can't commit again until you fix their mistakes. 🙄