本文へスキップ

API

@testing-library/dom​

このライブラリは、DOM Testing Library (@testing-library/dom) からすべてを再エクスポートします。使用できる便利な機能については、ドキュメントを参照してください。

render​

import {render} from '@testing-library/preact'

const {results} = render(<YourComponent />, {options})

オプション​

オプション説明デフォルト値
containerコンポーネントがマウントされるHTML要素。baseElement
baseElementコンテナが追加されるルートHTML要素。document.body
queriesbaseElementにバインドするクエリ。withinを参照。null
hydrateコンポーネントが既にマウントされていて、再レンダリングが必要な場合に使用します。ほとんどの人にとっては必要ありません。返されるrerender関数は既にこれを実行しています。false
wrapperYourComponentをラップする親コンポーネント。null

結果​

結果説明
containerコンポーネントがマウントされるHTML要素。
baseElementコンテナが追加されるルートHTML要素。
debugprettyDomを使用してbaseElementをログ出力します。
unmountコンテナからコンポーネントをアンマウントします。
rerender元の引数を渡してrenderを再度呼び出し、hydrateをtrueに設定します。
asFragmentコンテナのinnerHTMLを返します。
...queriesbaseElementで使用されるすべてのクエリ関数を返します。query引数を渡すと、それらが使用されます。それ以外の場合はすべて。

cleanup​

コンテナからコンポーネントをアンマウントし、コンテナを破棄します。

テストフレームワーク（mocha、Jest、Jasmineなど）がグローバルafterEach()関数をテスト環境に注入する場合、これは自動的に呼び出されます。そうでない場合は、各テスト後にcleanup()を呼び出す必要があります。

これを無効にするには、テストの実行時にprocess.env.PTL_SKIP_AUTO_CLEANUPをtrueに設定します。

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

afterEach(() => {
  cleanup()
}) // Default on import: runs it after each test.

render(<YourComponent />)

cleanup() // Or like this for more control.

act​

preact/test-utils/actを指す単なる利便性のためのエクスポートです。すべてのレンダリングとイベントの発火はactでラップされているため、実際にはこれは必要ありません。これは、呼び出し後にすべての効果と再レンダリングをフラッシュする役割を担っています。

📝 もっと詳しく知りたい場合は、この説明をご覧ください。React向けですが、なぜそれが必要なのかがわかります。

fireEvent​

@testing-library/dom の fireEventに渡します。これもactでラップされているため、自分で行う必要はありません。

📝 h / Preact.createElementを使用する場合、Reactは合成イベントシステムを使用し、Preactはイベント処理にブラウザのネイティブaddEventListenerを使用することに注意してください。つまり、ReactのonChangeやonDoubleClickなどのイベントは、PreactではonInputとonDblClickになります。ダブルクリックの例は、これらの関数を使用してテストする方法を示しています。

例1​

const cb = jest.fn()

function Counter() {
  useEffect(cb)

  const [count, setCount] = useState(0)

  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

const {
  container: {firstChild: buttonNode},
} = render(<Counter />)

// Clear the first call to useEffect that the initial render triggers.
cb.mockClear()

// Fire event Option 1.
fireEvent.click(buttonNode)

// Fire event Option 2.
fireEvent(
  buttonNode,
  new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    button: 0,
  }),
)

expect(buttonNode).toHaveTextContent('1')
expect(cb).toHaveBeenCalledTimes(1)

例2​

const handler = jest.fn()

const {
  container: {firstChild: input},
} = render(<input type="text" onInput={handler} />)

fireEvent.input(input, {target: {value: 'a'}})

expect(handler).toHaveBeenCalledTimes(1)

例3​

const ref = createRef()
const spy = jest.fn()

render(
  h(elementType, {
    onDblClick: spy,
    ref,
  }),
)

fireEvent['onDblClick'](ref.current)

expect(spy).toHaveBeenCalledTimes(1)