Unit testing is a crucial part of software development. It helps ensure that each piece of code in your project functions correctly and works as expected. In this blog post, we will explore how to use Vitest, a lightweight JavaScript testing framework, to write unit tests for a React project.

Why is unit testing important?

A meme about writing code to check if the code you wrote earlier was right

In 2014, a major US retailer experienced a significant data breach that resulted in the theft of millions of customers’ credit and debit card information. The breach was caused by a vulnerability in the company’s payment system software, which was not detected during testing.

If the company had implemented more rigorous unit testing practices, they might have been able to detect and fix the vulnerability before it was exploited. By thoroughly testing individual units of code in isolation, developers can identify and resolve potential security vulnerabilities before attackers can exploit them.

This example demonstrates the critical importance of unit testing in security-critical applications, particularly for organizations that handle sensitive customer data. By implementing robust unit testing practices, developers can help prevent costly security incidents and protect the privacy and security of their customers’ data.

In this blog, we will talk about this amazing framework named Vitest, which makes unit testing so much easier.

Vitest

If you have been working with unit testing already, “jest” and “cypress” might sound familiar. Vitest includes all of their best features and these added benefits:

Component testing for Vue, React, Svelte, Lit, and more
Out-of-the-box TypeScript / JSX support
ESM first, top-level await
Multi-threading workers
Filtering, timeouts, concurrent for suite and tests
Jest-compatible Snapshot
Chai built-in for assertions + Jest expect compatible APIs
Designed with a Jest compatible API

Setting up a React project with Vitest

First, we need to create a new React project with Vite and TypeScript. You can do this by running the following command in your terminal:

A command that goes on the terminal to create a React project with Vitest and Typescript (npm init vite@latest my-react-typescript-vite-app --template react-ts)

Replace “my-react-typescript-vite-app” with the name of your project.

Next, we need to install Vitest as a dev dependency in our project. You can do this by running the following command:

A command that goes on the terminal to install Vitest as a dev dependency (npm install --save-dev vitest)

This will install Vitest in your project.

Writing tests with Vitest

Now that we have our project set up with Vitest, let’s create a simple React component and write a test for it. Create a new file called Button.tsx in the src directory of your project and add the following code to create a simple Button component:

a code with a button component with a onClick function

This component takes two props: onClick and label. When the button is clicked, the onClick prop is called. The label prop is used as the text of the button.

Now let’s write a test for this component. Create a new file called Button.test.tsx in the src directory of your project and add the following code to write a test for the Button component:

A code that imposrts the button that you just created and a code to test the button

In this test, we use Vitest’s render function to render the Button component. We pass in a mock onClick function using Jest’s jest.fn() function. We then use Vitest’s getByText function to find the button with the label “Click me”. Finally, we use Vitest’s fireEvent function to simulate a click event on the button, and then we assert that the onClick function was called once.

Running tests with Vitest

To run the tests, open your terminal and navigate to the project directory. Then run the following command:

A command that goes on the terminal to run the test (npm test)

This will run all the tests in your project, including the test we just wrote for the Button component.

Conclusion

In this blog post, we explored how to use Vitest to write unit tests for a React project. We set up a new project with Vite and TypeScript, created a simple React component, and wrote a test for it using Vitest’s testing framework. By following these steps, you can write effective unit tests for your React components and ensure that your code is functioning correctly.

Remember, writing tests is an essential part of software development. It helps catch bugs early in the development process, reduces the risk of introducing new bugs, and helps ensure that your code works as expected.