ReactTestingLibraryでデバッグする

React Testing LibraryでReactのコンポーネントのテストを書いていた

今どのような状況だっけ?

みたいなときにレンダリングされているHTMLを実際に見たい

そういうときにReact Testing Libraryのdebugを使ってHTMLを表示する

普通にimportで呼べばOKかなと思って調べてみたらrenderでいろいろ返ってくる中にも入っていたためそっちを使うようにしてみた

サンプル

import { render } from "@testing-library/react"

const {debug, baseElement, container, getByTestId, getAllByTestId, getByTitle, getByPlaceholderText } = render(
  <Hoge></Hoge>
)

型定義を見に行ったらcontainer,baseElement,debugなども返却値に含まれていた

このあたりを活用すれば中身を見ることができそう

import { render } from "@testing-library/react"

const {debug, baseElement, container, getByTestId, getAllByTestId, getByTitle, getByPlaceholderText } = render(
  <Hoge></Hoge>
)

debug(baseElement)
debug(container)

baseElement

<body>
  <div>
  .....

  </div>
</body>

baseElementはbodyで囲われている、このタグはデフォルトはdocument.bodyでrender時に指定した場合は指定したタグになるらしい

container

<div>
  .....
</div>

テスト対象の要素外へのイベント発行

要素外をクリックしたら非表示になるか

みたいなテストを今回は含めたかったのでbaseElementをクリックすることで実現できた

import { render } from "@testing-library/react"

const {baseElement, getByTitle } = render(
  <Hoge></Hoge>
)

await user.click(baseElement)
// click後DOMが変わっているか確認する

で、この辺調べたらrenderで返ってくる値のドキュメントがあった

API | Testing Library

何か1つ単語が分かると芋づる式に把握することが増えていくがそれらを調べていくと結局ドキュメント読むのが一番だよねとうい結論にたどり着くなー

最初からドキュメントを読みましょう案件

テスト対象の要素外へのイベント発行

関連記事

Profile

Account

RSS