`createMock`'s return type is `any`.

[kagankan]

アドオンの開発ありがとうございます！ このアドオンのおかげでモックが必要なコンポーネントの表示ができるようになり、大変便利に使わせてもらっています。

動作には問題ないのですが、型エラーについて報告です。

問題

createMock の返り値が any になる。

原因

調べたところ、 storybook-addon-module-mock のdependenciesに jest-mock が入っていないことによるもののようです。 storybook-addon-module-mock では暗黙的に jest-mock@27.3.0 を参照しているようですが、その依存がdependenciesに指定されていません。 私の環境では、別のパッケージによって jest-mock@29.6.2 が入っているため、バージョンが食い違っています。 jest-mock の Mock 型の型引数がこれらのバージョン間で変わっているため、createMock の返り値が any になってしまっているようです。

解決策

パッケージのdependenciesに jest-mock を追加すれば解決するはずです。 後ほどPRを出します。

現状の対応方法

型アサーションして型を上書きして対応しています。

import type { Mock } from 'jest-mock';
import { createMock } from 'storybook-addon-module-mock';
import * as useSample from 'hooks/useSample';
// ...
const useSampleMock = createMock(useSample, 'useSample') as Mock<
    (typeof useSample)['useSample']
>;
useSampleMock.mockReturnValue({
    data: [],
    isLoading: false,
});

参考

ESLintの import/no-extraneous-dependencies を使うとdependenciesに入っていないパッケージを検出することができます。 https://zenn.dev/yusukehirao/articles/no-extraneous-dependencies