Storybook の Story を Jest で再利用する際、play function の型が合わないときの対処法
追記: 7.0 以降で解決済み
前提
コンポーネント
urql や msw の mock
play function で書いたインタラクション
render・play・assert するだけで、テストコード が完成してしまいます。
問題
play 関数を実行するときなど、TypeScript の型が合わないと怒られる場合がある
play 関数が optional だからそのままだと実行できないよ
play function に渡した実引数 { canvasElement: container } の型が合わない
code:text
Argument of type '{ canvasElement: HTMLElement; }' is not assignable to parameter of type 'StoryContext<ReactFramework, Partial<{ onSubmit?: (values: { title: string; }) => void; }>>'.
Type '{ canvasElement: HTMLElement; }' is missing the following properties from type 'StoryIdentifier': componentId, title, kind, id, and 2 more.
解決策
composeStories の import 元を '@storybook/react' から '@storybook/testing-react' に変えよう
これは間違い
@storybook/testing-react では、play 関数を wrap して optional じゃなくしたり、仮引数の StoryContext を optional にしてくれたりしているよ
@storybook/react の composeStories は何者?
test code には composeStory で動く
v7.0
v6.5.12
composeStories だと型が合わない
バグでは?
/store のcomposeStories
/react の composeStories
考察
@storybook/react は @storybook/testing-react をコピーしたもの
コピー時に型名を変更する必要があり、その際に変更ミスがあった