How To Teasting in React or noget :)

How To tests i react.js

1. start ud med at kigge i dit komponent, og find ud af hvad du gerne vil ha testet.
2. importer dit komponent fra filen fx. import Navbar from "./Navbar";
3. derefter importer de ting du skal bruge for at teste fx. import { render, screen } from "@testing-library/react";

4. skriv din test:
   

   test("if navbar renders with the text 'home'", function(){
   render(<Navbar />)
   var LinkText = screen.getByText(/home/i);
   expect(LinkText).toBeInTheDocument();
   });
   

5. til sidst køres npm run test i konsollen, hvorefter vi får svar på om testen PASS'er eller FAIL'er

How to pre-commit hook med test

1. for at lave et pre commit hook skal vi først ha installeret husky ved hjælp af at skrive npx husky install i vores konsol.
2. derefter skal vi skrive endnu en linje i konsollen npx husky add .husky/pre-commit "npm test" 2.1 her kan der dog ske nogle problemer med at husky ikke gider virke med det samme, der skal vi blot fjerne "npm test" fra vores command, og så derefter tilføje en linje i vores pre-commit fil i .husky mappen, der hedder npm test

How To Prettier

1. for at få Prettier til at virke skal vi først installere nogle NPM pakker som developer dependencies, dette gøres nemmest og hurtigst ved at skrive npm i -D prettier eslint-config-prettier i vores konsol.
2. imens pakkerne installere kan du lave de 2 filer der skal bruges til prettier .prettierignore og .prettierrc.json
3. lav setup til både din .prettierignore, og din .prettierrc.json. .prettierignore skal indeholde følgende linjer:

node_modules
build
coverage
.vscode

1. Derefter kan du configure din .prettierrc.json til hvordan du vil have din kode formatteret det kan fx se sådan her ud:

{
    "PrintWidth": 120,
    "useTabs": true,
    "semi": true,
    "singleQuotes": false,
    "quoteProps": "consistent",
    "bracketSpacing": true,
    "jsxBracketSameLine": true,
    "arrowparens": "avoid"
}

How To Pre-commit hook med prettier

1. For at lave pre-commit hooks med prettier skal vi igen starte ud med at få installeret .husky mappen ved at skrive npx husky install i vores konsol.
2. derefter skal vi skrive følgende kode npx mrm lint-staged i vores konsol, for at vores pre-commit hooks virker med prettier packagen.

herefter kan vi lave vores commits, as per usual, og vores setup vil tjekke om vores tests virker, og køre vores prettier setup, inden det bliver sendt ud på vores gitHub repository