Test 
Tags: react, testing, prettier
Published: 2021-02-17 13:00:08

# React Testing
For at benytte sig af test og debugging i react skal man gøre følgende:

1. Til at starte med skal du lave en ny mappe - mappens navn må **ikke** indeholde store bokstaver. 

2. Du skal sørge for at din editor (VsCode) er helt tom. Dvs. at du *kun* skal kunne se navnet på mappen. 

3. Når du skal til at gå i gang med dit nye react projekt skal du skrive `npx create-react-app .` i terminalen, for at installere *react*.
Den skal lige installere nogle ting den skal bruge, & derfra burde du få 2 mapper: 
    * public
    * src

### Ryd op: 
1. For at få et godt overblik over dine ting er det god idé lige at rydde op i din app.js fil, så den kommer til at se sådan ud: 
    ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x28se1ycto8v9svoqv3n.png)

2. Vi kan også lige fjerne vores  `app.test.js` fra stifinderen.

*Hvis du gerne vil teste alt inden du starter med dine komponenter, skal du springe de to step over, men gør det senere, for ellers vil den slå ud med fejl.* 


### Start med et simpelt komponent:
> Her benytter vi os af en metode ved navn *TDD* som står for *Test Driven Design*. 
> Det betyder egentlig bare at vi laver vores test først og derefter laver vores komponent. 

Jeg har valgt at kaste mig ud i en simpel Navbar i dette tilfælde. Derfor laver vi et komponent der hedder `Navbar.js`. *Du kan kalde dem lige hvad du vil* 

1. Det smarteste vil være at du starter ud med at skrive: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9oc2xneruf2uh5khqeb0.png)
Lige nu vil den ikke returnere noget da vi har skrevet den skal være `null`. 

### Indsæt dit komponent i App.js:
1. Nu er det tid til at importere dit komponent:
   ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytmrsjudht67cxjyawcm.png)

<br> 

### Tilbage til dit komponent: 

2. Nu skal vi oprette en mappe der i mit tilfælde kommer til at hedde `Navbar.test.js` og her laver komponent som vi skal have en simpelt test i. 
Det kan vi gøre således: 
  ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6svx3qrdaszswq11fmws.png)

3. Herefter skriver vi `npm test` i terminalen for at se om  testen er `passed`. 
Lige nu vil den returnere at der er en fejl fordi den ikke er færdig. 

4. Så vi smutter lige ind og retter i vores `Navbar.js` som lige nu returnere `null`:
    ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/grdri14e8jknoyl2m2oj.png)

5. Nu kan du prøve at køre testen igen for at se om den bliver `passed`.


> Når du tester med *Jest* i terminalen for at se om det er noget der er  *passed*, skal du skrive `npm test`. <br>
Her kommer der nogle valgmuligheder frem hvor du kan kan "trykke" lidt rundt og se de forskellige ting.  <br>
> *(For at komme ud af testen igen skal du trykke Ctrl + C i terminalen )*



# Prettier
>Prettier er en pakke der kan hjælpe med at formatere din kode. <br> Det er meget brugbart når hvis man laver et projekt med en anden person, så koden kommer til at være ens. 

1. Ved at benytte prettier skal du skrive således i terminalen:  <br>
 `npm i -D prettier `
 `npm i -D eslint-config-prettier ` 
> Det D vi skriver efter `npm i` sørge for at vi får udvikler værktøjet.  

2. Du skal nu oprette 2 mapper i din stifinder der hedder:
 * `prettierrc.json`
 * `.prettierignore `

3. Under `prettierrc.json` kan du oprette en masse properties som prettier kan bruge til den formatering du gerne vil have.
Dette kunne være et eksempel:
  ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20d2frpribzpe3wkes7x.png) 


### Pre-commit Hook til prettier:

> Denne **pre-commit hook** bruges til ikke at smide en code med "fejl" ind på f.eks. Github

1. Sørg for at da du har installert prettier at det ligger under **devDependencies** inden du fortsætter.

2. Installer `npx mrm lint-staged`- når den er færdig vil den lægge sig ind i `package.json`.
  ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cv5thq7x77tx20sgweaq.png)

3. For at køre *prettier* skal vi i terminalen skrive `npm run prettier`.
Så kan du se i din kode at det vil blive rettet.

### Pre-commit hook
1. Installer:
* `npx husky install`

2. Lav en *pre-commit fil:
* `npx husky add .husky/pre-commit "npm test"` *Hvis ikke den gider samarbejde med dette, skal du skrive `npx husky add.husky/pre-commit` og derefter tilføje en linje i pre-commit filen `.husky` mappen, der hedder `npm test`*.

3. Hvis det virker som det skal vil den automatisk lave en ny mappe i din stifinder som kommer til at hedde `husky`, og den lader vi bare være med at røre ved.
  ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhtkk05giq23wk6txfo0.png)

### Når testen bliver `passed`:
1. Lige nu vil testen kun blive *prettyfied* men uden at blive committet.
For at den skal kunne det skal du installere: <br> 
`npm i --save-dev cross-env`

2. Og derefter skal vi lige gå ind i `package.json`for at lave en lille ændring *(der skal stå som jeg har mærket her)* : 
  ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7l25uoxityxxqrqcim2b.png)