Storybook Test ruuner で安定した Visual Regression Testing を行う
はじめに 株式会社ナレッジワーク Engineering Division のわだまる（@wadackel）です。 ナレッジワークの Web フロントエンド開発では、Storybook を活用したコンポーネント開発を行っています。そして、昨年末により良いコンポーネント開発の基盤整備を進めるべく @storybook/test-runner（以降 Storybook Test ruuner）を導入しました。導入目的としては主に、各 Story に対するスモークテスト、play 関数を活用したコンポーネントテストを行うことです。 さらに、ナレッジワークでは前述した通常のコンポーネントテストに加えて、reg-suit と storycap を利用した Visual Regression Testing（以降 VRT）を行っています。 これまでは Storybook を活用したテストは VRT の
Webフロントエンドのための実践「テスト」手法 CodeZine Night #1
CodeZine編集部主催のウェビナー「CodeZine Night」の第一回発表資料 https://codezine.connpass.com/event/279012
Improved type safety in Storybook 7
Writing in TypeScript makes you more productive and your code more robust. You get type check warnings, autocomplete, and Storybook infers types to generate an ArgsTable automatically. It also helps detect bugs and edge cases while coding. Storybook has provided built-in zero config TypeScript support since 6.0. That gives a great autocomplete experience, but sadly it didn’t warn you about missing
Component Story Format 3 is here
Stories visualize how a component behaves in different scenarios. Component Story Format (CSF) is the universal file format for stories. Component Story Format 3 marks an evolution in stories that trims boilerplate code and improves ergonomics. This makes stories more concise and faster to write. I'm excited to announce the full release of CSF3. During the 18 month beta period, the community helpe
Storybookのテストランナー
はじめに Storybook test runner turns all of your stories into executable tests. https://github.com/storybookjs/test-runner Storybookの全てのStoryをテスト可能にする@storybook/test-runnerについてのメモ。 Storybookの公式ドキュメントではv6.5からテストランナーについてのページが設けられている。 何をテストするものか テスト対象についてはplay関数の有無によって異なる。 For those without a play function: it verifies whether the story renders without any errors. For those with a play function: it also
Storybook for full-stack developers
Full-stack developers are responsible for everything from writing CSS to wiring up databases. This involves a lot of context-switching and dealing with side-effects from different parts of the stack, which can end up slowing you down. Storybook helps developers focus on the UI layer of the stack. It runs alongside your app and provides a sandboxed environment for visualizing, developing and testin
Storybook × MSW × Chromaticを使ったUIの影響範囲を自動検知するための取り組み - ZOZO TECH BLOG
こんにちは、FAANS部の田中です。普段は、WebのフロントエンドエンジニアとしてFAANSの開発を行なっています。 FAANSの由来は「Fashion Advisors are Neighbors」で、「ショップスタッフの効率的な販売をサポートするショップスタッフ専用ツール」です。現在正式リリースに向けて、WEARと連携したコーディネート投稿機能やその成果を確認できる機能など開発中です。プラットフォームとしてはWeb、iOS、Androidが存在し、今回取り上げるWebはショップ店長をはじめとした管理者向けツールという立ち位置です。 本記事では、FAANSのWebにおけるStorybook × MSW × Chromaticを使ったUIの影響範囲を自動検知するための取り組みを紹介します。 はじめに FAANSのWebはReact、TypeScriptで構成されています。設計に関しては、ロ
Storybook 駆動開発 @ CSF3.0
Storybook CSF3.0 の概要 単体テスト・結合テスト・Storybook を充実させるためには、多くの工数が必要です。堅牢なフロントエンド開発のためとはいえ、これらのメンテナンスは日に日に負担が増しています。似かよったテストケースでは、同じような下作業をそれぞれに用意する必要がありました。 Component Story Format（CSF）は、この課題への取り組みとして開発されました。「様々なソリューションで再利用可能な資材」 が用意できれば、開発は素早く・より楽しいものになります。リリース間近の CSF3.0 はより一層、そのゴールを明確に示してくれています。 testing-library で Story にインタラクションを CSF3.0 新機能の中で際立っているものが play 関数 です。@testing-library/user-eventを利用すると、Stor
Next.js アプリケーションの共通コンポーネント開発 - クックパッド開発者ブログ
こんにちは。レシピサービス開発部のkaorun343です。クックパッドではスマートフォン向けページにおける開発者体験向上のために、レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話にて紹介したとおり、Next.jsとGraphQLを用いたモダンな環境へと移行を進めています。例えばモバイル端末からのアクセスでURLがトップページの / であれば Rails、レシピ詳細ページの /recipe/:id であれば Next.js アプリにルーティングされるようになっています。現在ではレシピ詳細ページだけではなく検索結果ページやつくれぽ詳細ページ、MYフォルダページなどもNext.jsアプリケーションに置き換わっています。今回はその移行により生じた課題と取り組み方、それから併せて実施したモノレポ環境整備について紹介します。 共通コンポーネントの導入背
ぼくたちがかんがえたさいきょうのStorybook 〜より高品質なコンポーネントを求めて〜
この記事は、Money Forward Engineering 2 Advent Calendar 2022の20日目の投稿です。 21日目の記事は、Taiga KIYOKAWAさんによる『react-i18next で日本語の改行箇所を制御したい時は、設定で wbr タグを使えるようにしよう』でした。 本日は、マネーフォワードに入社して3ヶ月目の私が、「コンポーネントを高品質に保つためのStorybook運用」というテーマで、記事を書いていきます👊 背景 私が開発に携わっているプロジェクトでは、マネーフォワードクラウドにある複数のプロダクトを横断して利用される機能を開発しており、その機能をマイクロフロントエンドとしてプロダクト側に提供しています。 より詳しく知りたい方は、Money Forward Engineering 1 Advent Calendar 2022の14日目に投稿され
Storybook 7.0 beta
Our mission is to improve the UX of the internet. So far, we’ve made a lot of progress. Teams around the world use Storybook to power their frontend workflows. Microsoft documents their universal design system, Fluent. Firefox develops pages for their web apps in isolation. While BBC automates testing for their component library across dozens of international locales. I’m excited to share an early
Storybook on-demand architecture
As the number of stories grows, it gets trickier to load them all in a performant way. That ends up bogging down the developer experience. We use Storybook to build Storybook so we also feel that pain. In recent releases, performance has become a top priority. The latest versions include incremental yet noticeable improvements in build time and bundle size. I am excited to share Storybook's new on
Storybook Performance: Vite vs Webpack
Storybook is the industry-standard UI component workshop. Thousands of application and design system teams worldwide spend most of their day working inside Storybook—building, documenting, and testing their UI components. Therefore, Storybook needs to run as fast as possible, so it does not slow down their workflow. Storybook's performance when first booting up or rebuilding a changed file largely
Figma上でStorybookを操作できるようにしてデザイナーとのコミュニケーションを加速させる 構想編 - Goodpatch Tech Blog
こんにちは！今年こそは打ち上げ花火を見たいフロントエンドエンジニアの鈴木（@zookeeper08）です 💁♂️ Goodpatchではデザイナーとエンジニアが密に連携しデザイン・開発を行うことが多くあります。密に連携するからこそコミュニケーションの部分で互いに疲弊しない仕組みや工夫が求められます。この記事では最近感じている課題感とそれらを解決するような仕組みを考えてみた！というような内容です。実際にプロジェクトで実施したわけではなく、あくまで構想段階ですがせっかくなのでブログにしてみました！ エンジニアがよしなに作ったその後 成果物 デザイナーからの感想 Storybook 直接みたらええやんについて どうやってやったか Storybook Connect という選択肢 Gist というプラグインを知る 最後に エンジニアがよしなに作ったその後 デザインファイルを完璧にすることは不可
共通コンポーネントのテスト実装方法にあえてVRTを選択した話 / why do we choose VRT for testing shared components
Vue Fes Japan 2022 の発表内容です https://vuefes.jp/2022/sessions/KushibikiMashu ■ 概要 社内のコンポーネントライブラリに対してStorybookとChromaticでビジュアルリグレッションテストを導入して、見た目のデグレを防止している話をします。 ■ 詳細 Chromaticとは、Storybookのメンテナーが作成しているStorybook用のツールです。 ストーリーごとのスクリーンショットを撮影し、差分を画像で比較してくれる機能を備えています。 以下の課題を解決することを目的にして Chromatic を導入しました。 既存のコンポーネントを改修した際に発生する DOM、CSS に起因する表示崩れを自動で検知できないこと 依存モジュールのバージョンアップに時間がかかること その結果、両方の課題を解決できた上に作業が
今さら聞けないビジュアルリグレッションテストをChromaticで始める - Sansan Tech Blog
Bill One Entry*1グループの秋山です。 1. はじめに 2010年代前半に登場したReactやVue.jsに代表される宣言的UI実装は、大規模なSPAの構築を可能にしました。その一方、フロントエンド領域に新たなアーキテクチャが導入されたことで、それまでWebアプリケーション開発で定石とされたテスト手法を適用しづらいケースが増え、新たなベストプラクティスが求められるようになりました。 その要請に応える形で、2010年代後半にはフロントエンドのテスト手法に緩やかなパラダイムシフトがありました。この記事ではそのパラダイムシフトを振り返りながら、フロントエンドで必要なテストについて考察し、最後にChromaticを用いたビジュアルリグレッションテストを紹介します。 2. Testing Pyramid と フロントエンド テストを語る際によく持ち出されるメタファとして、Testing
ビジュアルリグレッションテストにChromaticを導入したらデザインレビューが捗った話 - Money Forward Developers Blog
マネーフォワード関西開発拠点エンジニアの @uenoY4 です。 現在、私のチームではフロントエンドに Next.js を使用したプロダクトの開発をしています。 その中でリファクタリングなど既存実装に修正を加えた際に、意図しないUIの崩れが起きることを防ぎたいという思いから、ビジュアルリグレッションテストを行うようにしました。今回はビジュアルリグレッションテストを行うために導入したChromaticについてお話しします。 目次 ビジュアルリグレッションテストとは Chromaticとは Chromatic導入のきっかけ 実際導入してみて まとめ ビジュアルリグレッションテストとは ビジュアルリグレッションテストとは、ページの見た目をテストする仕組みで、変更前のページやコンポーネントの画像と変更後の画像を比較して検証を行います。要素のサイズや配置などのピクセルレベルの変更やテキスト色、背景色
日経の新媒体における、既存資産を活かすフロントエンド技術選定 — HACK The Nikkei
こんにちは、Web チームの井手です。 この度 NIKKEI Professional Media（通称 Promedia） という新媒体をリリースしました。各トピックに特化したメディアで、現在は 日経モビリティ、日経GX、日経テックフォーサイトが展開されています。 これまで日経 Web チームでは特定のFWを利用せず、長年JSXをテンプレートエンジンとした独自FWを開発して、モノレポとして運用していました。これはチューニングの余地を自分で確保することや、自分たちのチームにあった規約を作りやすくするための選択です。しかし Promedia の開発は電子版本体のリリースサイクルと外れるためにモノレポの中に入れたくないことや、長年の開発の負債を引き継ぎたくないこと、なによりNextJSエコシステムの発達によって僕たちの要求をカバーできつつあることから、試験的にNextJSを採用して開発してみま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Component testing in Storybook
StorybookのUI Testing Handbookを読んだ
