React Unit Testing with Vitest, and React Testing Library.

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.
Let's start!

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
  • Go to vite.config.ts and add the test object with its type definition.
  • Add the test script to package.json

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 App.tsx file. 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 src folder, and create the setupTest.ts; This file will import the Testing Jest Dom Library globally.
  • Go to vite.config.ts and add the newly created file to the test object.
  • Lastly, go to tsconfig.json and include the path of the setupTest.ts.

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.tsx and insert the following code.
Git Bash
cd src mkdir routes cd routes touch about.tsx
  • Go to main.tsx add the Browser Router and import the about route.
  • Add your link to the App.tsx and 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; then, build form-input.tsx and copy the following code. Remember! to use TypeScript and pass the label in an actual project.

Git Bash
cd src mkdir components cd components touch form-input.tsx
  • Create the form.tsx in the components folder.
  • Now that we have a form, it's time to test it. Create a test folder inside the components, then create form.test.tsx.
Git Bash
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 context folder, then make the user-context.tsx, this file will store all the states related to the user.
Git Bash
cd src mkdir context cd context touch user-context.tsx
  • Go to main.ts and wrap the App component inside the user provider.
  • Go to the form.tsx and bring the Context; so it can store the email value.
  • Add a new test to the form.test.txs to check if the user context is passing values, and displaying the email in the Dom. That's it for now, see you next time!