概要
質問来てた。
Q. testing-library で要素があるかどうかを厳密にテストしたいときはどうすればいいですか。
結論、 toBeInTheDocument ではなく toBeVisible を使おう。
こんにちは、ゆめみに新卒フロントエンドエンジニアとして４月から働き出しましたkawabataです。
要素があるかどうかのテストを書いていたところ、toBeVisible という関数があることをチームメンバーから教えてもらいました。
toBeInTheDocumentとtoBeVisibleの違い
toBeInTheDocument
は、要素がDOMツリー上に存在するかどうかを確認するもので、要素の可視性は考慮しません。
toBeVisible は、次の属性などを確認して要素が実際に表示されているかをチェックします。
- cssプロパティのdisplayがnoneに設定されていない
- cssプロパティのvisibilityがhiddenかcollapseに設定されていない
- cssプロパティのopacityが0に設定されていない
- 親要素も表示される（DOMツリーの一番上まで表示される）
- hidden属性を持たない
例えば、次のようにdisplay: noneが指定されている場合、視覚的には表示されていませんが、toBeInTheDocumentを使用するとテストは通過してしまいます。
<input
value={value}
style={{ display: 'none' }}
onChange={(event) => {
onChange(event);
}}
placeholder="名前を入力する"
/>
const input = await canvas.findByPlaceholderText('名前を入力する');
await expect(input).toBeInTheDocument(); // display: noneにも関わらずPASSしてしまう
このような場合にはtoBeVisibleを用いることで、より厳密なテストが可能です。