Jest を実装する上で便利な eslint-plugin-jest
はじめに
eslint-plugin-jest は、Jest のテストコードに対する Lint プラグインです。
eslint-plugin-jest を導入することで、Jest のテストコードに対しても静的解析を行うことが可能になります。
ただ、どれを利用すればいいのかがいまいちわからなかったので、実際にドキュメントを見て、便利そうなプラグインをピックアップしてみました。
個人的に「これ便利だな」「あったら便利かも」と感じた設定をまとめているだけなので、もし「これも便利ですよ！」といったご意見がありましたら、ぜひコメントいただけたらと思います! 🙇
インストール方法
まずは、eslint-plugin-jest をインストールします。
npm install --save-dev eslint-plugin-jest
インストール後は、.eslintrc.json に以下の設定を追加します。
{
...
"env": {
"jest/globals": true,
},
"extends": [
"plugin:jest/recommended",
"plugin:jest/style"
],
"plugins": ["jest"],
"overrides": [
{
"files": ["./src/**/*.test.ts", "./src/**/*.test.tsx"],
"plugins": ["jest"],
"extends": ["plugin:jest/recommended", "plugin:jest/style"],
"rules": {
"jest/consistent-test-it": [
"error",
{
"fn": "test"
}
],
"jest/no-test-return-statement": "error",
"jest/prefer-comparison-matcher": "error",
"jest/prefer-equality-matcher": "error",
"jest/prefer-expect-resolves": "error",
"jest/prefer-hooks-in-order": "error",
"jest/prefer-hooks-on-top": "error",
"jest/prefer-lowercase-title": "error",
"jest/prefer-to-have-length": "error",
"jest/require-top-level-describe": "error"
}
},
],
...
}
各機能の説明
基本的には plugin:jest/recommended を指定することで、デフォルトのオススメ機能が適応されますが、追加で様々なルールを設定していきます。
consistent-test-it
内容
test と it をどちらかに統一するルール。
Jest 内では test でも it でも同様の意味を持つが、双方とも利用されると可読性が悪いため 片方に統一した方が良いかも。
例
悪い例
it("foo");
it.only("foo");
良い例
test("foo");
test.only("foo");
no-test-return-statement
内容
void 以外の返り値を許容しないようにするルール。
Promise を返す必要があるのであれば、async/await を利用する必要がある。
例
悪い例
test("return an expect", () => {
return expect(1).toBe(1);
});
test("returning a promise", function () {
return new Promise((res) => setTimeout(res, 100)).then(() =>
expect(1).toBe(1)
);
});
良い例
test("one", () => {
expect(1).toBe(1);
});
test("one", function () {
expect(1).toBe(1);
});
test("returning a promise", async () => {
await new Promise((res) => setTimeout(res, 100));
expect(1).toBe(1);
});
prefer-comparison-matcher
内容
expect の中で値の比較を行うのではなく、.toBeGreaterThan() や .oBeLessThanOrEqual() などで比較するように指定するルール。
例
悪い例
expect(x > 5).toBe(true);
expect(x < 7).not.toEqual(true);
expect(x <= y).toStrictEqual(true);
良い例
expect(x).toBeGreaterThan(5);
expect(x).not.toBeLessThanOrEqual(7);
expect(x).toBeLessThanOrEqual(y);
prefer-equality-matcher
内容
イコールのマッチをした場合、 toBe, toEqual, toStrictEqual 内で期待される値を true としないようにするルール。
例
悪い例
expect(x === 5).toBe(true);
expect(name === "Carl").not.toEqual(true);
expect(myObj !== thatObj).toStrictEqual(true);
良い例
expect(x).toBe(5);
expect(name).not.toEqual("Carl");
expect(myObj).toStrictEqual(thatObj);
prefer-expect-resolves
内容
expect の内側に await の利用を許容しないルール。
例
悪い例
test("passes", async () => {
expect(await someValue()).toBe(true);
});
test("is true", async () => {
const myPromise = Promise.resolve(true);
expect(await myPromise).toBe(true);
});
良い例
test("passes", async () => {
await expect(someValue()).resolves.toBe(true);
});
test("is true", async () => {
const myPromise = Promise.resolve(true);
await expect(myPromise).resolves.toBe(true);
});
prefer-hooks-in-order
内容
hooks の順番を
beforeAllbeforeEachafterEachafterAll
以外で許容しないルール。
悪い例
describe("foo", () => {
beforeEach(() => {
hoge();
});
beforeAll(() => {
fuga();
});
test("test-description", () => {
// ...
});
});
良い例
describe("foo", () => {
beforeAll(() => {
hoge();
});
beforeEach(() => {
fuga();
});
test("test-description", () => {
// ...
});
});
prefer-hooks-on-top
内容
beforeAllbeforeEachAfterEachAfterAll
を各テストの前に定義するよう指定するルール。
例
悪い例
describe("foo", () => {
beforeAll(() => {
hoge();
});
test("test-description", () => {
// ...
});
beforeEach(() => {
fuga();
});
});
良い例
describe("foo", () => {
beforeEach(() => {
hoge();
});
beforeAll(() => {
fuga();
});
test("test-description", () => {
// ...
});
});
prefer-lowercase-title
内容
test, describe の記述は lowercase 以外を許容しないルール。
例
悪い例
test("Adds 1 + 2 to equal 3", () => {
expect(sum(1, 2)).toBe(3);
});
良い例
test("adds 1 + 2 to equal 3", () => {
expect(sum(1, 2)).toBe(3);
});
prefer-to-have-length
内容
length の比較などのテストを行う際は .toBe(), .toEqual(), .toStrictEqual() を利用せず、.toHaveLength() を利用するように指定するルール。
例
悪い例
expect(files.length).toBe(1);
expect(files.length).toEqual(1);
expect(files.length).toStrictEqual(1);
良い例
expect(files).toHaveLength(1);
require-top-level-describe
内容
一番上は必ず describe を利用するようにルール化。
例
悪い例
test("my test", () => {});
describe("test suite", () => {
test("test", () => {});
});
良い例
describe("test suite", () => {
test("my test", () => {});
test("test", () => {});
});
Discussion