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,
the cypress environment will open, and you'll see sample tests in the integration folder.
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!
Top comments (0)