Vitestにeslint-plugin-vitestを設定する

はじめに

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

対象読者

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

eslint-plugin-vitestとは

https://www.npmjs.com/package/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に移行したい方はぜひ検討ください。

ソースコード一式

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

参考サイト

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

https://vitest.dev/

https://eslint.org/

関連記事

https://zenn.dev/kakkoyakakko/articles/5f9d78a02ff8fb