Storybookを使い始めてからあれこれ機能を使いこなし始めたのですが、インタラクションテストをやっている中で少し困った挙動があったので備忘録的にまとめています。

環境

Storybook v6.5.15

困ったこと

インタラクションテストでuserEvent.type()で入力フォームにテキストを入力しようとした時に、サイドメニューや画像のような機能が勝手に有効になったりして、テストが正常に終了しないケースもあって困っていました

上の画像の機能には、それぞれショートカットが割り当てられていてuserEvent.type()でstorybookなどをjikkousurutosやtなどでコマンドが優先して実行されてしまうことが原因のようでした。

Storybookのアドオン機能の設定で、ショートカット自体を無効化することで解決することができそうなので、次の設定を追加してショートカットを無効化しました。

.storybook/manager.js

import { addons } from '@storybook/addons';

addons.setConfig({
  enableShortcuts: false,
});

manager.jsがない方は、新しく作成してください。

割り当てられているショートカットのキーを変更したりすることができたら1番良さそうなのですが、今のところはそのような設定は出来なさそう？なので、今後のアップデートに期待というところでしょうか

以上です