Self-documentation of Hire +Plus: V1 (2)
Tags: webdev, react, typescript, beginners
Published: 2022-05-23 07:31:58

## What I cover

- Setup Typescript
- Fix typescript errors
- Setup Cypress with React
- First test file
- Good VScode extensions to use

---

Before I dive into creating the major parts of this app, I want to start small and build up. I added typescript and cypress testing early to get an early start.
 

## Adding Typescript
 
Since this is an existing project, I need to install typescript separately.

**First:** This will install everything you need to get typescript installed 
`npm install --save typescript @types/node @types/react @types/react-dom @types/jest`

**Second:** create a `tsconfig.json` file in the root dir and paste this. It is a basic typescript setup to get everything working. 

```
{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "downlevelIteration": true,
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx"
    },
    "include": ["src"]
}

```
**Lastly:** I converted the react component extension from `.js/.jsx` to typescript extension (`.ts/tsx`). 

### Launch Component as Typescript
Does not seem like much of a change here, but I changed the extension of the component to `.tsx` and converted it to typescript. `The const Launch: React.FunctionalComponent = () =>` ensures this components type is a functional component with no props. Simple transition, but it will get more complex as I go along. 

![Launch to typescript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7mp15f0txopaw4ybnui7.png)

### Fix error in `index.tsx` file
I got this error when I converted the **Launch** component. I discovered (with googling) that typescript needed to be sure the element with the id of root was going to be in the `dom` because it might be null.   

![Typescript error in index.tsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v34ojbuztciyvlsbumt5.png)


The solution was to add an ! when grabbing the root element. I'm ensuring that there will always be an element with an id of root
[link to solution on stackoverflow](https://stackoverflow.com/questions/63520680/argument-of-type-htmlelement-null-is-not-assignable-to-parameter-of-type-el)

![Typescript error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vv70sw4j5fw6fxd80vb8.png)

Now that we fixed that error, we officially have typescript configured and working. Let's get into testing. 

## Using Cypress with React
I'll be using cypress to run tests. Setting it up was simple (I'm glad!). Cypress has its dashboard and environment to run tests. Cypress can run unit, integration, and end-to-end tests with cypress. 

**First:** Installing cypress with npm
`npm install cypress --save-dev` 

**Second:** Open up the cypress environment 
`npx cypress open` 

Two things will happen, 
1. the cypress environment will open, and you'll see sample tests in the integration folder. 

2. in the project folder, a cypress folder is created with the same sample test. This is where you'll write your tests at. 

**Lastly**, I wrote a simple test to make sure the launch page is rendering correctly. I created a `launch.spec.js` file inside the integration folder. 

![folder structure for cypress](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3qvbmh2efdwkvhssjbv.png)

Code inside the `launch.spec.js` file.
![test code inside launch.spec.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yjm1vr00x3zsvjewpfo.png)

after adding this test, I went back to my testing environment, I can see that it passed. 

![passing test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gs2cvvxu4svpm61vya7j.png)

I suggest going to the cypress website to look further into the details if this code seems confusing. 

P.S. I suggest using this VScode extension to help with react typescript snippets (very helpful).

![React typescript snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0ae4xu2wrgpabft9v63.png)

ESlint extension I'm using 

![ESlint extension vscode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9cnj8ot4vui61cobl7u.png)

That's all for now, stay tuned for more! 

[source code](https://github.com/AjeaSmith/hire-plus-v1.git)