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

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

kazu

2023.12.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

設定前

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

設定方法

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