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

設定前

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

設定方法

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

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

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

.eslintrc.cjs

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",
      },
    ],
  },
};

設定後

動作確認を行います。
以下の様にesLintが命名規則を確認し、エラーを出してくれます！
ホバーするとカスタムメッセージの表示も行ってくれます。
これで安心ですね、ぜひ皆さんも設定してみて下さい！