ReactコンポーネントのDOMをユニットテストする

React コンポーネントのDOM構造を自動テスティングをするとしたら、スナップショットテストするのが一般的です。 スナップショットテストは、構造に変化があれば警告するという仕組みであり、その中身はあまり意識しません。 ところが、特定の事情により、どうしてもDOM構造そのものを保証しなければいけない事例のときには、DOM構造をユニットテストしたくなるんですが、そういうことをやってる事例を見つけられなかったので、記事にしました。 スナップショットテスト さて、本題のテストを記述する前に React コンポーネントのスナップショットテストのおさらいです。 import React from 'react' import { create } from 'react-test-renderer' test('hoge-', () => { const tree = create(<div>ほげー