Self-documentation of Hire +Plus: V1 (2)

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.

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.

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

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.

Code inside the launch.spec.js file.

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

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).

ESlint extension I'm using

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

source code