【Jest x TypeScript】モック関数jest.fn()の引数と戻り値に型をつける

jest.fn()は戻り値がundefinedの関数

const mockFn1 = jest.fn();

console.log(mockFn1()); // undefined
const r1 = mockFn1(); // mはany型

引数と戻り値の型だけを指定したい場合つぎのように書く。

jest.fn<戻り値の型, [第一引数の型, 第二引数の型]>();

例:

const mockFn = jest.fn<number, [string, number]>();

戻り値はundefinedのままだが、number型になっている。

console.log(mockFn('hoge', 1)) // undefine

const r= mockFn6('hoge', 1) // const r: number

正しい引数を渡さないとエラーになる

// Error: 2 個の引数が必要ですが、1 個指定されました。
// console.log(mockFn('hoge'))

// Error: 型 'boolean' の引数を型 'number' のパラメーターに割り当てることはできません。
// console.log(mockFn('hoge', true))

[第一引数の型, 第二引数の型]と書くのはなぜか?

mockFn.mock.callsにモック関数を実行したときの引数が下のような形で格納される。この二重配列の要素である配列の型をタプル型で指定している。

[ 
　[ 関数を1回目に実行したときの第一引数, 第二引数 ], 
　[ 関数を2回目に実行したときの第一引数, 第二引数 ], 
]

console.log(mockFn.mock.calls); 
// [ [ 'hoge', 1 ] ]

その他

調査したときのファイルまるごとコピペしておきます。

// jest.fn()は戻り値がundefinedの関数
const mockFn1 = jest.fn();

const mockFn2 = jest.fn((s: string):number => 100);

const mockFn3 = jest.fn<number, [string]>((s: string) => 100);

// Error: 型 '(s: string, n: number) => number' の引数を型 '(args_0: string) => number' のパラメーターに割り当てることはできません。
// const mockFn4 = jest.fn<number, [string]>((s: string, n: number) => 100);

const mockFn5 = jest.fn<number, [string, number]>((s: string) => 100);

const mockFn6 = jest.fn<number, [string, number]>();

test('', () => {
  // どのような引数でも渡すことができる
  console.log(mockFn1()); // undefined
  const r1 = mockFn1(); // mはany型

  // どのような引数でも渡すことができる
  console.log(mockFn1('hoge')); // undefined
  const r2 = mockFn1('hoge'); // mはany型
  
  console.log(mockFn2('hoge')); // hoge
  const r3 = mockFn2('hoge'); // m2はnumber型

  // Error: 1 個の引数が必要ですが、0 個指定されました。
  // const r4 = mockFn2();

  // Error: 型 'boolean' の引数を型 'string' のパラメーターに割り当てることはできません。
  // const r5 = mockFn2(true);

  const r6 = mockFn2('hoge');
  // r6はnumber型

  console.log(r6) // 100
  console.log(mockFn2('hoge')) // 100

  // Error: 2 個の引数が必要ですが、1 個指定されました。
  // console.log(mockFn5('hoge'))
  
  // Error: 2 個の引数が必要ですが、1 個指定されました。
  // console.log(mockFn6('hoge'))

  // Error: 型 'boolean' の引数を型 'number' のパラメーターに割り当てることはできません。
  // console.log(mockFn6('hoge', true))

  console.log(mockFn6('hoge', 1)) // undefined

  const r7= mockFn6('hoge', 1) // r7はnumber型

  type mockFnReturn = ReturnType<typeof mockFn6> // number

  console.log(mockFn6.mock.calls); // [ [ 'hoge', 1 ], [ 'hoge', 1 ] ]
});