type:any

Create React Appでejectせずにdata-testid(or 任意の属性)を剥がす(babel-plugin-jsx-remove-data-test-id使用)

{ category: "Front-end" }

Udemyの某テスト講座を見ていたらdata属性を剥がすのにejectしようという流れになって嫌だなとなったので、自分のアプリでejectせずに剥がす方法を調べていたのですが、babel-plugin-jsx-remove-data-test-idをcustomize-craおよびreact-app-rewiredを用いてアプリに設定するのがいいようです。

やることの手順を説明していきます。まずモジュールをインストールします。

yarn add customize-cra react-app-rewired babel-plugin-jsx-remove-data-test-id --dev

package.jsonを同じレベルの場所にconfig-overrides.jsを作成します。

const { override,
  addBabelPlugins
} = require("customize-cra");

module.exports = override(
  ...addBabelPlugins(
    [
      "babel-plugin-jsx-remove-data-test-id",
      {
        attributes: "data-testid" // 任意の属性。複数の場合は配列で指定
      }
    ]
  )
);

package.jsonのコマンドを変更します。私はbuildのみ変えたかったのでそうしたのですが、rewiredを使用したい場合のコマンドを任意で下記のように変更してください。

"scripts": {
  ...
  "build": "react-app-rewired build", // 私はここだけ変更しました。test、startも変えたい場合はreact-scripts部分をreact-app-rewiredに変更してください。
}

これでbuildしてみるとtestidが剥がれているのを確認出来ると思います。(私はターミナルでおすすめされたserveを用いる方法でbuild内容を確認しています。)
customize-craおよびreact-app-rewiredを用いればejectせずにwebpackやbabelの設定を変更出来るようなので、試したいことがある方は色々やってみるのがいいのかもしれません。この記事が参考になったら幸いです、、!