API

@testing-library/svelte は、@testing-library/dom からすべてを再エクスポートし、さらに

• render
• act
• cleanup
• fireEvent (非同期)

render

Svelteを使用して、コンポーネントをDOMにレンダリングします。デフォルトでは、コンポーネントはdocument.bodyに追加された<div>にレンダリングされます。

import {render} from '@testing-library/svelte'
import MyComponent from './MyComponent.svelte'

const result = render(MyComponent, componentOptions, renderOptions)

コンポーネントオプション

コンポーネントの作成方法とマウント方法をカスタマイズできます。これらのオプションは、Svelteに直接渡されます。

コンポーネントにpropsを送信するだけでよい場合は、propsを直接渡すことができます。ただし、propsの名前がコンポーネントオプションの名前と重複しないようにしてください。

// pass props to the component
render(YourComponent, {myProp: 'value'})

// pass props and other options to the component
render(YourComponent, {
  props: {myProp: 'value'},
  context: new Map([[('theme': 'dark')]]),
})

最も一般的なオプションは次のとおりです。

オプション	説明	デフォルト
props	コンポーネントに渡すprops。	N/A
context	コンポーネントのレンダリングに使用するコンテキスト値のMap。	N/A
target	コンポーネントをレンダリングするHTMLElement。	document.bodyに追加された<div>

targetオプションを指定すると、target要素は自動的にdocument.bodyに追加されません。また、バインドされたクエリとdebugのベース要素として使用されます。

利用可能なすべてのオプションについては、SvelteクライアントサイドコンポーネントAPIドキュメントを参照してください。

レンダーオプション

Svelte Testing Libraryがコンポーネントをレンダリングする方法もカスタマイズできます。ほとんどの場合、これらのオプションを変更する必要はありません。

注意

@testing-library/svelte@5.0.0より前は、baseElementオプションはcontainerという名前でした。

オプション	説明	デフォルト
baseElement	クエリとdebugのベース要素。	componentOptions.target ?? document.body
クエリ	カスタムクエリ.	N/A

レンダー結果

結果	説明
baseElement	クエリに使用されるベースDOM要素。
component	マウントされたSvelteコンポーネント。
container	コンポーネントがマウントされるDOM要素。
debug	prettyDOMを使用して要素をログに記録します。
rerender	コンポーネントのpropsを更新します。
unmount	コンポーネントをアンマウントして破棄します。
...queries	クエリ関数はbaseElementにバインドされています。

baseElement

@testing-library/svelte@5.0.0で追加

クエリがバインドされるベースDOM要素。renderOptions.baseElementに対応します。componentOptions.targetもrenderOptions.baseElementも使用しない場合、これはdocument.bodyになります。

container

コンポーネントがマウントされるDOM要素。componentOptions.targetに対応します。一般に、要素のクエリにcontainerを直接使用することは避けてください。代わりに、testing-libraryのクエリを使用してください。

ヒント

container.firstChildを使用して、コンポーネントの最初にレンダリングされた要素を取得します。

注意

@testing-library/svelte@5.0.0より前は、containerがベース要素に設定されていました。以前のバージョンでコンポーネントの最初にレンダリングされた要素を取得するには、container.firstChild.firstChildを使用してください。

component

Svelteコンポーネントのインスタンス。詳細については、SvelteコンポーネントAPIを参照してください。

ヒント

エクスポートされた関数など、開発者向けのAPIをテストする場合を除き、componentの使用は避けてください。代わりに、DOMと対話してください。エンドユーザーと開発者ユーザーの違いを理解するために、Kent C. Doddsによるテストユーザーを避けるをお読みください。

debug

prettyDOMを使用して、baseElementまたは指定された要素をログに記録します。

ヒント

baseElementがデフォルトのdocument.bodyの場合、screen.debugを使用することをお勧めします。

import {render, screen} from '@testing-library/svelte'

const {debug} = render(MyComponent, {myProp: 'value'})

const button = screen.getByRole('button')

// log `document.body`
screen.debug()

// log your custom `target` or `baseElement`
debug()

// log a specific element
screen.debug(button)
debug(button)

rerender

コンポーネントの1つ以上のpropsを更新し、Svelteが更新されるのを待ちます。

const {rerender} = render(MyComponent, {myProp: 'value'})

await rerender({myProp: 'new value'}))

注意

@testing-library/svelte@5.0.0より前は、rerenderを呼び出すと、コンポーネントが破棄されて再マウントされていました。以前のバージョンでpropsを更新するには、component.$setとactを使用してください。

const {component} = render(MyComponent, {myProp: 'value'})

await act(() => component.$set({myProp: 'new value'}))

unmount

Svelteコンポーネントをアンマウントして破棄します。

const {unmount} = render(MyComponent, {myProp: 'value'})

unmount()

クエリ

クエリ関数はbaseElementにバインドされています。renderにカスタムクエリを渡した場合、デフォルトのクエリの代わりにそれらが使用可能になります。

ヒント

baseElementがデフォルトのdocument.bodyの場合、バインドされたクエリではなく、screenを使用することをお勧めします。

import {render, screen} from '@testing-library/svelte'

const {getByRole} = render(MyComponent, {myProp: 'value'})

// query `document.body`
const button = screen.getByRole('button')

// query using a custom `target` or `baseElement`
const button = getByRole('button')

cleanup

すべてのコンポーネントを破棄し、document.bodyに追加された要素を削除します。

情報

テストフレームワークがグローバルなafterEachメソッド（例：Mocha、Jest、またはJasmine）を追加した場合、またはVitestセットアップファイルでimport '@testing-library/svelte/vitest'を使用した場合は、cleanupが自動的に呼び出されます。通常、cleanupを自分で呼び出す必要はありません。

グローバルなafterEachメソッドを使用するフレームワークで自動cleanupを無効にする場合は、process.env.STL_SKIP_AUTO_CLEANUPを設定します。

import {render, cleanup} from '@testing-library/svelte'

// Default: runs after each test
afterEach(() => {
  cleanup()
})

render(YourComponent)

// Called manually for more control
cleanup()

act

Svelteからの保留中の更新がすべてDOMに適用されていることを確認します。オプションで、更新が適用される前に呼び出す関数を渡すことができます。関数がPromiseを返す場合、最初に解決されます。

Svelteのtickメソッドを使用して更新を適用します。

import {act, render} from '@testing-library/svelte'

const {component} = render(MyComponent)

await act(() => {
  component.updateSomething()
})

fireEvent (非同期)

イベントを発生させ、SvelteがDOMを更新するのを待ちます。DOM Testing LibraryのfireEventの非同期ラッパー。

ヒント

可能な場合は、fireEventの代わりに@testing-library/user-eventを使用することをお勧めします。

import {fireEvent, render, screen} from '@testing-library/svelte'

render(MyComponent)

const button = screen.getByRole('button')
await fireEvent.click(button)