Storybookでcomponentに任意のクエリパラメータを参照させる

この記事は何？

クエリパラメータを参照して挙動が変わるcomponentをStorybookで確認したい、といった場合が稀にあると思います。
素直にaddonを使えばいいんですが、導入するほどでもないなという時に使うといいかもです。

実装

Vue.jsのstoryで実装した例を載せます。
reactはわからないですが同じようにライフサイクルフックの中でやれば多分うまく行くと思います。

AnyStory.stories.js

export initial = (args, { argTypes }) => {
  ...
  created() {
    // 任意のクエリパラメータをセット
    history.replaceState('', '', `${window.location.href}&any_params=hogehogehugahuga`);
  },
  ...
};

注意

• すでにstorybookによるクエリパラメータが設定されているので&始まりでパラメータを追加する必要があリます。
• replaceStateの仕様的にoriginの異なるurlに差し替えることはできないです。

参考URL

https://qiita.com/nightyknite/items/b350dc95f7da089a516a
https://developer.mozilla.org/ja/docs/Web/API/History/replaceState