Unit Testing

The practice of testing a single piece of code—usually a component or a hook—in complete isolation from the rest of the application.

• Goal: To verify that a component renders and behaves correctly for a specific set of props and user actions, without relying on other components.

What it checks:

• Conditional Rendering: Does it show a "loading" state if the isLoading prop is true?
• Event Handlers: When a button is clicked, does it call the function passed in the onClick prop?
• Prop Display: Does it correctly display the text passed in a title prop?

Integration Testing

A method where several components are rendered together to verify their interactions and data flow, simulating a real piece of your application's UI.

• Goal: To ensure components communicate correctly through props, context, or shared state (e.g., Redux/Zustand).

What it checks:

• Complete user flows (e.g., filling out a form and seeing the result).
• How an action in one component (a click) affects another.
• The correct rendering of components based on application state.

¿What tools do we need ?

Vitest

A modern and ultra-fast test runner.

• Function: It provides the environment where your tests run. It gives you the tools to define tests (describe, it) and check if the outcome is what you expect (expect).

React Testing Library

A utility library for testing React components the way a user would.

• Function: It lets you render components in a test environment, then find and interact with them (clicking buttons, filling forms) to verify their visible behavior.