狠狠撸

狠狠撸Share a Scribd company logo
Storybookを使ったReact?NativeのテストをWeb上で行う
@natural_clar
自己紹介
Jesse Katsumata @natural_clar
CureApp
React Nativeを使った治療アプリの開発
アメリカ人
蝉迟辞谤测产辞辞办とは
Componentを表示して、見た目が期待通りであるかテストする為のツー
ル
React, React-Native, Vue等いろんなライブラリで使える
react-native版のstorybook
@storybook/react-native
RN版Storybookの利点
実機での見た目の確認が行える
Expoアプリとしてデザイナーチームに共有できる
RN版Storybookの欠点
エミュレータの立ち上げに時間がかかる
Portを取られるので実行中、アプリの方の動作確認が行えない
もっと効率良く行えないか?
react-native-web
react-native特有の<View>や<Text>等のコンポーネントをWebで表示さ
せる
Twitter Liteで使用されている
谤别补肠迟-苍补迟颈惫别の蝉迟辞谤测产辞辞办を飞别产で表示させる
.storybookにwebpack.config.jsをいれる
aliasを使ってreact-nativeをimportしてる箇所をreact-native-
webに変換する
@storybook/reactの方を使用
webpack.con?g.js
.storybookフォルダにいれる
module.exports = (config, configType) => {
config.resolve = {
modules: ['node_modules'],
extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
'react-native$': require.resolve('react-native-web'),
},
}
}
RN-Web版Storybookの利点
エミュレータの起動を待つ必要が無い
アプリとStorybookを同時に開ける
実演
このリンクからリポジトリに飛べます
ありがとうございました

More Related Content

What's hot (20)

Web アプリケーション開発におけるテストの実践 ~ VSUG Day Summer
Web アプリケーション開発におけるテストの実践 ~ VSUG Day SummerWeb アプリケーション開発におけるテストの実践 ~ VSUG Day Summer
Web アプリケーション開発におけるテストの実践 ~ VSUG Day Summer
Tomoyuki Iwade
?
Travis CIで実現するPHPアプリの自動テスト
Travis CIで実現するPHPアプリの自動テストTravis CIで実現するPHPアプリの自動テスト
Travis CIで実現するPHPアプリの自動テスト
Yusuke Ando
?
20140405 mavenセントラルリポジトリへの登録のコツ 第5回渋谷java
20140405 mavenセントラルリポジトリへの登録のコツ 第5回渋谷java20140405 mavenセントラルリポジトリへの登録のコツ 第5回渋谷java
20140405 mavenセントラルリポジトリへの登録のコツ 第5回渋谷java
Y Watanabe
?
201311 webデザイナとエンジニアのチームワークを加速させるテンプレートエンジンmixer2 devlove現場甲子園
201311 webデザイナとエンジニアのチームワークを加速させるテンプレートエンジンmixer2 devlove現場甲子園201311 webデザイナとエンジニアのチームワークを加速させるテンプレートエンジンmixer2 devlove現場甲子園
201311 webデザイナとエンジニアのチームワークを加速させるテンプレートエンジンmixer2 devlove現場甲子園
Y Watanabe
?
脱?独自改造! GebでWebDriverをもっとシンプルに
脱?独自改造! GebでWebDriverをもっとシンプルに脱?独自改造! GebでWebDriverをもっとシンプルに
脱?独自改造! GebでWebDriverをもっとシンプルに
Hiroko Tamagawa
?
厂别濒别苍颈耻尘と相性がいいテンプレートエンジン惭颈虫别谤2-第1回蝉别濒别苍颈耻尘勉强会ライトニングトーク
厂别濒别苍颈耻尘と相性がいいテンプレートエンジン惭颈虫别谤2-第1回蝉别濒别苍颈耻尘勉强会ライトニングトーク厂别濒别苍颈耻尘と相性がいいテンプレートエンジン惭颈虫别谤2-第1回蝉别濒别苍颈耻尘勉强会ライトニングトーク
厂别濒别苍颈耻尘と相性がいいテンプレートエンジン惭颈虫别谤2-第1回蝉别濒别苍颈耻尘勉强会ライトニングトーク
Y Watanabe
?
改訂第3版 Jenkins 実践入門 what's newから見るJenkinsのUpdate
改訂第3版 Jenkins 実践入門 what's newから見るJenkinsのUpdate改訂第3版 Jenkins 実践入門 what's newから見るJenkinsのUpdate
改訂第3版 Jenkins 実践入門 what's newから見るJenkinsのUpdate
Yuki Iwanari
?
巨大不明ビルドの継続的统合を目的とするビルドパイプラインを主轴とした作戦要纲
巨大不明ビルドの継続的统合を目的とするビルドパイプラインを主轴とした作戦要纲巨大不明ビルドの継続的统合を目的とするビルドパイプラインを主轴とした作戦要纲
巨大不明ビルドの継続的统合を目的とするビルドパイプラインを主轴とした作戦要纲
Kiyotaka Oku
?
スマホアプリ自动テストサービス
スマホアプリ自动テストサービススマホアプリ自动テストサービス
スマホアプリ自动テストサービス
Koh Uehara
?
KobeGTUG GAE/Java
KobeGTUG GAE/JavaKobeGTUG GAE/Java
KobeGTUG GAE/Java
takagig
?
海外の厂别濒别苍颈耻尘カンファレンスではどんな発表がされているのか2014
海外の厂别濒别苍颈耻尘カンファレンスではどんな発表がされているのか2014海外の厂别濒别苍颈耻尘カンファレンスではどんな発表がされているのか2014
海外の厂别濒别苍颈耻尘カンファレンスではどんな発表がされているのか2014
Nozomi Ito
?
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
Kohei Saito
?
React Native + Expoでアプリを開発してみた話
React Native + Expoでアプリを開発してみた話React Native + Expoでアプリを開発してみた話
React Native + Expoでアプリを開発してみた話
GIG inc.
?
PHPとTravis CIでブラウザテスト
PHPとTravis CIでブラウザテストPHPとTravis CIでブラウザテスト
PHPとTravis CIでブラウザテスト
Yusuke Ando
?
Jenkinsユーサ?カンファレンス2015 前座資料
Jenkinsユーサ?カンファレンス2015 前座資料Jenkinsユーサ?カンファレンス2015 前座資料
Jenkinsユーサ?カンファレンス2015 前座資料
ikikko
?
Selenium IDE for primer
Selenium IDE for primerSelenium IDE for primer
Selenium IDE for primer
yasukoS
?
RESTful API (JAX-RS) 書くだけで仕様書も 自動で作られていく話 with MicroProfile Open API
RESTful API (JAX-RS) 書くだけで仕様書も自動で作られていく話 with MicroProfile Open APIRESTful API (JAX-RS) 書くだけで仕様書も自動で作られていく話 with MicroProfile Open API
RESTful API (JAX-RS) 書くだけで仕様書も 自動で作られていく話 with MicroProfile Open API
Kohei Saito
?
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetupJava + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetup
Toshiaki Maki
?
搁别补肠迟.箩蝉でサービスを作ってみた话
搁别补肠迟.箩蝉でサービスを作ってみた话搁别补肠迟.箩蝉でサービスを作ってみた话
搁别补肠迟.箩蝉でサービスを作ってみた话
GIG inc.
?
Win7 * appium * androidで実機自動テストやってみた。
Win7 * appium * androidで実機自動テストやってみた。Win7 * appium * androidで実機自動テストやってみた。
Win7 * appium * androidで実機自動テストやってみた。
Naoto Kishino
?
Web アプリケーション開発におけるテストの実践 ~ VSUG Day Summer
Web アプリケーション開発におけるテストの実践 ~ VSUG Day SummerWeb アプリケーション開発におけるテストの実践 ~ VSUG Day Summer
Web アプリケーション開発におけるテストの実践 ~ VSUG Day Summer
Tomoyuki Iwade
?
Travis CIで実現するPHPアプリの自動テスト
Travis CIで実現するPHPアプリの自動テストTravis CIで実現するPHPアプリの自動テスト
Travis CIで実現するPHPアプリの自動テスト
Yusuke Ando
?
20140405 mavenセントラルリポジトリへの登録のコツ 第5回渋谷java
20140405 mavenセントラルリポジトリへの登録のコツ 第5回渋谷java20140405 mavenセントラルリポジトリへの登録のコツ 第5回渋谷java
20140405 mavenセントラルリポジトリへの登録のコツ 第5回渋谷java
Y Watanabe
?
201311 webデザイナとエンジニアのチームワークを加速させるテンプレートエンジンmixer2 devlove現場甲子園
201311 webデザイナとエンジニアのチームワークを加速させるテンプレートエンジンmixer2 devlove現場甲子園201311 webデザイナとエンジニアのチームワークを加速させるテンプレートエンジンmixer2 devlove現場甲子園
201311 webデザイナとエンジニアのチームワークを加速させるテンプレートエンジンmixer2 devlove現場甲子園
Y Watanabe
?
脱?独自改造! GebでWebDriverをもっとシンプルに
脱?独自改造! GebでWebDriverをもっとシンプルに脱?独自改造! GebでWebDriverをもっとシンプルに
脱?独自改造! GebでWebDriverをもっとシンプルに
Hiroko Tamagawa
?
厂别濒别苍颈耻尘と相性がいいテンプレートエンジン惭颈虫别谤2-第1回蝉别濒别苍颈耻尘勉强会ライトニングトーク
厂别濒别苍颈耻尘と相性がいいテンプレートエンジン惭颈虫别谤2-第1回蝉别濒别苍颈耻尘勉强会ライトニングトーク厂别濒别苍颈耻尘と相性がいいテンプレートエンジン惭颈虫别谤2-第1回蝉别濒别苍颈耻尘勉强会ライトニングトーク
厂别濒别苍颈耻尘と相性がいいテンプレートエンジン惭颈虫别谤2-第1回蝉别濒别苍颈耻尘勉强会ライトニングトーク
Y Watanabe
?
改訂第3版 Jenkins 実践入門 what's newから見るJenkinsのUpdate
改訂第3版 Jenkins 実践入門 what's newから見るJenkinsのUpdate改訂第3版 Jenkins 実践入門 what's newから見るJenkinsのUpdate
改訂第3版 Jenkins 実践入門 what's newから見るJenkinsのUpdate
Yuki Iwanari
?
巨大不明ビルドの継続的统合を目的とするビルドパイプラインを主轴とした作戦要纲
巨大不明ビルドの継続的统合を目的とするビルドパイプラインを主轴とした作戦要纲巨大不明ビルドの継続的统合を目的とするビルドパイプラインを主轴とした作戦要纲
巨大不明ビルドの継続的统合を目的とするビルドパイプラインを主轴とした作戦要纲
Kiyotaka Oku
?
スマホアプリ自动テストサービス
スマホアプリ自动テストサービススマホアプリ自动テストサービス
スマホアプリ自动テストサービス
Koh Uehara
?
KobeGTUG GAE/Java
KobeGTUG GAE/JavaKobeGTUG GAE/Java
KobeGTUG GAE/Java
takagig
?
海外の厂别濒别苍颈耻尘カンファレンスではどんな発表がされているのか2014
海外の厂别濒别苍颈耻尘カンファレンスではどんな発表がされているのか2014海外の厂别濒别苍颈耻尘カンファレンスではどんな発表がされているのか2014
海外の厂别濒别苍颈耻尘カンファレンスではどんな発表がされているのか2014
Nozomi Ito
?
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
Kohei Saito
?
React Native + Expoでアプリを開発してみた話
React Native + Expoでアプリを開発してみた話React Native + Expoでアプリを開発してみた話
React Native + Expoでアプリを開発してみた話
GIG inc.
?
PHPとTravis CIでブラウザテスト
PHPとTravis CIでブラウザテストPHPとTravis CIでブラウザテスト
PHPとTravis CIでブラウザテスト
Yusuke Ando
?
Jenkinsユーサ?カンファレンス2015 前座資料
Jenkinsユーサ?カンファレンス2015 前座資料Jenkinsユーサ?カンファレンス2015 前座資料
Jenkinsユーサ?カンファレンス2015 前座資料
ikikko
?
Selenium IDE for primer
Selenium IDE for primerSelenium IDE for primer
Selenium IDE for primer
yasukoS
?
RESTful API (JAX-RS) 書くだけで仕様書も 自動で作られていく話 with MicroProfile Open API
RESTful API (JAX-RS) 書くだけで仕様書も自動で作られていく話 with MicroProfile Open APIRESTful API (JAX-RS) 書くだけで仕様書も自動で作られていく話 with MicroProfile Open API
RESTful API (JAX-RS) 書くだけで仕様書も 自動で作られていく話 with MicroProfile Open API
Kohei Saito
?
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetupJava + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetup
Toshiaki Maki
?
搁别补肠迟.箩蝉でサービスを作ってみた话
搁别补肠迟.箩蝉でサービスを作ってみた话搁别补肠迟.箩蝉でサービスを作ってみた话
搁别补肠迟.箩蝉でサービスを作ってみた话
GIG inc.
?
Win7 * appium * androidで実機自動テストやってみた。
Win7 * appium * androidで実機自動テストやってみた。Win7 * appium * androidで実機自動テストやってみた。
Win7 * appium * androidで実機自動テストやってみた。
Naoto Kishino
?

Similar to Testing react-native with storybook on web (20)

React を導入した フロントエンド開発
React を導入したフロントエンド開発React を導入したフロントエンド開発
React を導入した フロントエンド開発
daisuke-a-matsui
?
React Nativeで考えるクロスプラットフォーム開発
React Nativeで考えるクロスプラットフォーム開発React Nativeで考えるクロスプラットフォーム開発
React Nativeで考えるクロスプラットフォーム開発
yuichi kubota
?
谤别补肠迟-蝉肠谤颈辫迟蝉は飞别产辫补肠办で何をしているのか
谤别补肠迟-蝉肠谤颈辫迟蝉は飞别产辫补肠办で何をしているのか谤别补肠迟-蝉肠谤颈辫迟蝉は飞别产辫补肠办で何をしているのか
谤别补肠迟-蝉肠谤颈辫迟蝉は飞别产辫补肠办で何をしているのか
暁 三宅
?
Reactive programming with Apache Wicket
Reactive programming with Apache WicketReactive programming with Apache Wicket
Reactive programming with Apache Wicket
Ryuhei Ishibashi
?
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
WESEEKWESEEK
?
React Nativeて?始めるアフ?リ開発
React Nativeて?始めるアフ?リ開発React Nativeて?始めるアフ?リ開発
React Nativeて?始めるアフ?リ開発
Ryosuke Hara
?
React Nativeで開発するマルチプラットフォームアプリ
React Nativeで開発するマルチプラットフォームアプリReact Nativeで開発するマルチプラットフォームアプリ
React Nativeで開発するマルチプラットフォームアプリ
Masayuki Iwai
?
react_rails
react_railsreact_rails
react_rails
Shigeru Kondoh
?
厂驰厂罢贰惭滨勉强会まとめ资料(日记アプリ作成)
厂驰厂罢贰惭滨勉强会まとめ资料(日记アプリ作成)厂驰厂罢贰惭滨勉强会まとめ资料(日记アプリ作成)
厂驰厂罢贰惭滨勉强会まとめ资料(日记アプリ作成)
YoshikiWatanabe1
?
厂驰厂罢贰惭滨勉强会まとめ资料(搁别补肠迟基础まとめ)
厂驰厂罢贰惭滨勉强会まとめ资料(搁别补肠迟基础まとめ)厂驰厂罢贰惭滨勉强会まとめ资料(搁别补肠迟基础まとめ)
厂驰厂罢贰惭滨勉强会まとめ资料(搁别补肠迟基础まとめ)
YoshikiWatanabe1
?
GraphQL with React
GraphQL with ReactGraphQL with React
GraphQL with React
Taketoshi 青野健利
?
搁别补肠迟を搁补颈濒蝉とどっぷり使ってみた话と、フロントエンド×础奥厂のこれから
搁别补肠迟を搁补颈濒蝉とどっぷり使ってみた话と、フロントエンド×础奥厂のこれから搁别补肠迟を搁补颈濒蝉とどっぷり使ってみた话と、フロントエンド×础奥厂のこれから
搁别补肠迟を搁补颈濒蝉とどっぷり使ってみた话と、フロントエンド×础奥厂のこれから
Yusuke Murata
?
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips   Prism 4.5 & Kona project 等のご紹介XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips   Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
Shotaro Suzuki
?
20160927 reactmeetup
20160927 reactmeetup20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
?
React Nativeて?Twitterクライアントを作ってみよう
React Nativeて?Twitterクライアントを作ってみようReact Nativeて?Twitterクライアントを作ってみよう
React Nativeて?Twitterクライアントを作ってみよう
dcubeio
?
ルーター自前実装の话
ルーター自前実装の话ルーター自前実装の话
ルーター自前実装の话
Kazushi Kawamura
?
Realm,rx swift,repro を使ってみて
Realm,rx swift,repro を使ってみてRealm,rx swift,repro を使ってみて
Realm,rx swift,repro を使ってみて
Daisuke Nagata
?
Elastic on Azure Integration & Building React UI Based Search App Using Azure...
Elastic on Azure Integration & Building React UI Based Search App Using Azure...Elastic on Azure Integration & Building React UI Based Search App Using Azure...
Elastic on Azure Integration & Building React UI Based Search App Using Azure...
Shotaro Suzuki
?
第12回rest勉強会 これまて?の補足?展望編
第12回rest勉強会 これまて?の補足?展望編第12回rest勉強会 これまて?の補足?展望編
第12回rest勉強会 これまて?の補足?展望編
ksimoji
?
クラスメソッド第4回登壇資料 RxRealm
クラスメソッド第4回登壇資料 RxRealmクラスメソッド第4回登壇資料 RxRealm
クラスメソッド第4回登壇資料 RxRealm
Daisuke Nagata
?
React を導入した フロントエンド開発
React を導入したフロントエンド開発React を導入したフロントエンド開発
React を導入した フロントエンド開発
daisuke-a-matsui
?
React Nativeで考えるクロスプラットフォーム開発
React Nativeで考えるクロスプラットフォーム開発React Nativeで考えるクロスプラットフォーム開発
React Nativeで考えるクロスプラットフォーム開発
yuichi kubota
?
谤别补肠迟-蝉肠谤颈辫迟蝉は飞别产辫补肠办で何をしているのか
谤别补肠迟-蝉肠谤颈辫迟蝉は飞别产辫补肠办で何をしているのか谤别补肠迟-蝉肠谤颈辫迟蝉は飞别产辫补肠办で何をしているのか
谤别补肠迟-蝉肠谤颈辫迟蝉は飞别产辫补肠办で何をしているのか
暁 三宅
?
Reactive programming with Apache Wicket
Reactive programming with Apache WicketReactive programming with Apache Wicket
Reactive programming with Apache Wicket
Ryuhei Ishibashi
?
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
WESEEKWESEEK
?
React Nativeて?始めるアフ?リ開発
React Nativeて?始めるアフ?リ開発React Nativeて?始めるアフ?リ開発
React Nativeて?始めるアフ?リ開発
Ryosuke Hara
?
React Nativeで開発するマルチプラットフォームアプリ
React Nativeで開発するマルチプラットフォームアプリReact Nativeで開発するマルチプラットフォームアプリ
React Nativeで開発するマルチプラットフォームアプリ
Masayuki Iwai
?
厂驰厂罢贰惭滨勉强会まとめ资料(日记アプリ作成)
厂驰厂罢贰惭滨勉强会まとめ资料(日记アプリ作成)厂驰厂罢贰惭滨勉强会まとめ资料(日记アプリ作成)
厂驰厂罢贰惭滨勉强会まとめ资料(日记アプリ作成)
YoshikiWatanabe1
?
厂驰厂罢贰惭滨勉强会まとめ资料(搁别补肠迟基础まとめ)
厂驰厂罢贰惭滨勉强会まとめ资料(搁别补肠迟基础まとめ)厂驰厂罢贰惭滨勉强会まとめ资料(搁别补肠迟基础まとめ)
厂驰厂罢贰惭滨勉强会まとめ资料(搁别补肠迟基础まとめ)
YoshikiWatanabe1
?
搁别补肠迟を搁补颈濒蝉とどっぷり使ってみた话と、フロントエンド×础奥厂のこれから
搁别补肠迟を搁补颈濒蝉とどっぷり使ってみた话と、フロントエンド×础奥厂のこれから搁别补肠迟を搁补颈濒蝉とどっぷり使ってみた话と、フロントエンド×础奥厂のこれから
搁别补肠迟を搁补颈濒蝉とどっぷり使ってみた话と、フロントエンド×础奥厂のこれから
Yusuke Murata
?
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips   Prism 4.5 & Kona project 等のご紹介XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips   Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
Shotaro Suzuki
?
React Nativeて?Twitterクライアントを作ってみよう
React Nativeて?Twitterクライアントを作ってみようReact Nativeて?Twitterクライアントを作ってみよう
React Nativeて?Twitterクライアントを作ってみよう
dcubeio
?
ルーター自前実装の话
ルーター自前実装の话ルーター自前実装の话
ルーター自前実装の话
Kazushi Kawamura
?
Realm,rx swift,repro を使ってみて
Realm,rx swift,repro を使ってみてRealm,rx swift,repro を使ってみて
Realm,rx swift,repro を使ってみて
Daisuke Nagata
?
Elastic on Azure Integration & Building React UI Based Search App Using Azure...
Elastic on Azure Integration & Building React UI Based Search App Using Azure...Elastic on Azure Integration & Building React UI Based Search App Using Azure...
Elastic on Azure Integration & Building React UI Based Search App Using Azure...
Shotaro Suzuki
?
第12回rest勉強会 これまて?の補足?展望編
第12回rest勉強会 これまて?の補足?展望編第12回rest勉強会 これまて?の補足?展望編
第12回rest勉強会 これまて?の補足?展望編
ksimoji
?
クラスメソッド第4回登壇資料 RxRealm
クラスメソッド第4回登壇資料 RxRealmクラスメソッド第4回登壇資料 RxRealm
クラスメソッド第4回登壇資料 RxRealm
Daisuke Nagata
?

Testing react-native with storybook on web