Testing Filament v3 with Pest - Testing a List Page with Header Widgets - Kevin McKee
Published on

Testing Filament v3 with Pest - Testing a List Page with Header Widgets

Author

This is my "series" on building a test suite for a Filament v3 application. As I encounter issues in my tests, I am documenting the problems I encounter (and hopefully updating with a solution).

Testing a Table with Header Widgets

I'm trying to write a simple test that just ensures the data in my database will show up when I view the index page of that Resource. This is the exact code from the documentation, but it's not working for me:

test('can list households', function () {
    $households = Household::factory()->count(10)->create();

    livewire(ListHouseholds::class)->assertCanSeeTableRecords($households);
});

I'm getting the following error:

Unable to find component: [app.filament.widgets.list-households-widgets]

In my ListHouseholds::class I do have a header widget (and plan to add more in the future). Here's what it looks like now:

protected function getHeaderWidgets(): array
{
    return [
        ListHouseholdsWidgets::class,
    ];
}

When I load the page in the browser, it renders the header widget just fine. If I comment out the `ListHouseholdsWidgets::class` line in the code above, the test passes. Hmmmm....

Solution

Unfortunately this seems like some kind of bug in Filament. Thanks to some help in the Filament Discord, I learned the following workaround:

beforeEach(function () {
    Livewire::component(
        ListHouseholdsWidgets::getName(),
        ListHouseholdsWidgets::class,
    );
});


Want to talk about this post? Connect with me on Twitter →