🧪 React Testing Library – Advanced Testing Project - Platzi

👤 Author Jair Neri – Frontend Developer

Learn advanced skills and tool for testing with vite and rtl in a react app. Project built while completing the React Testing Library Course (Platzi, Nov 2024).

Learning Objectives

Understand the fundamentals of testing in React and its importance in preventing critical production errors.

Write unit, integration, and end-to-end tests using Vitest + React Testing Library.

Implement TDD (Table Driven testing) in the development cycle.

Implement TDD (Test Driven Development) in the development cycle.

Test custom hooks applying SOLID principles and spies.

Simulate APIs and handle errors with Mock Service Worker.

Measure and analyze code coverage in React projects.

🛠️ Tech Stack & Tools

• ⚛️ React
• 🧪 React Testing Library (RTL)
• 🧩 Vitest
• 🛡️ TDT / Table Driven Testing
• 🛡️ TDD / Table Driven Development
• 🌐 Mock Service Worker (MSW)
• 📊 Code Coverage Reports

🚀 Tests Covered in this Project

• ✅ Unit testing componentes
• ✅ Successful and failed login tests.
• ✅ Dashboard user and admin role testing.
• ✅ Testing admin-only components.
• ✅ Refactor componentes follow SOLID Principles
• ✅ Validating custom hooks with spies.
• ✅ Handling 500 error responses with MSW.
• ✅ API simulation with Mock Service Worker and Mock Hooks .
• ✅ Code coverage setup with Vitest.
• ✅ Setup Mocks for server

Description

This project is a task management web application developed with React and Vite.

Key features that will be used for testing demonstrations include:

• User authentication
• CRUD operations for tasks
• Global state management
• API calls (simulated with json-server)
• Conditional rendering and error handling

Through this project, students will gain hands-on experience in writing effective tests, using mocks, and simulating user interactions, all within the context of a real and functional React application.

Main Features

• User authentication
• CRUD for tasks (Create, Read, Update, Delete)
• Intuitive and responsive user interface
• Mock API with json-server for local development

User accounts

1. superadmin

   • Email: [email protected]
   • Password: superadmin123!

2. visualizer1

   • Email: [email protected]
   • Password: vis1pass456@

3. visualizer2

   • Email: [email protected]
   • Password: vis2pass789#

4. visualizer3

   • Email: [email protected]
   • Password: vis3pass101$

5. visualizer4

   • Email: [email protected]
   • Password: vis4pass202%

6. Unknown User

   • Email: awdadw
   • Password: dawwda

Technologies

• React
• Vite
• SCSS Modules
• JSON Server (para mock API)

Prerequisites

• Node.js (version 20.10.0 or higher)
• npm or yarn

Installation

Install dependencies:

yarn

or if you use npm:

npm install

Running the development server

To start both the development server and the mock API, run:

yarn start

or if you use npm:

npm run start