How to Add End-to-End Tests to Your React Project
Bekah Hawrot Weigel
As developers, we’re often faced with situations that require us to move fast and hopefully not break things. Sometimes this will seem like an unreasonable and insurmountable task. We can do things to improve our chances of success, though. In my last How to Migrate your React Project to TypeScript, we talked about using TypeScript to ensure reliability. In this post, we’ll talk about adding Cypress for End-to-End testing in your React project to help ensure that you’re shipping code that doesn’t break your project.
5 Reasons to Add End-to-End Testing
There are a lot of reasons–including the ones above–to migrate to TypeScript, but in case those didn’t convince you, here are five more:
Ensures what you expect to happen in your code happens;
Provides an onboarding opportunity for new contributors;
Decreases bugs in your code;
Allows you to feel confident in your code;
Decreases time to prod.
Getting Started
Since we’re building on an existing project, here are some resources to familiarize yourself with:
The first thing we want to do is get the app running as is so we can ensure that we won’t be making any breaking changes as we upgrade.
Run the React Project
Clone the repository.
Create a Deepgram API Key with an admin or owner role - get it here.
Create a file called .env and add DG_KEY='your-API-key'
Run npm i in your terminal
Run npm run start in your terminal
Run node server/server.js in your terminal
If it doesn’t automatically open, navigate to http://localhost:3000/. You should see the project running.
Adding Cypress for End-to-End Testing
Lucky for us, Cypress can be quickly added to your project and has excellent documentation, which decreases friction if you’re learning tests for the first time. To add Cypress, navigate to your terminal with the project open, and run npm install cypress . If you’re like me, you’ll have it installed in under thirty seconds. Nice. If you want to see what it looks like to run a test or to see the testrunner, you can run npx cypress open in your terminal. If you do that, you should see a screen that looks like this: