Securing React Router DOM Routes with Vitest and Testing Tools

Are your React Router DOM routes ready to fend off sneaky code invaders? 🕵️‍♂️ Don’t let them catch you off guard! In the wild world of web development, it’s a jungle out there! Test them.

Video Demo

Understanding Different Types of Testing

1. Unit Testing:

• Unit testing focuses on testing individual units or components of a software application in isolation. These units can be functions, methods, or classes. The goal is to verify that each unit functions correctly on its own and meets its specifications.
• Unit tests help catch bugs early in the development process, simplify debugging, and provide documentation for how a unit is expected to behave.

2. Integration Testing:

• Integration testing validates the interactions between multiple units or components of a software application. It aims to ensure that these integrated parts work together as expected.
• Integration tests help identify issues that arise from the combination of different units and ensure the overall system functions correctly.

3. System Testing:

• System testing evaluates the entire system’s functionality to verify that it meets the specified requirements. It tests the entire application as a whole, simulating real-world scenarios.
• System tests are concerned with testing the system’s compliance with the functional and non-functional requirements and ensuring it behaves correctly in various environments.

4. Acceptance Testing:

• Acceptance testing is the final phase of testing before deploying the software. It determines whether the software meets the customer’s expectations and business requirements.
• These tests are usually conducted by end-users or stakeholders to validate that the software is ready for production use.

Prerequisites: To follow along with the testing process, ensure you have the following dependencies installed:

• Vite (npm create vite@latest): A fast development build tool for modern web projects.
• React: A popular JavaScript library for building user interfaces.
• @testing-library/react: A testing utility for React components.
• @testing-library/user-event: A utility for simulating user events in tests.

Creating Routes in Your App :

In this example, we have a simple React application with four routes: Header, Home, Error, and Footer and their components as below.

App page

Error page

Footer page

Header page

Home page

Writing the Test:
Now that we have set up the routes, let’s proceed with testing them using Vite, Testing Library/React, and User-Event. We will perform three tests:

1. Check the Home Route: This test ensures that the Home route displays the welcome message correctly.
2. Check Redirect to Header: This test validates that clicking on the “Header” link redirects the user to the Header route.
3. Check Error Page on Non-Existing Page: This test ensures that the application shows the Error component when a non-existing page is accessed.

Test

continuation of test

Recap

We tested our routes through Vitest, testing-library/react and testing-library/react. (Same in Jest if you are using Babel)

it’s time to tickle your funny bone and prove that testing is the ultimate software savior! 😄🚀