テストのためのクラス名をプロダクションビルドで除去する [react,jsx]

テストのためのクラス名をプロダクションビルドで除去する [react,jsx]

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

上記の記事を書いたところ、様々な反応があり非常に勉強になりました。

中でも気になったのが、class名に規約を設け、test-というプレフィックスを付けるものです。
個人的には、カスタムデータ属性の方が分離する際の見通しが良く、またCSSinJSにも適用できるのでこちらを推しますが、チーム内で共通の理解がある場合は、クラス名で制約を付けるのは良い解決作だと思います😆
さらに言えば、この問題の本質は、いかにチーム内で同意が得られるかに尽きます(data-testを書いたところで共通認識がなければ意味がないですから)

さて、class名のよるtest-プレフィックスについて、ちょっと見たところプロダクション時に取り除くプラグインはないようでした。

なのでちょっと作ってみました。

akameco/babel-plugin-react-remove-classname

インストール

$ yarn add --dev babel-plugin-react-remove-classname

以下にようにtest-と付いたクラスを削除します。

const hello = () => (
    <div className="test-a hello test-b"></div>
)

      ↓ ↓ ↓ ↓ ↓ ↓

const hello = () => (
    <div className="hello"></div>;
)

data-testのプラグイン同様にプロダクション時に有効にするといいと思います。

{
  "env": {
    "production": {
      "plugins": ["react-remove-classname"]
    }
  }
}

まとめ

日々よりよい手法について考えを深めていきたいものです。
何か議論があれば、コメント欄またはツイッターで議論しましょう。(ブコメでもいいですが、反応しずらいので、同時に呟いてくれると助かります🙆‍♂️)

なお、基本的にツイートには全て反応し、随時記事を更新したいと考えいますので、ご協力よろしくお願いします🙇また、前回の記事についてツイッターで議論して下さった方どうもありがとうございました。

おまけ

上記のプラグインはAtomのteletypeを使ってライブコーディングで作りました。
見てくださった方ありがとうございました🙇
楽しかったです😆

今から30分ぐらいバベルプラグインを書こうと思うんですが、Atomのshare貼っておくので暇な人は入ってどうぞ。適当に書くので進捗なくてもご容赦を c7640696-4ec3-4d64-abe2-c23304d10e0f

— あかめ@無職.js (@akameco) November 20, 2017