idやclassを使ってテストを書くのは、もはやアンチパターンである - Qiita

いきなり結論を書くと、idやclassはスタイルのためのものなので、テストでそれを使うのはやめましょう。そして、カスタムデータ属性を使いましょう。(idやclassはスタイルのためだけではないという意見はごもっともです！しかし、主にとしてスタイルに使われるということでご了承頂いて以下の駄文に付き合って頂けると幸いです🙇) 先に断っておくと主にreactについての話で、JSXを前提とします。(手法はReactに限りませんが理由は後述) 2020/03/23 追記 この記事は1年以上前に書かれた記事なのでテストフレームワークとしてenzymeを使っていますが、現時点ではTesting Libraryの使用をオススメします。data-testid に対応するクエリを備えています。 React Testing Library · Testing Library はじめに ご存知の通り、ロジックと

[t_yamo]

解るけれど、テスト用マーカーでテスト用世界を構成してそれに対してテストしている感もあって、実世界に対するテストとして考えるとモヤモヤした部分もある。正しく写像しているかのテストが別にあればいいのかな。

[z1h4784]

classは変わっちゃうから後で困るよというのは分かるけど、idが変わったせいでテストが通らなかったらバグでいいんじゃない？デザインのためにidを変えるのって普通なのかな

[hiroshitoda]

気持ちはわかるんだけどアンチパターンは言い過ぎだし、こういう動機に至らせてしまうReactがそもそも開発プラットフォームとしては微妙な気がしている

[ryota-murakami]

参考記事の最後に「なぜidを使わないのか？」に対するQ&Aが掲載 されている。個人的にはidで管理しても結局'test-○○'のようなprefixを付与する事になる可能性が高いので、それだったらdata属性の方が筋が良い かなと。

[b_wa]

うちはjs用のclass名の命名規則があるので、デザインを変えてもそのclass名は変わらない。li.jxxx-item.xxx-itemみたいになっていて、前者がロジック用、後者がスタイル用。

[uehaj]

RNではtestidの方がポピュラーかな https://www.npmjs.com/package/babel-plugin-react-test-id

[mizchi]

facebookの中身をみても data-test-idついてるしな

[teppeis]

Facebook系はdata-testid使ってるっぽい / 目的と開発フロー次第かな

[kabochatori]

xhtmlが席巻していればxmlnsでjs:idとかjs:classとか流行ってもよかったのに…

[luccafort]

個人的にはわかりやすいし除去できるなら別に問題ない気がするけどなーと思ってからブコメみたら「なるほど、確かに…」みたいな気持ちになった。複雑すぎるフロントエンドに問題があるのでは？という気持ち。

[dorapon2000]

“もしスタイルの変更のためにclass名を変えて、ロジックのテストが落ちるなんてことはあってはならないのです。”

[yarumato]

“data-testidというテストのための属性を使うことで、何をテストするのか明確になりました。テストからクラスを扱わないことで、自由にスタイルのためにクラス名を変更したり、いつでもCSS in JSに切り替えられます”

[tri-star]

data-testのようなテストでしか使用しない属性を定義してテストからはそれを参照する

[takatama]

分かりやすくて良い

[gfx]

せやな。

[kgr0210]

👀

[akahigeg]

id変えてテスト落ちたらテストが正常に機能してるってことなんでいいんじゃないかな。問題になるほど頻繁には変えないと思うし。classの方はテストに使ったことない

[honeybe]

お、せやな。

[mas-higa]

"プロダクションではそのクラス名は残していますか" "まあ残しても問題はないですが"

[Ashizawa]

コンポーネント設計が悪いから名前が被るんじゃね？

[pmint]

テスト手法を勘違いしてるんだと思う。テスト失敗は悪だと思ってそう。/ DOM要素に詳しい型付けをしましょうという話。その型をここではテストに利用してる。data-testというよりdata-typeにして入力の検証にも使うべき。

[Nobkz]

idやclassを使って、テストを書くのは「アンチパターン」とか言ってるけどそもそも、これパターンなのか...というか、なぜそういうテストを書くのか意味が分からんマン。

[tamanugi]

「このidとclassはデザイナー側がつけたものか実装時につけられたものかどっちだ？」って迷うことがあるので、よさげに思える

[kawa-_-kawa]

なるほどと思いつつも、デザイナー側に要素追加・更新・削除時にtext-XX要素を重複・変更・削除しないように注意してもらう必要あるわけで、プログラマーは楽になるけどコストが他に移っただけに見える。

[deep_one]

「idやclassはスタイルのためのものなので」全く同意しない。特にidはバックエンドのデータ設計のレベルのものだろ。

[isaisstillalive]

idやclassを使わないのは賛成。フォームの名前に関しては実装と関連してるので *[name="email"] とかで探すようにしてる

[yuanying]

https://www.w3.org/TR/html5/dom.html 読んだけど、id や class はスタイルのためのものとはやっぱり思えない。単なる実装上の都合でしかものを言ってなくないか。

[takaesu]

フロントエンド テストのやり方

[enemyoffreedom]

できればテストやデザインに限らずに、合意なくidを変えないでほしいかな

[yamadar]

一理ある

[gnufrfr]

testって文字列が配信されんのやだな。data-でやるのは良さそう。って後で気づいたけど、この属性をプロダクション環境では出さないってできんの？すごいな。

[side_tana]

はい

[ustam]

どうでもいいけど定数は全て大文字で書くという慣例はもう無くなっちゃったの？

[w1234567]

seleniumテストとかIT業界の闇を煮詰めたものに触れるのはやめよう

[elephant1974]

「idやclassはスタイルのためのものなので、テストでそれを使うのはやめましょう」→言われてみればその通りだけど、ウチのはそういうレベルじゃないからなー。

[ledsun]

テストコードの都合でプロダクトコードを変更するのは、原則悪手。idやクラス名はグローバルなんだから全置換すればええやん（sassやlessで入れ子にしていると面倒だな）。