🧪 Cómo usar bUnit para probar componentes en Blazor (Guía completa para principiantes)

Las pruebas unitarias en Blazor ahora son más fáciles que nunca gracias a bUnit, un framework diseñado específicamente para testear componentes de forma rápida, efectiva y sin necesidad de navegador.

En este artículo aprenderás:

• Qué es bUnit y por qué deberías usarlo.
• Cómo instalarlo e integrarlo con tu proyecto Blazor.
• Cómo escribir pruebas unitarias simples y efectivas.
• Un ejemplo práctico con un componente Counter.
• Buenas prácticas y recursos para profundizar.

🔍 ¿Qué es bUnit?

bUnit es un framework de testing para componentes Blazor, basado en xUnit, que permite hacer pruebas unitarias sin usar un navegador real ni herramientas como Selenium.

Con bUnit puedes:

• ✅ Renderizar componentes en memoria
• ✅ Simular eventos como onclick o oninput
• ✅ Validar el HTML generado por tus componentes
• ✅ Inyectar servicios falsos para aislar dependencias

📌 Ideal para pruebas rápidas, confiables y fáciles de mantener en proyectos Blazor Server o WebAssembly.

🏗️ ¿Cómo generar la solución completa con bUnit?

Antes de instalar bUnit, es importante entender cómo organizar tu proyecto Blazor y tu proyecto de pruebas.

🔹 1. Crear la solución principal

dotnet new sln -n BlazorApp
dotnet new blazorserver -n BlazorApp.UI
dotnet sln add BlazorApp.UI

📌 Puedes reemplazar blazorserver por blazorwasm si usas WebAssembly.

🔹 2. Crear el proyecto de pruebas con xUnit

dotnet new xunit -n BlazorApp.Tests
dotnet sln add BlazorApp.Tests

🔹 3. Referenciar el proyecto Blazor desde el proyecto de pruebas

dotnet add BlazorApp.Tests reference BlazorApp.UI

🔹 4. Instalar bUnit en el proyecto de pruebas

cd BlazorApp.Tests
dotnet add package Bunit

Si estás usando WebAssembly:

dotnet add package Microsoft.AspNetCore.Components.WebAssembly

🔹 Estructura del proyecto

BlazorApp/
│
├── BlazorApp.sln
│
├── BlazorApp.UI/           ← Proyecto Blazor principal
│   └── Pages/
│       └── Counter.razor
│
└── BlazorApp.Tests/        ← Proyecto de pruebas con bUnit
    └── CounterTests.cs

✅ ¡Con esto, ya tienes una solución bien organizada con soporte para pruebas unitarias usando bUnit!

📦 Instalación de bUnit

1. Si no lo hiciste antes, ve al directorio del proyecto de pruebas:

   cd BlazorApp.Tests

2. Agrega el paquete de bUnit:

   dotnet add package Bunit

3. Si usas Blazor WebAssembly:

   dotnet add package Microsoft.AspNetCore.Components.WebAssembly

🧪 Primer ejemplo: Probar un componente con contador

1. Componente Counter.razor

<h3>Contador</h3>

<p>Valor actual: @count</p>

<button @onclick="Incrementar">Incrementar</button>

@code {
    private int count = 0;

    void Incrementar()
    {
        count++;
    }
}

2. Prueba unitaria con bUnit

using Bunit;
using Xunit;
using BlazorApp.UI.Pages;

public class CounterTests : TestContext
{
    [Fact]
    public void CounterStartsAtZero()
    {
        var cut = RenderComponent<Counter>();
        cut.Markup.Contains("Valor actual: 0");
    }

    [Fact]
    public void ClickingButtonIncrementsCounter()
    {
        var cut = RenderComponent<Counter>();
        cut.Find("button").Click();
        cut.Markup.Contains("Valor actual: 1");
    }
}

🧠 ¿Qué está pasando aquí?
RenderComponent<Counter>(): Renderiza el componente en un entorno virtual.
cut.Find("button").Click(): Simula un clic en el botón.
cut.Markup.Contains(...): Valida el HTML generado.

✅ Buenas prácticas al usar bUnit

• 📌 Nombrar tus pruebas claramente: CounterStartsAtZero, ClickIncrements.
• 🧪 Usar Find, MarkupMatches, HasChanged según lo que necesites validar.
• 🔌 Simular dependencias con Services.AddMock<> para testear componentes complejos.
• 📂 Separar pruebas por componente para mantener orden en tu solución.

🌱 ¿Qué más puedes probar con bUnit?

• Componentes con EventCallback, CascadingParameter, @inject
• Validaciones en formularios
• Condicionales (if, else, switch)
• Clases CSS y atributos dinámicos
• Servicios como HttpClient o NavigationManager

📚 Recursos recomendados

• 🌐 Documentación oficial de bUnit
• 📘 Testing en Blazor – Microsoft Docs
• 🧪 Repositorio GitHub de bUnit

🧾 Conclusión

bUnit hace que probar componentes de Blazor sea simple, rápido y confiable. Si trabajas en aplicaciones con UI dinámica, comenzar a usar bUnit te ayudará a escribir software más robusto y menos propenso a errores visuales o lógicos.

¿Ya lo estás usando? ¿Quieres ver un tutorial más avanzado con mocks, DI o componentes anidados? ¡Cuéntamelo en los comentarios!