How to use Prettier, testing in react and pre-commit for both
Published: 2021-02-19 11:23:20

#Prettier
### Getting started
To use prettier you just go to the terminal and type `npm i -D prettier` and `npm i -D eslint-config-prettier` eslint lets you use your favorite shareable config without letting its stylistic choices get in the way when using Prettier.
**Before** you run/start prettier you need to make a file called `.prettierignore` in this file you can tell prettier to ignore certain files and folders here I what I use ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wih5olij9vwjna3b6dv1.PNG)

### Configuration
If you aren't happy with the default settings for prettier then you can make a new file called `.prettierrc.json` in here you can type different rules/setting so it fits your preference for example
![an image of 6 different rules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vcoijg15nsh4nxqul7h.PNG)
You can also go check out prettier's website to see what options you can change and how [Prettier](https://prettier.io/docs/en/options.html)

### How to use prettier
To use prettier you can either use the terminal or make a script for it in `package.json` to make the script you just go to `"scripts"` and put in this code `"prettier": "prettier --write ."`
![prettier script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0evsjptdd39gqkdt5kl.PNG)
<br>

#Tests in react
<br>
To make a test you need a file to test on in my case I'm gonna use a file called `Featured.js` and I call the test file `Featured.test.js` like this. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03gkn46jdgfxtwyjs5xe.PNG)
In the test file you have to import 3 things you need the component/page that you are testing and `import { render, screen } from '@testing-library/react';`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blw323codarav99mnqbn.PNG)
After that you can start coding your test. Let's say you want to test if a specific word is on the page just as an example ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adabcoav1nhfxoy2pguc.PNG)
To run the test you go to `package.json` and under `scripts` you type `"test": "react-scripts test"` now you can type `npm run test` in the terminal and the test will run.
<br>
when you run the test it will render the component/page and check if it can find the word "Rock" anywhere on the page.
 <br>

# Run your tests and Prettier before a commit
## Prettier pre-commit hook
To set up prettier pre-commit hook you need to type `npx mrm lint-staged` in your terminal. This will install pre-commit hook for prettier. Now if you go into `package.json` and under `scripts` and type this `"prettier": "prettier --write ."` then the code should be prettified when you commit.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ft2nbt0nbkzp08u65p5s.PNG)
<br>

## Testing pre-commit hook
To make your test/tests run before you commit you need husky you install husky by typing `npx husky install` in your terminal.
 <br>
Then you need a pre-commit, file to get the file you go back to your terminal and type 
<br>
`npx husky add .husky/pre-commit "npm test"`
<br>
This should create a folder with a file inside it but in my case this didn't work so if you have the same problem you need to type this in the terminal instead `npx husky add .husky/pre-commit` this will create the folder and file but you need to manualy add `npm test` in the `.husky/pre-commit` file so it looks like this.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xgwm1dqhugoeysc48rl.PNG)
Now add `npm run prettier` right above `npm test` to make sure that the code get prettified and then tested in that order.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kr4vpstrjfft5u2r8966.PNG)
<br>
## The final steps
If you try to commit now the code will be prettified and tested but your test will continue running which we don't want because then it will never commit.
<br>
To fix this you need to install cross-env which you do by typing: <br>
`npm i -D cross-env`
<br>
and then go to `scripts` in `package.json` and change `"test": "react-scripts test"` to `"test": "cross-env CI=true react-scripts test"`
This will fix the problem and commit your code if the test passes.