Storybookの実力をフル活用するChromatic

2024/02/21 60 users Chromatic 実力

ビジュアルリグレッションテストツール４選！ユーザーが語る各ツールのメリット https://trident-qa.connpass.com/event/308664/ X https://twitter.com/__sakito__ 続きを読む

GitHub Actions のみで、actions/cache も使わない最軽量の VRT

2023/12/24 57 users アプリケーショ Actions VRT Cache デプロイ先

Web アプリケーション開発での VRT 導入は、ちゃんと運用するとなると以下のような多くの検討事項を伴います。 Storybook のストーリーベースで比較するか？それとも実アプリケーションの URL ベースで比較するか？ CI 上でアプリケーションをビルドして dev server を立ち上げるか、それともデプロイ先のアプリケーショ... 続きを読む

Storybook v8 の React Server Components サポート

2023/12/09 7 users React Server Components 動作

Storybook v8 の React Server Components サポート 2023.12.09 Storybook v8 では `experimentalNextRSC` オプションにより React Server Components をサポートしています。しかし、このオプションは React Server Components としての動作を再現しているわけではありません。サーバーサイドで Storybook が動作してる... 続きを読む

Storybook 腐らせない

2023/12/09 33 users コンポーネント 単体 アプリケーション ツール 現代

この記事は 株式会社ゆめみの23卒 Advent Calendar 2023 8日目の記事です。 現代のWebフロントエンド開発において、コンポーネントの効率的な管理と可視化が求められる中、Storybookは開発者にとって欠かせないツールとなっています。Storybookは、コンポーネントをアプリケーションから隔離して単体で表示できるツール... 続きを読む

Storybookを書くだけでリグレッションテストが 実行される世界へようこそ

2023/10/21 122 users リグレッションテスト 世界

Shizuoka.js #7 続きを読む

いまNext.jsで新規サービスを立ち上げるときの観点（Router・CSS・認証・監視など/2023年末）

2023/10/20 326 users 観点 Next.js 新規サービス PoC Jest

免責事項 社内向けに展開するように雑にまとめました Next.jsの知見が深くない人がリードしてPoCを立ち上げなきゃいけなくなったが、社内的にはNext.jsを推奨しているみたいな場面を想定しています なので自信ないところも多いですが割と断言するように心がけて書いています PoCの立ち上げ想定なので、jest/Storybookな... 続きを読む

GraphQL のレスポンスのモックデータの作成を補助する TypeScript ライブラリを作った - mizdra's blog

2023/09/28 8 users GraphQL レスポンス リグレッションテスト story

GraphQL を使って Web アプリケーションを実装していると、GraphQL API のリクエストをモックしたいことがあると思います。 ユニットテストのために、ダミーレスポンスに差し替えたい ビジュアルリグレッションテストのために、ダミーレスポンスに差し替えたい Storybook で story を書くために、ダミーレスポンスに差し... 続きを読む

Storybookを用いてテストの可視化を進めた話 | PR TIMES 開発者ブログ

2023/05/02 13 users 視覚 現象 PR TIMES テスト 可視化

それに伴い他のメンバーが書いたテストを修正する機会が増えたのですが、修正が難しい場合には一時的にtest.todoとしたり、テストを書いた人に修正を依頼するなどの現象が発生していました。 テストの修正が難しい一因として、testing-libraryが行った画面操作を視覚で確認できないことがありました。そこで昨年導入した... 続きを読む

[Next.js]フロントテストのコストはStorybookで削減出来る

2023/02/14 79 users 出力 フロントエンド Next.js テスト コスト

１．フロントテストと Storybook の活用 フロントテストのどこにコストがかかるのか バックエンドのテストはシンプルな入力と出力が多いので、テスト作成は比較的簡単です。一方、フロントエンドのテストは UI イベントや動的な要素も含まれ、複数の出力があるため、テスト作成はより複雑になります。これにより、テスト... 続きを読む

「SmartHRのペーパーレス年末調整」のアンケート画面の文言をmicroCMSで管理して、Storybookでプレビューできるようにした話 - SmartHR Tech Blog

2022/12/19 11 users SmartHR diescake microCMS 文言 前提

この記事はSmartHR Advent Calendar 2022の19日目です。 こんにちは！ SmartHRのプロダクトエンジニアの@diescakeです！ この記事では、SmartHRが提供している「ペーパーレス年末調整（以降、年末調整機能）」のアンケート画面の文言をmicroCMSで管理してStorybookでプレビューできるようにした話をご紹介します。 前提... 続きを読む

共通コンポーネントのテスト実装方法にあえてVRTを選択した話 / why do we choose VRT for testing shared components

2022/10/16 5 users VRT Chromatic リグレッションテスト ネンド 概要

共通コンポーネントのテスト実装方法にあえてVRTを選択した話 / why do we choose VRT for testing shared components Vue Fes Japan 2022 の発表内容です https://vuefes.jp/2022/sessions/KushibikiMashu ■ 概要 社内のコンポーネントライブラリに対してStorybookとChromaticでビジュアルリグレッションテストを導入し... 続きを読む

Vue 向けの Vite 製の UI コンポーネントカタログツール Histoire

2022/06/06 6 users vite Vitest Vue story コンポーネント

Histoire はフランス語で「Story」という意味の単語であり、Storybook のように UI コンポーネントのカタログを作成するツールです。 Histoire は以下のような特徴を謳っています。 Vite にネイティブ対応 Histoire は Vite 向けのツールであるので、vite.config.ts の設定を再利用できます。このあたりの特徴は Vitest ... 続きを読む

Reactアプリケーションのテスト戦略

2022/06/03 257 users Reactアプリケーション テスト戦略 フロントエンド 種類

Reactアプリケーションのテスト戦略について ・フロントエンドのテストの種類 ・トレードオフ ・所属しているチーム / プロダクトの状況 ・テスト戦略 ・Storybookを使ったこれからのテストへ 続きを読む

storybook-addon-next Addon | Storybook

2022/01/24 12 users

A no config Storybook addon that makes Next.js features just work in Storybook Storybook Addon Next 😱 No config support for Next.js: Tired of writing and debugging webpack config? What Next.js supports out of the box, this addon makes possible in Storybook Table of Contents Supported Features Re... 続きを読む

StorybookのUI Testing Handbookを読んだ

2022/01/19 15 users yama vol.5

Transcript Storybook ͷ UI Testing Handbook ΛಡΜͩ 2022-01-19 ϑϩϯτΤϯυLTձ - vol.5ɹ#frontendlt ࣗݾ঺հ Shingo Yamazaki • גࣜձࣾϩάϥε • ࡢ೥9݄͔Β University of the People Ͱ 
 ίϯϐϡʔλʔαΠΤϯεษڧத zaki-yama zaki___yama ͸͡Ίʹ ϑϩϯτΤϯυͷςετʹର͢Δ೰Έ • ϑϩϯτΤϯυͷςετɺԿΛͲ͜·Ͱॻ͍ͨΒ͍͍΋ͷ͔… • Ͳ͏͍͏؍఺ͰςετΛॻ͍ͨΒ͍͍ͷ͔ • ࠷ۙ͸Visual Regression Testingͱ͔Α͘ฉ͘ɻͦΕҎ֎͸…ʁ • ൺֱతมߋ͕... 続きを読む

TypeScript Compiler API で Storybook を置換した話とその次の話

2021/11/10 11 users TypeScript Compiler API パンダ 所属

Transcript 1 © 2012-2021 BASE, Inc. TypeScript Compiler API で Storybook を置換した話と その次の話 TECH STAND #6 TypeScript プログラミングをするパンダ （@Panda_Program） 2 © 2012-2021 BASE, Inc. 自己紹介 3 © 2012-2021 BASE, Inc. 自己紹介 プログラミングをするパンダ（@Panda_Program） 所属 　BASE株... 続きを読む

Angular+Storybookで画像回帰テストを小さくはじめる - Classi開発者ブログ

2021/09/09 5 users classi angular lacolaco パク 見た目

Classiのフロントエンドエキスパートチームのlacolacoです。最近AngularのプロジェクトでStorybookをベースにしたUIコンポーネントの画像回帰テストをはじめたので、この記事ではそのなかで学んだことを共有します。 画像回帰テスト 画像回帰テスト（visual regression testing）は、UIの見た目のバグを防ぐためのテスト... 続きを読む

Vue2 + Storybook v5 のコンポーネントを v6 向けに書き換える - BASEプロダクトチームブログ

2021/06/15 8 users コンポーネント Vue2 BASEプロダクトチームブログ

BASE株式会社 Owners Experience Frontend チームのパンダ（@Panda_Program）です。 BASE では BASE の UI を構築するための社内コンポーネントライブラリ「BBQ」を使ってフロントエンドの開発をしています。 BBQ は Vue2 + Storybook v5 で作成されています。現在、フロントエンドの有志たちで Storybook のバージョン... 続きを読む

Storybook First な開発のススメ

2021/03/05 22 users 開発 アプリケーションコード コンポーネント アンチパターン

Storybook first な開発とは Storybook での呼び出され方を意識しながらアプリケーションコードを書くことをそのように呼んでいます。 道具に設計がひきづられるのはアンチパターンと言われそうな気もするのですが、コンポーネントのカタログを整備していくことは、コンポーネントが良い感じに再利用可能な形で分離でき... 続きを読む

デザイナーとエンジニアの協業を加速させる！スタイルガイド作成ツール「Storybook」の紹介

2021/02/17 6 users 協業 エンジニア デザイナー 紹介

ReactやVue.jsなどのライブラリ/フレームワークが普及し、コンポーネント単位でUIを設計・実装するフロントエンド開発が一般的になってきました。しかし、コンポーネント単位での開発には様々な悩みポイントがあります。 コンポーネントには、単純に見た目の情報だけを持っているものもあれば、それぞれが状態を持ってい... 続きを読む

Component 実装と文化を支える自動化ツール | リクルートテクノロジーズ　メンバーズブログ

2020/12/15 13 users component reg-suit 吉井 実装 ゴミ

こんにちは！アプリケーションソリューショングループ（以下、ASG）の吉井です。本記事は Recruit Engineers Advent Calendar 2020「15 日目」の記事です。 Stories as Test ASG では、Storybook / reg-suit を用いたビジュアルリグレッションテストを推進しています。Component テストを兼ねた .stories ファイルのコミ... 続きを読む

hygen で生成 - 対話形式の Component 雛形 -

2020/10/18 13 users component module test 雛形 一度

Component 作成にあたり、storybook や test も一度にコミットする場面が増えてきました。そして CSS Modules や、特定 Component 専用の custom hooks など、一つの Component を構成するファイル群はそれなりの量になってきます。例えば、以下の様な module 構成の Component です。これを手作業で作成するとなると、... 続きを読む

BFF、Storybook、TypeScript、App Center、Sentry――Web開発者によるReact Native開発、運用のポイント：Webフロントエンドエンジニアだけでスマホアプリ開発（3） - ＠IT

2020/10/13 6 users Sentry BFF TypeScript Airシフト 運用

Webフロントエンドエンジニアだけでスマホアプリ開発（3）：BFF、Storybook、TypeScript、App Center、Sentry――Web開発者によるReact Native開発、運用のポイント リクルートテクノロジーズが開発している、B2Bのスマホアプリ『Airシフト メッセージ用アプリ』。Webフロントエンドエンジニアだけで行っている開発の裏側... 続きを読む

Storybook v5 を TypeScript × React 環境に導入する | blog.kwst.site

2020/01/19 10 users React TypeScript GatsbyJS 通常 環境

Storybook v5 を TypeScript × React 環境に導入するJuly 29, 2019 以前、GatsbyJS × TypeScript製のサイトにStorybookを導入する ではGatsbyJSの環境でセットアップしました。今回は通常のTypeScript × React環境にStorybookをセットアップしたいと思います。 React環境でStorybookをインストールする Storybook for Re... 続きを読む

Github Actions で Storybook をお手軽に共有するやつ作ってみた - BASE開発チームブログ

2019/12/08 20 users リポジトリ base 右京 GitHub Actions 実装

この記事はBASE Advent Calendar 2019の8日目の記事です。 devblog.thebase.in エンジニアの右京です！ みなさん！Storybook は使っていますか？BASE ではUIコンポーネントの社内展開はもちろん、日々の業務の中でもサンプルの実装を共有したりするために Storybook が使われています。BASEではこれを「特定のリポジトリ... 続きを読む