data-testidの命名規則を強制させてみた

Unitテストを書く際に、data-testid属性を使うことがあると思います。プロジェクトが大きくなってきて、気がつけば複数の命名規則が混在してしまっている事ありませんでしょうか。そうならない為に、data-testid属性の命名規則を強制させてみました。

#Test

#React

kazu

2023.12.18

設定前

下記コードを見てください。
極端な例ですが、複数の命名規則が混在しており、とても見やすいとは言えないコードになっています。

設定方法

eslint-plugin-testing-libraryのconsistent-data-testidを使うことで、
data-testid属性の命名規則を強制させることができます。

npm install --save-dev eslint-plugin-testing-library

設定も簡単です。testIdPatternに正規表現を指定し、customMessageにエラーメッセージを指定するだけです！
今回はローワーキャメルケースで設定を行います。

module.exports = {
  plugins: ["testing-library"],
  rules: {
    "testing-library/consistent-data-testid": [
      "error",
      {
        testIdPattern: "^[a-z]+([A-Z]|[a-z]|[0-9])*$", // ローワーキャメルケース
        customMessage: "Must be lower camel case",
      },
    ],
  },
};