フロントエンドテスト、モジュールモックでStorybookのインタラクションテストの開発コストを下げる
Storybook のインタラクションテストのコストを下げる Storybook を使用すると、ブラウザ上で動作を確認しながらテストコードを記述できるため、生の Jest よりも開発が容易になります。ただし、Storybook には Jest にある重要な機能である jest.mock がないという欠点があります。jest.mock は、テスト対象のコンポーネントがインポートしているモジュールをフックして、簡単にモックを作成することができますが、Storybook ではこの機能は使用できません。ビルド時に他のファイルへの干渉が防止されてしまいます。 この問題を解決するために、以下の Addon を使用することで、jest.mock と同じような機能を Storybook 上で利用することができます。 npm サンプルプログラム 動作内容 ログイン用フォームの動作チェック FormMock.
Storybook V5+React+TypeScriptで環境構築 - Qiita
StorybookのV5.0がリリースされました。 Storybook+React+TypeScriptで試してみたので、内容をまとめてみました。 インストールからサンプルのコンポーネント作成と、GitHub Pagesへのデプロイまで記載しています。 まだドキュメントが古いものも多く、試行錯誤しながらでしたが、V4までと比べてTypeScript周りの設定が楽になった気がします。 なお、手順はNode.jsやcreate-react-appはインストール済みの前提です。 ソース デモ 2019/03/09追記 @storybook/addon-consoleを追加 *.stories.jsもストーリの対象に追加 src/stories/*のjsとjsxはストーリ対象とするように修正 withInfoをaddDecoratorで指定するように変更 土台の作成 まず、create-react
Storybook による UI & Unit Testing のススメ | メルカリエンジニアリング
Mercari Advent Calendar 2018 19 日目です。 担当はメルカリ JP フロントエンドチームの @nekobato がお送りします。 メルカリ フロントエンドチームでは主に React を利用してフロントエンド構築を行っており、 その中のWeb Rearchitecture では Storybook による UI Testing に取り組んでいます。 今回はフロントエンドの UI Testing と Unit Testing を Storybook & Storyshots を利用して行っているという話をします。 Storybook とは Storybook は個別の UI コンポーネントをブラウジングする開発環境を構築するモジュールです。 単独では目視による UI テストを可能にするのみですが、アドオンと組み合わせることで様々なテスト環境を構築することが可能にな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
