⌨️

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

2022/02/28に公開

はじめに

  • 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ルールです。
  • ittesttoBeCalledWith()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"]
  }
}
  • pluginsjestを設定します。
  • extendsplugin:jest/recommendedplugin: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内に必ずittestを配置します。

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.jsoneditor.codeActionsOnSave > source.fixAll.eslinttrueにすることで、ファイル保存時に自動的に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

Discussion