⌨️
Jestにeslint-plugin-jestを設定する
はじめに
- Jestを使用して複数人でテストコードを実装していると、メンバーごとに書き方が違って統一感が無くなった経験はありませんか？
-
ESLintのpluginに
eslint-plugin-jestというものがあり、それを使用することでJestのルールを統一することが出来ます。この記事ではeslint-plugin-jestの設定方法などを記載します。
対象読者
- Jest初心者で書き方を学びたい方
- チーム内のJestの書き方を統一したい方
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や各種エディタの拡張機能などによって、ルールに沿った実装に自動修正されるので、そこまでストレスなくルールを導入することが可能です。
ソースコード一式
参考サイト
Discussion