Missing sub component html when running a test

#1

I have a simple list component, that defers loading of the list as described here https://laravel-livewire.com/docs/2.x/defer-loading

Component:

class Index extends Component
{
    public Collection $notes;
    public bool $fullyLoaded = false;

    public function load(): void
    {
        $this->notes = Note::all();
        $this->fullyLoaded = true;
    }

    public function render(): View
    {
        return view('livewire.notes.index');
    }
}

Blade:

<div wire:init="load()">
    @if($fullyLoaded)
        @if(count($notes) > 0)
        <ul>
            @foreach($notes as $note)
            <li>
                <livewire:notes.show :note="$note" :key="time().$note->id" />
            </li>
            @endforeach
        </ul>
        @else
            <div>
                EmptyThis text will be hidden
            </div>
        @endif
    @else
        <div>
            Loading...
        </div>
    @endif
</div>

The note itself is a subcomponent.

I was creating some test when I stumbled upon a strange problem:

function some_test()
{
    Note::factory()->make([
        'title' => 'Cookie'
    ]);

    Livewire::test(Index::class)
        ->call('load')
        ->assertSee('Cookie') // OKAY
        ->call('load')
        ->assertSee('Cookie'); // FAILS
}

When load is called a second time, all the html from the subcomponent is removed. Only the div container is present:

<li><div wire:id="xEBaFgqlXvQMOoHgeB0I"></div></li>

The question is, why is the html missing?

1 Like