ReactTestingLibraryでデバッグする
2022-08-10
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で返ってくる値のドキュメントがあった
何か1つ単語が分かると芋づる式に把握することが増えていくがそれらを調べていくと結局ドキュメント読むのが一番だよねとうい結論にたどり着くなー
最初からドキュメントを読みましょう案件
