How to setup React for testing

Introduction

Hey all, within this I'll be going step-by-step my journey in creating my personal website which will house my portfolio and CV.

I'll be building it with React + Typescript as I do most of my projects and I'll be building it using Test Driven Development.

The Project So Far

Before deciding to blog this process I have already developed a quick sketch of the design on Figma, it currently looks like so:

I know it might not be the best design, but hey, I'm an engineer not an art student.

Setting up React

For this project I'll be using Create React App to install all the necessary dependencies, and I'll be using the TypeScript template. For this we'll just plug this into the terminal: npx create-react-app . --template typescript.

Now we'll be presented by our lovely default app.
We'll make a few changes so it's a bit simpler:

Setting up our Testing

By default Create React App installs Jest, however we'll be using React Testing Library for unit testing, and Cypress for end-to-end testing.

We'll just run npm install cypress, then we need to add "cypress:open": "cypress open" to our scripts in package.json. Finally we need to run Cypress to allow it to do it's first time install, npm run cypress:open.

GitHub

To view where we're at you can follow this link to the final commit at the end of each post to follow along!