HTMLでUIを作っていて，has_moreがfalseならなにも表示しない，has_moreがtrueなら「もっと読む」ボタンを出すとする．
has_moreにtrueを与えたときには要素が出て，has_moreがfalseを与えたときは要素が出てない，ということをテストしたい．
このときにやりかたはいろいろ考えられて，
- ソースを正規表現で評価して
/<button/iがあるか調べる- HTMLとしてパースしてないので偶然文字列が一致する可能性がある
- getElementsByTagName的なものでbuttonタグを探す
- buttonタグが複数出たときなど，変更に弱い
button.see-moreみたいにCSSセレクタで要素を探す- デザインの都合でsee-moreクラスを消してしまうとテストが落ちる
button.test-see-moreみたいにクラスを付与して，テスト用のセレクタはtest-から始める- 変更には強いけど，ソースに謎のクラスが出てくるのが格好悪い
data-test-see-moreみたいなdata属性をつける- 変更には強いけどソースに謎のdata属性が出てくるのが格好悪い
- (Reactを使ってたら)buttonにrefをつけてテストではrefで参照する
- セレクタ問題からは開放されるけどアプリケーションの実装には不要なrefができる
いろいろあるけど最高のものはない，という話をしていて，今回はためしにrefつけてみよう，ということになった．これでは良いとか悪いとか，知見あったらください．
