Laravel Livewire Aspectos claves para las pruebas de Integración o Unitarias

Daremos una introducción a las pruebas específicas para Laravel Livewire presentando sus métodos de aserción principales.

La clase de Livewire y su estructura es lo mismo una clase con extensión de test para que se para que se entienda que es una prueba extiende de TestCase:

tests/Feature/Blog/IndexTest.php

namespace Tests\Feature\Blog;

// use Illuminate\Foundation\Testing\RefreshDatabase;
// use Illuminate\Foundation\Testing\WithFaker;
// use PHPUnit\Framework\TestCase;

use Livewire\Livewire;
use Tests\TestCase;

use App\Livewire\Blog\Index;
use App\Models\Post;

class IndexTest extends TestCase
{
   /**
    * A basic feature test example.
    */
   public function test_index(): void
   {
       $this
           ->get(route('web.index'))
           ->assertSeeLivewire(Index::class)
           ->assertStatus(200)
           ->assertSee("Post List")
           // ->assertViewHas('posts', Post::paginate(15))
           // ->assertViewIs('livewire.blog.index');
       ;
   }
}

Que es uno de los archivos que tenemos aquí este que tenemos acá de igual manera más adelante teía algunas aclaraciones con esto pero es importante que aquí aparezca test test case porque ya con esto podemos emplear los métodos o un conjunto de métodos de tipo get post put delete para que podamos realizar peticiones a las rutas de nuestra aplicación es decir los componentes ya que eso es lo que nosotros vamos a probar ya que por defecto ya sea que emplees pes o ya sea que emplees php unit ellos obviamente también tienen una clase Test Case:

// use PHPUnit\Framework\TestCase;
use Tests\TestCase;

Pero esas clases no implementan los métodos de tipo get post put delete es decir para hacer peticiones de ese tipo a nuestra aplicación esos son métodos que incorpora la API de Laravel y es por eso que tenemos aquí una clase que lo implementa sería lo implementa por acá por deben estar implementados sea que aquí el anidamiento es un poco fuerte con las clases del ar pero esa viene siendo un poquito el chiste de todo esto por lo demás tenemos múltiples formas de evaluar los componentes Bueno aquí fíjate esto que es el disquet las mismas peticiones que tengamos definidas y aquí por ejemplo está indicando un método de aserción para saber si este componente lo estás empleando internamente es decir si tenemos ahí un anidamiento con los mismos por ejemplo puede ser útil cuando queramos probar el paso por paso que tenemos un gran anidamiento por ahí o directamente si estamos empleando desde un formulario los botones para que tenemos definidos por defectos en lightware lo el componente buton por ejemplo mira estás empleando el componente buton perfecto porque no tienes que emplear otro si no tienes que emplear ese elementos que veas por aquí aquí tenemos otra vez un poquito más rico las opciones que tenemos si la comparamos con inertia que es un poquito más cerrado ya que ahí la idea en inertia buen sería emplear la las pruebas en directamente en Vue y aquí puedes ver un poquito a través Livewire test:

Livewire::test(Index::class)
  ->assertSee("Post List")
  ->assertViewHas('posts', Post::with('category')

El componente y aquí qué demonios estás haciendo en ese componente y generar la Data de prueba que tenemos mil maneras en Laravel yo tengo mi estilo y bueno tú puedes emplear el que tú quieras por lo demás no hay mucho  no quiero adelantarme más ya aquí es por ejemplo para autenticar al usuario que lo podemos hacer directamente en el componente o en el constructor de la clase hay muchas opciones realmente ya esto ya depende un poco de ti Pero simplemente te quería presentar de que esta documentación existe está bastante buena y obviamente cuando Laravel el básico nos quede escaso directamente vamos a venir acá para vargar la redundancia hacer aquí adaptar nuestras pruebas en Livewire.

Primeros pasos en las Pruebas en Laravel Livewire

Vamos a iniciar creando nuestra prueba finalmente para lo que sería el módulo de blog específicamente el index que fue para esto que creamos la prueba que estamos viendo aquí en pantalla aquí importantísimo que ejecutes y veas todo que pase correctamente:

php artisan test

Si no pasa correctamente tienes que chequear que está malo realmente no hemos hecho nada entonces no debería de tener otra salida entonces cuál es la primera cosa que tenemos que hacer por aquí abrir el componente controlador sea lo que sea que estemos empleando aquí es importante acotar de que yo voy a hacer las pruebas mínimas y necesarias por ejemplo una prueba que pudiéramos realizar Sería para el filtro probar distintos filtros pero para no complicar demás el asunto no quiero colocar tantas pruebas y sobre todo aquí al inicio de repente más adelante cuando la terminemos si me la solicitan la puedo implementar pero inicialmente no las voy a implementar simplemente quiero que entre por acá sin ningún filtro Probaré sin ningún filtro aplicado y probar lo que podemos ver en pantalla que sería el listado de publicaciones y por más que sea también aquí puede ser que tengamos aquí el listado de categorías para hacer algo interesante exactamente queé podemos probar aquí tenemos la prueba para el curso del arabel básico siempre va a comenzar así haciendo la petición el estatus 200 tiene que devolver podemos colocar ahí el nombre de la vista el nombre de la ruta cositas que veamos en la vista y si le estamos pasando las publicaciones en base a lo esperado son esas operaciones rutinarias y ver hasta dónde podemos llegar ya que
recuerda que aquí no estamos empleando larab básico si no estamos empleando ya iware entonces la cosa cambia un poquito eso por una parte lo siguiente es la base de datos te recomendaría que desde ya la dupliquemos algún problema al menos tengamos la copia y no perdamos los datos que ya tenemos ahí así que control c control v o comand v como comand c y comand v y la tengas por aquí referenciada más adelante configuramos una una base de datos para desarrollo pero otra vez vamos de a poco entonces importante también saber cuál es la ruta que vamos a probar sería la de blog aquí la tenemos sería esta justamente esta y también la podemos ver acá Entonces ya cuando estamos claritos de Cuál es la ruta ya podemos entar algo comenzando colocando aquí el de blog entonces ejecutamos aquí rapidito tiene que devolver un 200 ya que es lo mismo recuerda que si colocas alguien válido te va a dar un 404 y aquí puedes ver el error tú colocaste 200 Pero esto devuelve un 404 y tienes que ver cuál es el problema que en este caso es la ruta por lo demás:

<?php


namespace Tests\Feature\Blog;


use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Foundation\Testing\WithFaker;


// use PHPUnit\Framework\TestCase;


use Tests\TestCase;


class IndexTest extends TestCase
{
    public function test_example(): void
    {
        $response = $this->get('/');


        $response->assertStatus(200);
    }
}

Aquí lo que te comentaba es tip que es para hacer peticiones de tipo get tal cual ocurría con aios cuando queríamos hacer una petición de tipo get postp p delete aquí es similar indicamos mediante el método también indica qué método http va a emplear que en este caso es una petición de tipo get importante que heredes de acá de Test Case ya que por aquí a ver si lo puedo encontrar use test case por ahí hay otro realmente no recuerdo dónde estaba el test Case el otro a ver si lo encuentro aquí rapidito Aquí está justamente este el del interno al frw de php unit fíjate que lo hereda Fíjate que lo toma Pero si ejecutamos por aquí vas a ver que falla y sería porque no encuentre el método tal cual puedes ver por AC Entonces por cualquiera que sea la razón o cualquier motivo cualquier cosa rara que cambie aquí en el lápis de de larabel cuando estemos creando las pruebas si por cualquier motivo hereda de este este no sería si no sería este el cual hereda todo lo que tenemos en php unit o pes depende lo que estés empleando pero también agrega cositas como en este caso es el uso de las
peticiones mediante http que Son imprescindibles para nosotros ya que nosotros queremos es probar el módulo completo es decir queremos probar es nuestro nuestro módulo basado en componentes nuestra aplicación y es por eso que son pruebas de tipo feature y no son de tipo unit y es por eso que se encuentran en esta carpeta porque no estamos probando módulos individuales sino es la aplicación como un todo en este caso es específico al blog entonces espero que todo ese panorama haya quedado aclarado y vamos a dejarlo hasta acá ya la siguiente clase terminamos de realizar la prueba adelantar lo más que podamos para que quede empleando es el Api de Laravel básico y luego empezamos a agregar cositas con Laravel base a lo explicado que tenemos acá los métodos de aserción específicos para Livewire pero ya eso comenzamos a partir de la siguiente clase.

Primera prueba con Laravel Livewire 3

Vamos a iniciar creando nuestra prueba finalmente para lo que sería el módulo de blog específicamente el Index que fue para esto que creamos la prueba que estamos viendo aquí en pantalla aquí importantísimo que ejecutes y veas todo que pase correctamente si no pasa correctamente tienes que chequear que está malo realmente no hemos hecho nada entonces no debería de tener otra salida Entonces cuál es la primera cosa que tenemos que hacer por aquí abrir el componente controlador sea lo que sea que estemos empleando. Aquí es importante
acotar de que yo voy a hacer las pruebas mínimas y necesarias por ejemplo una prueba que pudiéramos realizar sería para el filtro probar distintos filtros pero para no complicar demás el asunto no quiero colocar tantas pruebas y sobre todo aquí al inicio de repente más adelante cuando la terminemos si me la solicitan la puedo implementar pero inicialmente no las voy a implementar simplemente quiero que entre por acá sin ningún filtro probaré sin ningún filtro aplicado y probar lo que podemos ver en pantalla que sería el listado de
publicaciones y por más que sea también aquí puede ser que tengamos aquí el listado de categorías para hacer algo interesante exactamente queé podemos probar aquí tenemos la prueba para el curso del arabel básico siempre va a comenzar así haciendo la petición el estatus 200 tiene que devolver podemos colocar ahí el nombre de la vista el nombre de la ruta cositas que veamos en la vista y si le estamos pasando las publicaciones en base a lo esperado son esas operaciones rutinarias y ver hasta dónde podemos llegar ya que recuerda que aquí no estamos empleando larab básico si no estamos empleando ya iware entonces la cosa cambia un poquito eso por una parte lo siguiente es la base de datos te recomendaría que desde ya la dupliquemos algún problema al menos tengamos la copia y no perdamos los datos que ya tenemos ahí así que control c control b o comand b como comand c y comand b y la tengas por aquí referenciada más adelante configuramos una una base de datos para desarrollo pero otra vez vamos de a poco entonces importante también saber cuál es la ruta que vamos a probar sería la de blog aquí la tenemos sería esta justamente esta y también la podemos ver acá:

    public function test_example(): void
    {
        $this->get(route('web.index'))->assertStatus(200);
    }

Entonces ya cuando estamos claritos de cuál es la ruta ya podemos entar algo comenzando colocando aquí el de blog entonces ejecutamos aquí rapidito tiene que devolver un 200 ya que es lo mismo recuerda que si colocas alguien válido te va a dar un 404 y aquí puedes ver el error tú colocaste 200 Pero esto devuelve un 404 y tienes que ver cuál es el problema que en este caso es la ruta por lo demás aquí lo que te comentaba es para hacer peticiones de tipo get tal cual ocurría con axios cuando queríamos hacer una petición de tipo get post put path delete aquí es similar indicamos mediante el método:

 $this->get(route('web.index'))->assertStatus(200);

También indica qué método http va a emplear que en este caso es una petición de tipo get importante que heredes de acá de Test Case ya que por aquí a ver si lo puedo encontrar use test case por ahí hay otro realmente no recuerdo dónde estaba el test Case el otro a ver si lo encuentro aquí rapidito aquí está justamente este el del interno a php unit:

// use PHPUnit\Framework\TestCase;


use Tests\TestCase;

Fíjate que lo toma pero si ejecutamos por aquí vas a ver que falla y sería porque no encuentre el método tal cual puedes ver. Si por cualquier motivo hereda de este este no sería si no sería este el cual hereda todo lo que tenemos en php unit o pest depende lo que estés empleando pero también agrega cositas como en este caso es el uso de las peticiones mediante http que son imprescindibles para nosotros ya que nosotros queremos es probar el módulo completo es decir queremos probar es nuestro nuestro módulo basado en componentes nuestra aplicación y es por eso que son pruebas de tipo feature y no son de tipo unit y es por eso que se encuentran en esta carpeta porque no estamos probando módulos individuales sino es la aplicación como un todo en este caso es específico al blot Entonces espero que todo ese panorama haya quedado aclarado y vamos a dejarlo hasta acá ya la siguiente clase terminamos de realizar la prueba adelantar lo más que podamos para que quede empleando es el Api del Laravel básico y luego empezamos a agregar cositas con lare en base a lo explicado que tenemos acá los métodos de aserción específicos para iware pero ya eso comenzamos a partir de la siguiente clase

Prueba Base en Laravel Livewire 4

Okay aspectos importantes aquí aparte de esta forma podemos emplear las rutas con nombre con todas las bondades que esto nos trae ya lo mismo que introducimos en el curso de Laravel básico que sería que si cambiamos suponte que cambiamos aquí la ruta de blog y colocamos no sé un bloquecito o algo así no tenemos que cambiar las pruebas ya que se encuentran referenciadas mediante el nombre en este caso creo que que es web.Index así que colocamos web.
Index:

public function test_index(): void {
  $this->get(route('web.index'))
}

Y así aprovechamos y configuramos una ruta con nombre para acceder a la misma entonces lo comentado aquí ya podríamos cambiar la ruta y todo va a seguir funcionando correctamente cosa que no sucedería si la dejamos de esta forma:

public function test_index(): void {
  $this->get('blog')
}

Siempre ejecuta tus pruebas cada pequeño cambio

Ya que va a dar aquí un 404 y es por lo comentado entonces aquí corre bueno la adamos con nombre no sé qué diablos es esto vuelvo acá y perfecto nunca  siempre te recomiendo de que cada vez que hagas pequeños cambios si no estás muy acostumbrado con las pruebas unitarias vayas aquí ejecutando esto se ejecuta muy rápido sobre todo al inicio que no tenemos prácticamente pruebas así que esa viene siendo otra recomendación que te puedo dar haz pequeños cambios apenas esto pueda ser complicado o interpretable ejecuta la prueba y si tienes algún problema entonces ahí puedes encontrarlo en una fase temprana sin que te vuelvas loco luego viendo dónde está el problema.

Probar código 200

Supongo si se encontró la página lo malo es que no están clasificados pero aparecen por orden eh del diccionario si no fue encontrado el okay que es lo mismo que colocar estatus 200 Luego hacemos algunas variantes redirecciones html bueno tenemos todo esto entonces eso es lo que tenemos disponible son a la final condicionales como te presentaba pero no son a veces condicionales tan genéricos que evalúan como quien dice que los valores sean exactos sino también pueden
ya aplicar por ejemplo de que el usuario esté autorizado que se encuentre autenticado por ejemplo entonces ya tenemos uno que ya nos hace todo esto de gratis y necesidad de que nosotros naveguemos a la respuesta ni nada de eso ya lo hace automáticamente el arel mediante este método de aserción y también aquí nosotros tenemos ciertos métodos de aserción específicos para Laravel si estamos empleando el de Test Case de Laravel entonces en este caso ya que queremos es preguntar por la vista tenemos aquí el de hacer view is y colocamos cuál vista se supone que tiene que emplear:

Livewire::test(Index::class)
    ->assertSee("Post List")
    ->assertViewHas('posts', Post::with('category')
        ->where('posted', 'yes')->paginate(15))
        ->assertViewIs('livewire.blog.index')

Y aquí colocamos el punto y coma aquí recuerda que lo puedes ir encando es decir tenemos el de que se el primero y luego a partir de ahí sacamos el resto inclusive el de 200 

Puedes ver exactamente las respuestas con:

->assertViewHas('posts', function ($posts){
    dd(Post::paginate(15));
     dd($posts);
})

Ayuda tanto porque tenemos todo el contenido es decir tenemos todo el contenido de la página y se va a cortar cosa que seguramente va a suceder por aquí pero vemos una página no nos ayuda mucho así que bueno al menos parece que este método de aserción no lo podemos ampliar entonces lo dejamos ahí comentado es un poco el propósito de esta clase ver qué podemos emplear

Evaluar parámetros importantes

También, podemos utilizar Livewire::test() para evaluar un componente de Laravel Livewire:

***
use Livewire\Livewire;

class IndexTest extends TestCase {
  public function test_index(): void
   {
       $this
           ->get(route('web.index'))
           ***
       ;

        Livewire::test(Index::class);
   }
}

Y desde aquí, podemos emplear los métodos se aserción que no pudimos emplear antes:

tests/Feature/Blog/IndexTest.php

***
use Livewire\Livewire;

class IndexTest extends TestCase {
  public function test_index(): void
   {
       $this
           ->get(route('web.index'))
           ***
       ;

         Livewire::test(Index::class)
           ->assertSee("Post List")
           ->assertViewHas('posts', Post::with('category')
               ->where('posted', 'yes')->paginate(15))
               ->assertViewIs('livewire.blog.index')
       ;

   }
}

Prueba de Integración y Unitaria - Testing - De Laravel Livewire 5

Ahora vamos a presentar algunos métodos de aserción de Livewire que pudiéramos ampliar para esto aquí podemos venir a la documentación oficial:

https://livewire.laravel.com/docs/testing

Veremos un metodo de test para los componentes que es el que debemos usar:


 Livewire::test(CreatePost::class)->assertStatus(200);

Así que perfecto entonces como qui como quien dice esta sería la forma que tuviéramos que hacer esas evaluaciones bien qué más pudiéramos hacer por acá vamos a ver la documentación oficial aquí puedes evaluar textos entre cualquier otro método de aserción que hagamos en Laravel básico:

Livewire::test(Index::class)
            ->assertSee("Post List")
            ->assertViewHas('posts', Post::with('category')
                ->where('posted', 'yes')->paginate(15))
                ->assertViewIs('livewire.blog.index')

La pagination es decir la paginación de nuestro registro qué es lo que quieras probar aquí ya depende de ti pero es lo que tenemos acá:

Livewire::test(Index::class)
        ->assertSee("Post List")
        ->assertViewHas('posts', Post::with('category')
            ->where('posted', 'yes')->paginate(15))
            ->assertViewIs('livewire.blog.index')

Entonces también para que se entienda cómo es la comprobación podemos colocar aquí un debug de justamente esto para que veas que va a ser exactamente el mismo:

dd(Post::with('category')
           ->where('posted', 'yes')->paginate(15))

Que esto y ahí lo tenemos entonces ya creo que queda un poco más claro de cómo va todo esto.

- Andrés Cruz

In english

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.

Udemy

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
¡Hazte afiliado en Gumroad!
© 2025 Copyright | Contacto | Acerca de | Versión PC