Livewire v3 テスト

最初のテストを作成するCreating your first test

make:livewireコマンドに--testフラグを追加すれば、コンポーネントと一緒にテストファイルを生成できます。By appending the --test flag to the make:livewire command, you can generate a test file along with a component:

php artisan make:livewire create-post --test

上記のコマンドは、コンポーネントファイル自体を生成するだけでなく、以下のtests/Feature/Livewire/CreatePostTest.phpテストファイルも生成します。In addition to generating the component files themselves, the above command will generate the following test file tests/Feature/Livewire/CreatePostTest.php:

Pest PHP テストを作成したい場合は、make:livewireコマンドに--pestオプションを指定してください。If you would like to create a Pest PHP[https://pestphp.com/] test, you may provide the --pest option to the make:livewire command:

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\CreatePost;
use Livewire\Livewire;
use Tests\TestCase;

class CreatePostTest extends TestCase
{
    public function test_renders_successfully()
    {
        Livewire::test(CreatePost::class)
            ->assertStatus(200);
    }
}

もちろん、これらのファイルを手動で作成したり、Laravelアプリケーション内の既存のPHPUnitテスト内でLivewireのテストユーティリティを使用したりすることもできます。Of course, you can always create these files by hand or even use Livewire's testing utilities inside any other existing PHPUnit test in your Laravel application.

読み進める前に、Laravel独自の組み込みテスト機能に慣れておくことをお勧めします。Before reading further, you may wish to familiarize yourself with Laravel's own built-in testing features[https://laravel.com/docs/testing].

ページにコンポーネントが含まれているかのテストTesting a page contains a component

最もシンプルなLivewireテストは、アプリケーション内の特定のエンドポイントに特定のLivewireコンポーネントが含まれており、正常にレンダーされることを宣言することです。The simplest Livewire test you can write is asserting that a given endpoint in your application includes and successfully renders a given Livewire component.

Laravelのテストから使用できるassertSeeLivewire()メソッドをLivewireは提供しています。Livewire provides an assertSeeLivewire() method that can be used from any Laravel test:

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\CreatePost;
use Tests\TestCase;

class CreatePostTest extends TestCase
{
    public function test_component_exists_on_the_page()
    {
        $this->get('/posts/create')
            ->assertSeeLivewire(CreatePost::class);
    }
}

lightbulb Tip: これらはスモークテストと呼ばれます： スモークテストは、アプリケーションに壊滅的な問題がないことを確認するための広範なテストです。書く価値のないテストのように思えるかもしれませんが、費用対効果が高く、メンテナンスがほとんど必要なく、アプリケーションが重大なエラーなしに正常にレンダーされるという基本的な信頼を提供するため、書くのに最も価値のあるテストの１つです。[!tip] These are called smoke tests Smoke tests are broad tests that ensure there are no catastrophic problems in your application. Although it may seem like a test that isn't worth writing, pound for pound, these are some of the most valuable tests you can write as they require very little maintenance and provide you a base level of confidence that your application will render successfully with no major errors.

ビューのテストTesting views

コンポーネントのレンダー済み出力に、テキストが存在することを確認するため、シンプルで強力なassertSee()ユーティリティをLivewireは提供しています。Livewire provides a simple yet powerful utility for asserting the existence of text in the component's rendered output: assertSee().

以下は、データベース内のすべての投稿が、ページに表示されるのを確認するために、assertSee()を使用する例です。Below is an example of using assertSee() to ensure that all posts in the database are displayed on the page:

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\ShowPosts;
use Livewire\Livewire;
use App\Models\Post;
use Tests\TestCase;

class ShowPostsTest extends TestCase
{
    public function test_displays_posts()
    {
        Post::factory()->make(['title' => 'On bathing well']);
        Post::factory()->make(['title' => 'There\'s no time like bathtime']);

        Livewire::test(ShowPosts::class)
            ->assertSee('On bathing well')
            ->assertSee('There\'s no time like bathtime');
    }
}

ビューからのデータの宣言Asserting data from the view

レンダーしたビューの出力の宣言に加え、ビューへ渡すデータをテストするのも役立つ場合があります。In addition to asserting the output of a rendered view, sometimes it's helpful to test the data being passed into the view.

以下は上記と同じテストですが、レンダーした出力ではなく、ビューのデータをテストします。Here's the same test as above, but testing the view data rather than the rendered output:

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\ShowPosts;
use Livewire\Livewire;
use App\Models\Post;
use Tests\TestCase;

class ShowPostsTest extends TestCase
{
    public function test_displays_all_posts()
    {
        Post::factory()->make(['title' => 'On bathing well']);
        Post::factory()->make(['title' => 'The bathtub is my sanctuary']);

        Livewire::test(ShowPosts::class)
            ->assertViewHas('posts', function ($posts) {
                return count($posts) == 2;
            });
    }
}

ご覧のとおり、assertViewHas()は、指定データに対して行う宣言を制御できます。As you can see, assertViewHas() provides control over what assertions you want to make against the specified data.

ビューデータが特定の値と一致するのを確認するなど、簡単な宣言を実行する場合は、assertViewHas()メソッドに第２引数として値を直接渡すこともできます。If you would rather make a simple assertion, such as ensuring a piece of view data matches a given value, you can pass the value directly as the second argument given to the assertViewHas() method.

たとえば、$postCountという名前の変数をビューへ渡すコンポーネントがある場合、以下のようにそのリテラル値に対して宣言できます。For example, assuming you have a component with a variable named $postCount being passed into the view, you can make assertions against its literal value like so:

$this->assertViewHas('postCount', 3)

認証済みユーザーの設定Setting the authenticated user

ほとんどのWebアプリケーションで、ユーザーは使用する前にログインする必要があります。テストの開始時にFakeユーザーを手作業で認証するのではなく、LivewireはactingAs()メソッドを提供しています。Most web applications require users to log in before using them. Rather than manually authenticating a fake user at the beginning of your tests, Livewire provides an actingAs() method.

以下は、複数のユーザーが投稿を持っており、認証済みユーザーは自分の投稿のみ見ることができるべきであることをテストする例です。Below is an example of a test where multiple users have posts, yet the authenticated user should only be able to see their own posts:

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\ShowPosts;
use Livewire\Livewire;
use App\Models\User;
use App\Models\Post;
use Tests\TestCase;

class ShowPostsTest extends TestCase
{
    public function test_user_only_sees_their_own_posts()
    {
        $user = User::factory()
            ->has(Post::factory()->count(3))
            ->create();

        $stranger = User::factory()
            ->has(Post::factory()->count(2))
            ->create();

        Livewire::actingAs($user)
            ->test(ShowPosts::class)
            ->assertViewHas('posts', function ($posts) {
                return count($posts) == 3;
            });
    }
}

プロパティのテストTesting properties

Livewireは、コンポーネント内のプロパティを設定およびアサートするための便利なテストユーティリティも提供します。Livewire also provides helpful testing utilities for setting and asserting properties within your components.

コンポーネントのプロパティは、通常、アプリケーションでユーザーがwire:modelを含むフォーム入力を操作するときに更新されます。ただし、テストでは通常、実際のブラウザへ入力するわけではないため、Livewireは、set()メソッドを使用してプロパティを直接設定できるようにしています。Component properties are typically updated in your application when users interact with form inputs containing wire:model. But, because tests don't typically type into an actual browser, Livewire allows you to set properties directly using the set() method.

以下は、set()を使用してCreatePostコンポーネントの$titleプロパティを更新する例です。Below is an example of using set() to update the $title property of a CreatePost component:

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\CreatePost;
use Livewire\Livewire;
use Tests\TestCase;

class CreatePostTest extends TestCase
{
    public function test_can_set_title()
    {
        Livewire::test(CreatePost::class)
            ->set('title', 'Confessions of a serial soaker')
            ->assertSet('title', 'Confessions of a serial soaker');
    }
}

プロパティの初期化Initializing properties

多くの場合、Livewireコンポーネントは、親コンポーネントまたはルートパラメータが渡すデータを受け取ります。Livewireコンポーネントは独立してテストされるため、Livewire::test()メソッドの２番目のパラメータを使用して、データを渡せます。Often, Livewire components receive data being passed in from a parent component or route parameters. Because Livewire components are tested in isolation, you can manually pass data into them using the second parameter of the Livewire::test() method:

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\UpdatePost;
use Livewire\Livewire;
use App\Models\Post;
use Tests\TestCase;

class UpdatePostTest extends TestCase
{
    public function test_title_field_is_populated()
    {
        $post = Post::factory()->make([
            'title' => 'Top ten bath bombs',
        ]);

        Livewire::test(UpdatePost::class, ['post' => $post])
            ->assertSet('title', 'Top ten bath bombs');
    }
}

テスト対象の基になるコンポーネント（UpdatePost）は、そのmount()メソッドを介して$postを受け取ります。この機能をより明確に理解するため、UpdatePostのソースを見てみましょう。The underlying component being tested (UpdatePost) will receive $post through its mount() method. Let's look at the source for UpdatePost to paint a clearer picture of this feature:

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Post;

class UpdatePost extends Component
{
	public Post $post;

    public $title = '';

	public function mount(Post $post)
	{
		$this->post = $post;

		$this->title = $post->title;
	}

	// ...
}

URLパラメータの設定Setting URL parameters

LivewireコンポーネントがロードされるページのURLの特定のクエリパラメータに依存している場合は、withQueryParams()メソッドを使用して、テストのクエリパラメータを設定できます。If your Livewire component depends on specific query parameters in the URL of the page it's loaded on, you can use the withQueryParams() method to set the query parameters manually for your test.

以下は、LivewireのURL機能を使用して、現在の検索クエリをクエリ文字列へ保存および追跡する基本的なSearchPostsコンポーネントです。Below is a basic SearchPosts component that uses Livewire's URL feature[/docs/url] to store and track the current search query in the query string:

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\Attributes\Url;
use App\Models\Post;

class SearchPosts extends Component
{
    #[Url] // [tl! highlight]
    public $search = '';

    public function render()
    {
        return view('livewire.search-posts', [
            'posts' => Post::search($this->search)->get(),
        ]);
    }
}

ご覧のとおり、上記の$searchプロパティは、Livewireの#[Url]属性をURLに保存する必要がある値を示すために使用しています。As you can see, the $search property above uses Livewire's #[Url] attribute to denote that its value should be stored in the URL.

以下は、URLに特定のクエリパラメータがあるページで、このコンポーネントをロードするシナリオをシミュレートする方法の例です。Below is an example of how you would simulate the scenario of loading this component on a page with specific query parameters in the URL:

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\SearchPosts;
use Livewire\Livewire;
use App\Models\Post;
use Tests\TestCase;

class SearchPostsTest extends TestCase
{
    public function test_can_search_posts_via_url_query_string()
    {
        Post::factory()->create(['title' => 'Testing the first water-proof hair dryer']);
        Post::factory()->create(['title' => 'Rubber duckies that actually float']);

        Livewire::withQueryParams(['search' => 'hair'])
            ->test(SearchPosts::class)
            ->assertSee('Testing the first')
            ->assertDontSee('Rubber duckies');
    }
}

クッキーの設定Setting cookies

Livewireコンポーネントがクッキーに依存している場合、withCookie()またはwithCookies()メソッドを使用して、テスト用にクッキーを設定できます。If your Livewire component depends on cookies, you can use the withCookie() or withCookies() methods to set the cookies manually for your test.

以下は、マウント時にクッキーから割引トークンをロードする基本的なCartコンポーネントです。Below is a basic Cart component that loads a discount token from a cookie on mount:

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\Attributes\Url;
use App\Models\Post;

class Cart extends Component
{
    public $discountToken;

    public mount()
    {
        $this->discountToken = request()->cookie('discountToken');
    }
}

ご覧のとおり、上記の$discountTokenプロパティは、リクエスト内のクッキーから値を取得します。As you can see, the $discountToken property above gets its value from a cookie in the request.

以下は、クッキーを使用してページにこのコンポーネントをロードするシナリオをシミュレートする方法の例です。Below is an example of how you would simulate the scenario of loading this component on a page with cookies:

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\Cart;
use Livewire\Livewire;
use Tests\TestCase;

class CartTest extends TestCase
{
    public function test_can_load_discount_token_from_a_cookie()
    {
        Livewire::withCookies(['discountToken' => 'CALEB2023'])
            ->test(Cart::class)
            ->assertSet('discountToken', 'CALEB2023');
    }
}

アクションの呼び出しCalling actions

Livewireアクションは通常、wire:clickなどのように、フロントエンドから呼びします。Livewire actions are typically called from the frontend using something like wire:click.

Livewireコンポーネントテストは実際のブラウザを使用しないため、代わりにcall()メソッドを使用してテストでアクションをトリガーできます。Because Livewire component tests don't use an actual browser, you can instead trigger actions in your tests using the call() method.

以下は、call()メソッドを使用してsave()アクションをトリガーするCreatePostコンポーネントの例です。Below is an example of a CreatePost component using the call() method to trigger the save() action:

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\CreatePost;
use Livewire\Livewire;
use App\Models\Post;
use Tests\TestCase;

class CreatePostTest extends TestCase
{
    public function test_can_create_post()
    {
        $this->assertEquals(0, Post::count());

        Livewire::test(CreatePost::class)
            ->set('title', 'Wrinkly fingers? Try this one weird trick')
            ->set('content', '...')
            ->call('save');

        $this->assertEquals(1, Post::count());
    }
}

上記のテストでは、save()を呼び出すとデータベースに新しい投稿が作成されることをアサートしています。In the above test, we assert that calling save() creates a new post in the database.

call()メソッドへ追加のパラメータを渡すことで、アクションにパラメータを渡すこともできます。You can also pass parameters to actions by passing additional parameters into the call() method:

->call('deletePost', $postId);

バリデーションValidation

バリデーションエラーが投げられたことをテストするには、LivewireのassertHasErrors()メソッドを使用します。To test that a validation error has been thrown, you can use Livewire's assertHasErrors() method:

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\CreatePost;
use Livewire\Livewire;
use Tests\TestCase;

class CreatePostTest extends TestCase
{
    public function test_title_field_is_required()
    {
        Livewire::test(CreatePost::class)
            ->set('title', '')
            ->call('save')
            ->assertHasErrors('title');
    }
}

特定のバリデーションルールが失敗したことをテストする場合は、ルールの配列を渡してください。If you want to test that a specific validation rule has failed, you can pass an array of rules:

$this->assertHasErrors(['title' => ['required']]);

または、バリデーションメッセージが存在することをアサートする場合は、以下のようにできます。Or if you'd rather assert a validation message exists, you can do so as well:

$this->assertHasErrors(['title' => ['The title field is required.']]);

認証Authorization

Livewireコンポーネントで信頼できない入力に依存するアクションを承認することは、不可欠です。Livewireは、認証または認可のチェックが失敗したことを確認するために、assertUnauthorized()およびassertForbidden()メソッドを提供しています。Authorizing actions relying on untrusted input in your Livewire components is essential[/docs/properties#authorizing-the-input]. Livewire provides assertUnauthorized() and assertForbidden() methods to ensure that an authentication or authorization check has failed:

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\UpdatePost;
use Livewire\Livewire;
use App\Models\User;
use App\Models\Post;
use Tests\TestCase;

class UpdatePostTest extends TestCase
{
    public function test_cant_update_another_users_post()
    {
        $user = User::factory()->create();
        $stranger = User::factory()->create();

        $post = Post::factory()->for($stranger)->create();

        Livewire::actingAs($user)
            ->test(UpdatePost::class, ['post' => $post])
            ->set('title', 'Living the lavender life')
            ->call('save')
            ->assertUnauthorized();

        Livewire::actingAs($user)
            ->test(UpdatePost::class, ['post' => $post])
            ->set('title', 'Living the lavender life')
            ->call('save')
            ->assertForbidden();
    }
}

必要に応じ、コンポーネントのアクションがトリガした明示的なステータスコードをassertStatus()を使用してテストすることもできます。If you prefer, you can also test for explicit status codes that an action in your component may have triggered using assertStatus():

->assertStatus(401); // Unauthorized
->assertStatus(403); // Forbidden

リダイレクトRedirects

Livewireアクションがリダイレクトを実行したことをassertRedirect()メソッドを使い、テストできます。You can test that a Livewire action performed a redirect using the assertRedirect() method:

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\CreatePost;
use Livewire\Livewire;
use Tests\TestCase;

class CreatePostTest extends TestCase
{
    public function test_redirected_to_all_posts_after_creating_a_post()
    {
        Livewire::test(CreatePost::class)
            ->set('title', 'Using a loofah doesn\'t make you aloof...ugh')
            ->set('content', '...')
            ->call('save')
            ->assertRedirect('/posts');
    }
}

ハードコードしたURLではなく、特定のページコンポーネントへユーザーをリダイレクトしたことをアサートできるのは、更に便利でしょう。As an added convenience, you can assert that the user was redirected to a specific page component instead of a hard-coded URL.

->assertRedirect(CreatePost::class);

イベントEvents

コンポーネント内からイベントをディスパッチしたことをアサートするには、->assertDispatched()メソッドを使用します。To assert that an event was dispatched from within your component, you can use the ->assertDispatched() method:

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\CreatePost;
use Livewire\Livewire;
use Tests\TestCase;

class CreatePostTest extends TestCase
{
    public function test_creating_a_post_dispatches_event()
    {
        Livewire::test(CreatePost::class)
            ->set('title', 'Top 100 bubble bath brands')
            ->set('content', '...')
            ->call('save')
            ->assertDispatched('post-created');
    }
}

多くの場合、イベントをディスパッチおよびリッスンすることで、２つのコンポーネントが互いに通信できることをテストすると便利です。dispatch()メソッドを使用して、CreatePostコンポーネントがcreate-postイベントをディスパッチすることをシミュレートしましょう。 次に、そのイベントをリッスンするPostCountBadgeコンポーネントが、投稿数を適切に更新することをアサートします。It is often helpful to test that two components can communicate with each other by dispatching and listening for events. Using the dispatch() method, let's simulate a CreatePost component dispatching a create-post event. Then, we will assert that a PostCountBadge component, which listens for that event, updates its post count appropriately:

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\PostCountBadge;
use App\Livewire\CreatePost;
use Livewire\Livewire;
use Tests\TestCase;

class PostCountBadgeTest extends TestCase
{
    public function test_post_count_is_updated_when_event_is_dispatched()
    {
        $badge = Livewire::test(PostCountBadge::class)
            ->assertSee("0");

        Livewire::test(CreatePost::class)
            ->set('title', 'Tear-free: the greatest lie ever told')
            ->set('content', '...')
            ->call('save')
            ->assertDispatched('post-created');

        $badge->dispatch('post-created')
            ->assertSee("1");
    }
}

場合により、イベントが１つ以上のパラメータとともにディスパッチされたことをアサートできると便利な場合があります。banner-messageというイベントをmessageというパラメータとともにディスパッチするShowPostsというコンポーネントを見てみましょう。Sometimes it may come in handy to assert that an event was dispatched with one or more parameters. Let's have a look at a component called ShowPosts that dispatches an event called banner-message with a parameter called message:

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\ShowPosts;
use Livewire\Livewire;
use Tests\TestCase;

class ShowPostsTest extends TestCase
{
    public function test_notification_is_dispatched_when_deleting_a_post()
    {
        Livewire::test(ShowPosts::class)
            ->call('delete', postId: 3)
            ->assertDispatched('notify',
                message: 'The post was deleted',
            );
    }
}

コンポーネントがイベントをディスパッチし、パラメータ値を条件付きでアサートする必要がある場合は、クロージャを assertDispatchedメソッドの２番目の引数として渡すことができます。これは、イベント名を最初の引数として、パラメータを含む配列を２番目の引数として受け取ります。クロージャは論理値を確実に返してください。If your component dispatches an event of which the parameter values must be asserted conditionally, you can pass in a closure as the second argument to the assertDispatched method like below. It receives the event name as the first argument, and an array containing the parameters as the second argument. Make sure the closure returns a boolean.

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\ShowPosts;
use Livewire\Livewire;
use Tests\TestCase;

class ShowPostsTest extends TestCase
{
    public function test_notification_is_dispatched_when_deleting_a_post()
    {
        Livewire::test(ShowPosts::class)
            ->call('delete', postId: 3)
            ->assertDispatched('notify', function($eventName, $params) {
                return ($params['message'] ?? '') === 'The post was deleted';
            })
    }
}

利用可能な全てのテストユーティリティAll available testing utilities

Livewireは、さらに多くのテストユーティリティを提供します。以下は、利用可能な全てのテストメソッドの包括的なリストであり、その使用方法に関する簡単な説明が含まれています。Livewire provides many more testing utilities. Below is a comprehensive list of every testing method available to you, with a short description of how it's intended to be used:

セットアップメソッドSetup methods

コンポーネントとのインタラクションInteracting with components

アサーションAssertions