website

Javascript/Typescript ReactNative Tech

【React Native】StorybookのTutorialでつまずいたこと

2022年1月8日

最近React NativeでStorybookを導入することがあったので、Tutorialを進める上でつまずいたことを書き記していきます。

Storybookとは?

UIコンポーネントをアプリと独立して開発できるフレームワークです。

GUIのパーツ集のような形でカタログとして扱ったり、コンポーネントの単体テスト目的でも利用されます。

GithubやDropbox、Airbnbといった有名な企業でも使われているようですね。

Storybook React Native向けのTutorial通りに動かない

StorybookにはReactやReact Native、Vueといった各フレームワーク用にそれぞれTutorialを用意してくれています。

初学者にとってTutorialはありがたいですよね!

でも、React NativeのTutorialでは問題がたくさんあり、うまく動かないケースが多々ありました。。。

yarn storybook がまったく機能しない

yarn storybookとコンソールに打てば、Storybookのサーバーが起動して、UIコンポーネントのカタログ集が見れるといった説明があります。

ただ、実際に実行してもUIコンポーネント候補をロード中で、いくら待っても表示されず。

似た現象がちらほら起きているようで、解決するケースもあるようです。

https://github.com/storybookjs/react-native/issues/58

僕が出会ったケースだと上のURLで提示された解決方法では治らず。

ちなみに、npmで環境を構築した場合も同様の現象が発生しました。

テストが通らない

TutorialではUI的なテストはStorybookで、制御周りのテストはjestのようなテストフレームワークで確認しましょう、ということが説明されています。

実際に、jestでのサンプルコードが記載されていますが、実際に実行してみると動かず。。。

Storybookの導入をしたかったので、ここはもう気にせずノータッチで進めました。

Storybookを動かすためには

今回、yarn storybookで動かすのは諦めて、yarn iosyarn androidでエミュレーター上で動かすようにしました。

react-native-webを導入できれば、ブラウザー上でも確認できるようですが、僕の環境だと他のライブラリとバージョンの競合が起きたため、断念。

1. App.tsx(or js)でStorybookのコンポーネントを読み込み

必要なのはこれだけ。

ただし、事前にこちらを実行をしておく必要あります。

npx -p @storybook/cli sb init --type react_native

(Tutorialの頭の方を実行してればOK)

2. yarn ios / android で実行

あとは

yarn ios (or android)

で実行するのみ。

実行した結果はこちら。

備考

App.tsxでStorybookコンポーネントを呼び出すと、通常のアプリ(リリースしたいアプリ)が起動できないですよね。

だから、環境変数などで通常アプリとStorybookを両立しようとすると、僕の環境ではなぜか通常アプリ側のAmplifyで問題が発生しました。

色々試してみましたが、最終的にはApp.tsxの中で切り替えるのではなく、モードごとにApp.tsxを書き換えることで対応ができました。

あらかじめStorybook用のApp.tsxを準備して、yarn switch-storybookみたいな形で切り替えられるようにすると便利です。

-Javascript/Typescript, ReactNative, Tech,
-, , , ,