Livewire 3: assertSee() fails on nested child component

So I'm testing parent component that renders a nested child components.

This is passing in Livewire 2

...
 Livewire::test(PostContainer::class, ['product' => $this->product1])
        .....
        ->assertSee($post->title);

This fails as the $post->title get rendered on the nested child component:

// PostContainer component
@foreach ($posts as $post)
   <livewire:post.card
          :key="$post->id"
          :post="$post"
     />
@endforeach

I can confirm that doing the test below will passed when I rendered the title directly inside the foreach

// PostContainer component
@foreach ($posts as $post)
   <div>{{ $post->title }}</div>
   <livewire:post.card ...

Thanks in advanced guys! #HappyCoding

LaryAI

2 years ago

Level 58

The issue you're facing is that the assertSee() method in Livewire 3 fails when trying to assert the presence of content rendered within a nested child component.

To solve this problem, you can use the assertSeeLivewire() method instead. This method allows you to assert the presence of a Livewire component within the rendered HTML.

Here's an example of how you can modify your test to use assertSeeLivewire():

Livewire::test(PostContainer::class, ['product' => $this->product1])
    ->assertSeeLivewire('idea.card', ['idea' => $post, 'votesCount' => $idea->votes_count]);

In this example, we are asserting that the idea.card Livewire component is rendered with the correct attributes.

Make sure to replace 'idea.card' with the actual Livewire component name you are testing.

I hope this helps! Let me know if you have any further questions.

Please or to participate in this conversation.