0Pricing
Sveltejs Academy · レッスン

@testing-library/svelte：renderとfireEvent

テスト内でコンポーネントをレンダリングし、DOMを検索してユーザー操作をシミュレートします。

「@testing-library/svelte：renderとfireEvent」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。

Testing Library

@testing-library/svelte は、コンポーネントをレンダリングし、ユーザーと同じように操作するためのユーティリティを提供します。

render

コンポーネントを仮想 DOM にマウントします。

import { render } from "@testing-library/svelte";
const { getByText } = render(MyComp, { props: { name: "Ada" } });

クエリメソッド

getByText、getByRole、getByLabelText を使用して、ユーザーと同じように要素を検索します。

fireEvent

クリック、入力、送信などのユーザー操作をシミュレートします。

import { fireEvent } from "@testing-library/svelte";
await fireEvent.click(getByRole("button"));

user-event ライブラリ

より現実的な操作（文字入力やキーボードナビゲーション）には、@testing-library/user-event を使用します。

非同期更新

操作後、Svelte の更新が反映されるようにマイクロタスクを await します。

アサーション

toBeInTheDocument や toHaveAttribute などの jest-dom マッチャーとともに expect を使用します。

expect(getByText("Hello, Ada!")).toBeInTheDocument();

コンポーネントの props

render の第 2 引数として props を渡します。

コンポーネントのイベント

コールバック prop として spy を渡し、イベントディスパッチャーをテストします。

DOM のスナップショット

リグレッションテストのために、レンダリングされた HTML のスナップショットを取得します。

ベストプラクティス

ユーザーの視点からテストしてください。内部状態を直接テストすることは避けます。

確認

render は何を行いますか？

まとめ

render、fireEvent、jest-dom を使用して、実際のユーザー操作と同じように Svelte コンポーネントをテストします。

よくある質問

「@testing-library/svelte：renderとfireEvent」レッスンは無料ですか？

はい。「@testing-library/svelte：renderとfireEvent」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「@testing-library/svelte：renderとfireEvent」で何を学びますか？

テスト内でコンポーネントをレンダリングし、DOMを検索してユーザー操作をシミュレートします。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「@testing-library/svelte：renderとfireEvent」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか？

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. SvelteプロジェクトでのVitestセットアップ
  2. @testing-library/svelte：renderとfireEvent
  3. Storeとリアクティビティのテスト
  4. モジュールとFetchのモック
← Sveltejs Academyに戻る