How to run tests before commit in create react app? - reactjs

Question

How to run jest in create react app before commit? I have found couple articles but they are too complicated , without explaining what to do step by step. Could you please explain me how to make it work

Answer 1

You need to use husky package. Here is basic configuration (put it in package.json). It adds pre-commit hook to your git configuration.
"husky": {
"hooks": {
"pre-commit": "CI=true npm run test",
}
}
You can also consider using lint-staged to lint files which you commit. You can see full configuration here.

Answer 2

Maybe you can utilise some npm packages for this.
So, this is not a direct solution but you can include as many things you want instead of using git commands, shells and yml files
Install package Pre-Commit and install git-cz from npm. Using these you can make use of pre-commit and commit in package.json and desired things to them.
Now you can make use of these packages in your packages.json like below
{
"start": "node index.js",
"pre-commit": "lint-staged",
"commit": "git-cz",
"lint": "eslint . --ext .js,.jsx",
}
For example you want to run test cases then pre-commit: npm run test && lint-staged
Because in our project we needed to update documents, checking style-lint, eslint and test cases, so we were using these combination.
But you should not commit directly using git commit -m "message" but with npm run commit.
Hope, this helps.

Answer 3

To do locally you can just write a script which first runs the tests and pipes the exit code and decides whether to really push or not based on the exit code.
By default npm test runs in interactive mode
To exit after running the tests use CI=true
i.e. CI=true npm test

Answer 4

This worked for me:
npm install --save-dev pre-commit
https://www.npmjs.com/package/pre-commit
Then, in package.json:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "CI=true react-scripts test", //<-- update
"eject": "react-scripts eject",
}
Adding CI=true runs all tests without making it interactive
Finally,
"devDependencies": {
"pre-commit": "test"
}