idやclassを使ってテストを書くのは、もはやアンチパターンである 上記の記事を書いたところ、様々な反応があり非常に勉強になりました。 中でも気になったのが、class名に規約を設け、test-というプレフィックスを付けるものです。 個人的には、カスタムデータ属性の方が分離する際の見通しが良く、またCSSinJSにも適用できるのでこちらを推しますが、チーム内で共通の理解がある場合は、クラス名で制約を付けるのは良い解決作だと思います😆 さらに言えば、この問題の本質は、いかにチーム内で同意が得られるかに尽きます(data-testを書いたところで共通認識がなければ意味がないですから) さて、class名のよるtest-プレフィックスについて、ちょっと見たところプロダクション時に取り除くプラグインはないようでした。 なのでちょっと作ってみました。 akameco/babel-plugin-r
![テストのためのクラス名をプロダクションビルドで除去する [react,jsx] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7f29abaec52c94e9edf0dc3ce025e45e88e92386/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgzJTg2JUUzJTgyJUI5JUUzJTgzJTg4JUUzJTgxJUFFJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFJUUzJTgyJUFGJUUzJTgzJUE5JUUzJTgyJUI5JUU1JTkwJThEJUUzJTgyJTkyJUUzJTgzJTk3JUUzJTgzJUFEJUUzJTgzJTgwJUUzJTgyJUFGJUUzJTgyJUI3JUUzJTgzJUE3JUUzJTgzJUIzJUUzJTgzJTkzJUUzJTgzJUFCJUUzJTgzJTg5JUUzJTgxJUE3JUU5JTk5JUE0JUU1JThFJUJCJUUzJTgxJTk5JUUzJTgyJThCJTIwJTVCcmVhY3QlMkNqc3glNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTM5ZjQyM2VjMjNlMDY3NTg5YjM3MjFjMDZlNzdjOTc4%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBha2FtZWNvJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mOTRmMTAwZTNhNzBkYjQ0NzQ1YzVlNzVlZDYyYWI1Yg%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dc8c98c4cdf2e1914b01f7ea7224a21d7)