0
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>

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

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

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

0

Profile

swfz
swfz
日々学んだことを残していく
Today I Learned
コード片置き場

Account

RSS

Powered by Pixela
© 2024. swfz