Testing Livewire Components in Livewire 3.0

December 30, 2024
7:53 pm
No Comments

Step 1: Setting Up Your Testing Environment

Before writing tests, ensure your Laravel application has the necessary testing environment configured:

Database Setup: Use an in-memory SQLite database for testing to keep the tests isolated and fast. Update your phpunit.xml file:


<env name="DB_CONNECTION" value="sqlite"/>
<env name="DB_DATABASE" value=":memory:"/>

Install Dependencies: Ensure you have PHPUnit and Laravel’s testing tools installed. Typically, these come pre-installed with Laravel.
Create a Test Class: Use Artisan to generate a test class for your Livewire component:


php artisan make:test LivewireComponentTest --unit

Step 2: Writing Basic Tests

Let’s test a simple Livewire component. For this example, we’ll use a CounterComponent.

CounterComponent.php


<?php

namespace App\Livewire;

use Livewire\Component;

class CounterComponent extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function decrement()
    {
        $this->count--;
    }

    public function render()
    {
        return view('livewire.counter-component');
    }
}

counter-component.blade.php


<div>
    <h1>Count: {{ $count }}</h1>
    <button wire:click="increment">+</button>
    <button wire:click="decrement">-</button>
</div>

Writing the Test

Open the LivewireComponentTest.php file and write the following test:


<?php

namespace Tests\Unit;

use Tests\TestCase;
use Livewire\Livewire;
use App\Livewire\CounterComponent;

class LivewireComponentTest extends TestCase
{
    /** @test */    public function it_increments_and_decrements_the_counter()
    {
        Livewire::test(CounterComponent::class)
            ->assertSee('Count: 0')
            ->call('increment')
            ->assertSee('Count: 1')
            ->call('decrement')
            ->assertSee('Count: 0');
    }
}

What’s Happening Here?

Livewire::test(): Creates a test instance of the Livewire component.
assertSee(): Ensures the specified text is visible in the rendered output.
call(): Simulates calling a method in the component.

Run the test using PHPUnit:

Step 3: Testing Component Interactions

Livewire tests allow you to simulate user interactions such as clicking buttons, submitting forms, and updating properties.

Example: Testing Form Submission

For a form component that collects a user’s name:

FormComponent.php


<?php

namespace App\Livewire;

use Livewire\Component;

class FormComponent extends Component
{
    public $name;

    public function submit()
    {
        $this->validate([
            'name' => 'required|min:3',
        ]);
    }

    public function render()
    {
        return view('livewire.form-component');
    }
}

form-component.blade.php


<div>
    <form wire:submit.prevent="submit">
        <input type="text" wire:model="name">
        <button type="submit">Submit</button>
    </form>
    @error('name') <span>{{ $message }}</span> @enderror
</div>

Test for FormComponent


/** @test */public function it_validates_the_name_field()
{
    Livewire::test(FormComponent::class)
        ->set('name', '')
        ->call('submit')
        ->assertHasErrors(['name' => 'required']);

    Livewire::test(FormComponent::class)
        ->set('name', 'Jo')
        ->call('submit')
        ->assertHasErrors(['name' => 'min']);

    Livewire::test(FormComponent::class)
        ->set('name', 'John Doe')
        ->call('submit')
        ->assertHasNoErrors();
}

What’s Happening Here?

set(): Sets a property value on the component.
assertHasErrors(): Asserts that the component has validation errors for a specific field.
assertHasNoErrors(): Asserts that there are no validation errors.

Step 4: Testing Browser Events

Livewire components often dispatch browser events. You can test these events to ensure they are triggered as expected.

Example: Testing a Browser Event

For a notification component:

NotificationComponent.php


<?php

namespace App\Livewire;

use Livewire\Component;

class NotificationComponent extends Component
{
    public function triggerNotification()
    {
        $this->dispatch('notification', ['message' => 'Hello World']);
    }

    public function render()
    {
        return view('livewire.notification-component');
    }
}

Test for NotificationComponent


/** @test */public function it_dispatches_a_notification_event()
{
    Livewire::test(NotificationComponent::class)
        ->call('triggerNotification')
        ->assertDispatched('notification', ['message' => 'Hello World']);
}

What’s Happening Here?

assertDispatched(): Ensures that the specified browser event was dispatched with the correct payload.

Final Output

With these tests, you can ensure:

Your Livewire components are functional and reliable.
User interactions and form submissions work as expected.
Browser events are triggered correctly.

Key Features Covered Today

Setting up a testing environment for Livewire components.
Writing basic tests for methods and properties.
Simulating user interactions and validating form submissions.
Testing browser events in Livewire components.

About

Services

Contact

410 C, Jaina Tower-1, District Center, Janak Puri New Delhi-110058, India.