toHaveTextContentでHTML文字列を検証するコツ

はじめに

テストを書いていて、テキストが書かれているかの確認を行なっていたのですが、supabse側にはHTMLを含めて登録しており、以下コードで出力した際に、ちゃんとタグまで出力されてるのかの確認をしたく調べたのでそれを残します。

検証したいHTML(chakraUIを使ってます。)

  <Text
    as="dd"
    dangerouslySetInnerHTML={{
    __html: user?.description || '',
    }}
    data-testid="card-profile"
  ></Text>

supabeseの中身は<p>これはテスト用の自己紹介です</p>だと想定します。

問題

toHaveTextContentの関数だとだと、<p></p>で出力されてるかまでは確認ができないです。

解決方法

toContainHTMLを使って確認しました。以下は完成形です。

  test('自己紹介が表示されている', async () => {
    renderPage();
    const profile = await screen.findByTestId('card-profile');
    // 「HTMLとして <p> が入っている」こと自体を確認
    expect(profile).toContainHTML('<p>これはテスト用の自己紹介です</p>');
  });

おわりに

細かい部分ですが、ここを間違えるとテストの意味がすずれてくるので気がついてよかったです