jestでもDataProviderが使いたい！

はじめに

jestのテストを書いているうちに、ケースが増えてきて見づらくなってしまったのでPHPUnitのDataProvider的なのを書けないか調べたところあったので備忘録として残しておきます。

テスト対象の関数

下記のような足し算をする関数があるとします。ではこの関数のテストを書いてみましょう！

addition.ts

export const addition = (
    firstNumber: number,
    secondNumber: number
): number => {
    return firstNumber + secondNumber;
};

よく書く書き方

test.eachを使う場合はおそらくこういった書き方をすると思います。
しかしこの渡している配列郡をパット見て、どれが何のパラメーターか分かりづらいですよね...
そこで今回はPHPUnitのDataProviderみたいな形で書き直してみます。

addition.test.ts

import { addition } from '../addition';

describe('addition', () => {
    test.each([
        [1, 1, 2],
        [1, 2, 3],
        [2, 2, 4],
        [2, 3, 5]
    ])('%i + %iは%iであるべき', (firstNumber, secondNumber, expected) => {
        const actual = addition(firstNumber, secondNumber);

        expect(actual).toEqual(expected);
    });
});

DataProviderみたいな書き方

書き方自体は特に難しいものはなく、Object型に書き換えるだけです。
このような形でケース名に$をつけると変数として読み取ってくれ、%iなどでわざわざ記述をする必要がなく直感的にわかりやすいテストケース名になりますよね！

addition.test.ts

import { addition } from '../addition';

interface DataProvider {
    caseName: string,
    firstNumber: number,
    secondNumber: number,
    expected: number,
};

const dataProvider: DataProvider[] = [
  {
    caseName: '1+1は2であるべき',
    firstNumber: 1,
    secondNumber: 1,
    expected: 2,
  },
  {
    caseName: '1+2は3であるべき',
    firstNumber: 1,
    secondNumber: 2,
    expected: 3,
  },
  {
    caseName: '2+2は4であるべき',
    firstNumber: 2,
    secondNumber: 2,
    expected: 4,
  },
  {
    caseName: '2+3は5であるべき',
    firstNumber: 2,
    secondNumber: 3,
    expected: 5,
  },
];

describe('addition', () => {
  test.each(dataProvider)(
    '$caseName',
    ({ firstNumber, secondNumber, expected }) => {
      const actual = addition(firstNumber, secondNumber);

      expect(actual).toEqual(expected);
    }
  );
});

あとがき

テストコードをただ単に書くだけでなく、AAAなどの指針があるようにテストコード自体を読みやすく改善していくのはとても大事で今後も続けていきたいと感じました。
また何か読みやすくなる改善方法ありましたら記事にします!