🩹
Vitestにeslint-plugin-vitestを設定する
はじめに
- Vitestを使用して複数人でテストコードを実装していると、メンバーごとに書き方が違って統一感が無くなった経験はありませんか？
-
ESLintのpluginに
eslint-plugin-vitestというものがあり、それを使用することでVitestのルールを統一することが出来ます。この記事ではeslint-plugin-vitestの設定方法などを記載します。
対象読者
- Vitest初心者で書き方を学びたい方
- チーム内のVitestの書き方を統一したい方
eslint-plugin-vitestとは
- Vitest向けのESLintルールです。
- eslint-plugin-jestと同様のルールが定義されています。
-
it、testやtoBeCalledWith()、toHaveBeenCalledWith()などのように同じことが複数のメソッドで出来るので、どちらを使用するか強制することが出来ます。 - テストタイトル名や
describeのネスト数など細かい部分のルール設定も可能です。
動作環境
- Node.js - 18.x
- Vitest - 0.34.x
- eslint - 8.47.x
- eslint-plugin-vitest - 0.2.x
サンプルコード
eslint設定
.eslintrc.json
{
"root": true,
"env": {
"es6": true
},
"plugins": ["vitest"],
"extends": ["plugin:vitest/recommended"],
"rules": {
"vitest/consistent-test-it": ["error", {"fn": "it"}],
"vitest/require-top-level-describe": ["error"]
}
}
-
pluginsにvitestを設定します。 -
extendsにplugin:vitest/recommendedのルールを設定します。-
plugin:vitest/all-eslint-plugin-vitestの全てのルールが設定されます。 -
plugin:vitest/recommended- 推奨ルール一式が設定されます。
-
-
rulesに個別のルールを設定します。今回は以下のルールを設定しています。-
vitest/consistent-test-it-itまたはtestのどちらを使用するか設定する。今回はitを使用するように設定します。 -
vitest/require-top-level-describe-describe内に必ずitやtestを配置します。
-
Vitest設定
vitest.config.ts
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
// describe, itなどをglobalで使用可能に設定
globals: true,
},
})
テストコード
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内で重複(vitest/no-identical-title)
it('calc 1 + 2 = 3', () => {
const actual = calc(1, 3);
expect(actual).toBe(4);
});
// itではなくtestを使用(vitest/consistent-test-it)
test('calc 2 + 2 = 4', () => {
const actual = calc(2, 2);
expect(actual).toBe(4);
});
});
// describe内にitを配置していない(vitest/require-top-level-describe)
it('calc 3 + 1 = 4', () => {
const actual = calc(3, 1);
expect(actual).toBe(4);
});
動作確認
-
eslintを実行することでeslint-plugin-vitestのルールに違反している箇所が一覧表示されます。 -
eslint --fixをすることでルール違反箇所で置き換え可能な箇所を一括置換出来ます。
おわりに
-
eslint-plugin-vitestを使用することによりテストコードに対して一定の秩序を保つことが出来るようになりました。 -
eslint --fixや各種エディタの拡張機能などによって、ルールに沿った実装に自動修正されるので、そこまでストレスなくルールを導入することが可能です。 -
eslint-plugin-jest->eslint-plugin-vitestへの移行もスムーズに出来るため、JestからVitestに移行したい方はぜひ検討ください。
ソースコード一式
参考サイト
関連記事
Discussion