Jestにeslint-plugin-jestを設定する

はじめに

• Jestを使用して複数人でテストコードを実装していると、メンバーごとに書き方が違って統一感が無くなった経験はありませんか？
• ESLintのpluginにeslint-plugin-jestというものがあり、それを使用することでJestのルールを統一することが出来ます。この記事ではeslint-plugin-jestの設定方法などを記載します。

対象読者

• Jest初心者で書き方を学びたい方
• チーム内のJestの書き方を統一したい方

eslint-plugin-jestとは

https://www.npmjs.com/package/eslint-plugin-jest

• Jest CommunityがメンテナンスをしているJest向けのESLintルールです。
• it、testやtoBeCalledWith()、toHaveBeenCalledWith()などのように同じことが複数のメソッドで出来るので、どちらを使用するか強制することが出来ます。
• テストタイトル名やdescribeのネスト数など細かい部分のルール設定も可能です。

動作環境

• Node.js: 14.x
• jest: 27.5.x
• eslint: 8.10.x
• eslint-plugin-jest: 26.1.x

サンプルコード

eslint設定

.eslintrc.json

{
  "env": {
    "jest/globals": true,
    "es6": true
  },
  "plugins": [
    "jest"
  ],
  "extends": [
    "plugin:jest/recommended",
    "plugin:jest/style"
  ],
  "rules": {
    "jest/consistent-test-it": ["error", {"fn": "it"}],
    "jest/require-top-level-describe": ["error"]
  }
}

• pluginsにjestを設定します。
• extendsにplugin:jest/recommendedとplugin:jest/styleのルールを設定します。
  • plugin:jest/all - eslint-plugin-jestの全てのルールが設定されます。メジャーバージョン以外でもルールが変更されるため設定時は注意してください。
  • plugin:jest/recommended - 推奨ルール一式が設定されます。
  • plugin:jest/style - スタイルルール系が設定されます。
• rules に個別のルールを設定します。今回は以下のルールを設定しています。
  • jest/consistent-test-it - itまたはtestのどちらを使用するか設定する。今回はitを使用するように設定します。
  • jest/require-top-level-describe - describe内に必ずitやtestを配置します。

Jest設定

jest.config.js

// テスト対象のファイルを指定します。
module.exports = {
  moduleFileExtensions: ['js'],
  testMatch: ['<rootDir>/test/**/*.+(ts|js)']
};

テストコード

test/sample.js

function calc(a, b) {
  return a + b;
}

describe('sample test', () => {
  it('calc 1 + 2 = 3', () => {
    const actual = calc(1, 2);
    expect(actual).toBe(3);
  });

  // テストタイトルがdescribe内で重複(jest/no-identical-title)
  it('calc 1 + 2 = 3', () => {
    const actual = calc(1, 3);
    expect(actual).toBe(4);
  });

  // itではなくtestを使用(jest/consistent-test-it)
  test('calc 2 + 2 = 4', () => {
    const actual = calc(2, 2);
    expect(actual).toBe(4);
  });
});

// describe内にitを配置していない(jest/require-top-level-describe)
it('calc 3 + 1 = 4', () => {
  const actual = calc(3, 1);
  expect(actual).toBe(4);
});

動作確認

エラー表示 - ESLint CLI

• eslintを実行することでeslint-plugin-jestのルールに違反している箇所が一覧表示されます。
• テストコードのコメントに記載のエラー内容が表示されます。
• eslint --fixをすることでルール違反箇所で置き換え可能な箇所を一括置換出来ます。

エラー表示 - VSCode

• Visual Studio CodeのESLint拡張機能をインストールすることでエディタ上にESLintのエラー内容が表示されます。
  • .vscode/settings.jsonのeditor.codeActionsOnSave > source.fixAll.eslintをtrueにすることで、ファイル保存時に自動的にeslint --fixが実行されるようになります。
• Error Lens拡張機能を使用してエラー内容をエディタ上に強調表示しています。

おわりに

• eslint-plugin-jestを使用することによりテストコードに対して一定の秩序を保つことが出来るようになりました。
• eslint --fixや各種エディタの拡張機能などによって、ルールに沿った実装に自動修正されるので、そこまでストレスなくルールを導入することが可能です。

ソースコード一式

https://github.com/yasu-s/eslint-plugin-jest-sample/tree/demo

参考サイト

https://www.npmjs.com/package/eslint-plugin-jest

https://eslint.org/

https://jestjs.io/ja/

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

https://kakkoyakakko2.hatenablog.com/entry/2020/01/05/003000