How to Unit Test your React TypeScript App With Vitest and React Testing Library.
Hello 👋🏼, This is the second part of my Unit Testing Tutorial.
We'll learn how to test a React TypeScript application.
Our working environment is Vite, TypeScript, Vitest for Unit Testing, and the React Testing Library.
First, we'll make some simple test cases; Then, we'll progress into more advanced topics, like how to test React Router Dom and Test a React Context.
Set Up your React App with Vite and Vitest.
- Install Vite and choose React TypeScript as your template.
npm create vite@latest testing-tutorial -- --template react-ts cd testing-tutorial npm install npm run dev
After checking that your app works, install Vitest, happy-dom as its testing environment, and the React Testing Library all as dev dependencies; Check the Vitest installation for more info.
npm install -D vitest happy-dom @testing-library/react
vite.config.tsand add the test object with its type definition.
Add the test script to
Run your first Vitest Case.
To run the first test, create a new file in the root
and call it
App.test.tsx. This file will contain
all the tests related to the
In the following code, mount the App component and test that it exists
with its elements.
npm install -D @testing-library/jest-dom
Go to the
srcfolder, and create the
setupTest.ts; This file will import the Testing Jest Dom Library globally.
vite.config.tsand add the newly created file to the test object.
Lastly, go to
tsconfig.jsonand include the path of the
- Now you can use additional testing functions using the Testing Library Jest Dom 👍.
Testing React with the User Event Library.
Next, we'll test user events, like buttons, links, and logos. First, we'll use the counter that came with the Vite default installation, get the Button by text using the React Testing Library, and check that the value increments.
Example test using the Testing Library User Event. First, install the library. In this test case, we check that the logo receives one click.
npm install -D @testing-library/user-event
How to test the React Router?
We'll start by installing the React Router Dom. and create an about link with its about page.
npm install react-router-dom
First, create a new
routesfolder; Inside, create
about.tsxand insert the following code.
cd src mkdir routes cd routes touch about.tsx
main.tsxadd the Browser Router and import the about route.
Add your link to the
App.tsxand test that it works.
- Create a test case to check the about link receives one click from the user.
How to test a React form input?
In this part of the tutorial, we'll create a reusable input field and test it
with its props. First, create a
components folder in the root;
form-input.tsx and copy the following code.
Remember! to use TypeScript and pass the label in an actual project.
cd src mkdir components cd components touch form-input.tsx
Now that we have a form, it's time to test it. Create a
testfolder inside the
components, then create
cd src && cd components mkdir test cd test touch form.test.tsx
How to Create and Test the React Context?
Let's create a simple React Context that will receive the email input we previously created, then test it. This lesson will have major refactoring as adding a context will change how the App works.
First, create the
contextfolder, then make the
user-contex.tsx, this file will store all the states related to the user.
cd src mkdir context cd context touch user-contex.tsx
main.tsand wrap the App component inside the user provider.
Go to the
form.tsxand bring the Context; so it can store the email value.
Add a new test to the
form.test.txsto check if the user context is passing values, and displaying the email in the Dom. That's it for now, see you next time!