storybook 上で require.context しつつ storyshots を動かす

storyshots は storybook の story を自動で snapshot とってくれるやつです。導入は略。
タイトルの組み合わせだとバグります。ハマった箇所だけ。しょぼいハマりだけど、半年ぐらいわからなかったので…。

src/**/*.stories.js みたいな glob pattern で storybook のコードを評価したい場合、こういうコードになってることが多いんですが

.storybook/config.js

import { configure } from "@storybook/react";

const req = require.context("../src/components", true, /stories\.js$/);
const loadStories = req.keys().forEach(req);

configure(loadStories, module);

これだと loadStories は配列なんですが、storyshots は関数を期待しているので読み込み時に壊れる。そして評価タイミングも実はこれじゃ駄目です。

.storybook/config.js

import { configure } from "@storybook/react";

function loadStories() {
  const req = require.context("../src/components", true, /stories\.js$/);
  req.keys().forEach(req);
}

configure(loadStories, module);

It works.

参考: https://github.com/storybooks/storybook/issues/2894