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 腐らせない

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な... 続きを読む

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でプレビューできるようにした話をご紹介します。 前提... 続きを読む

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株... 続きを読む

Storybook First な開発のススメ

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

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

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 です。これを手作業で作成するとなると、... 続きを読む

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ではこれを「特定のリポジトリ... 続きを読む

storybook-chrome-screenshotとzisuiとStorycapと - Yosuke Kurami - Medium

2019/10/20 18 users Storycap medium reg-suit CLI 引数

Photo by Filiberto Santillán from unsplash.com先日、Storycap というCLIを公開しました。 Storybookの各storyをキャプチャして画像化するだけのツールです。主として、reg-suit のようなツールと組み合わせ、画像回帰テスト環境を構築することを目的としています。 使い方はとてもシンプルで、CLIの引数としてStorybo... 続きを読む

2行でwebpack.config.jsで補完を効かせる方法 - Qiita

2019/08/05 57 users Webpack Qiita TypeScript 補完 前提

まず前提として、webpack.config.jsそのものをTypeScriptで書くことができる。公式ドキュメントにも記載があり、ts化自体は数分で終わる。しかし、このwebpack.config.jsをStoryBookの設定から参照するなど他のツールから読まれるときにTypeScriptだと不都合な場合がある。そのようなときに、この方法を使うと1分もかか... 続きを読む

腐らないUIテストのためのStorybook + Storyshots / #react_kyoto v0.3.0 - Speaker Deck

2019/07/19 42 users まさかり メンション Speaker Deck UIテスト

React.kyoto v0.3.0 ( https://react-kyoto.connpass.com/event/137847/ )でStorybookとStoryshotsを使ったコンポーネントのUIテストについて話しました。 質問・不備・マサカリ等はTwitterにてメンションつけてもらえると嬉しいです。 Twitter: https://twitter.com/shisama_ 続きを読む

[Storybook] UI Component 管理ツールの紹介 ｜ DevelopersIO

2019/04/17 29 users DevelopersIO メジャーバージョン 導入 魅力 提供

はじめに オハコンバンニチハ、モバイルアプリサービス部の清田です。 UIコンポーネント開発ツールの Storybook がメジャーバージョンアップし バージョン5 になりましたー！パチパチ。 今回は、Storybook の魅力と導入についてご紹介できればと思います。 Storybookとは？ Storybookは、UIコンポーネント開発環境を提供... 続きを読む

FOLIOの画像回帰テストの裏側 – Yosuke Kurami – Medium

2018/12/23 41 users Folio medium Yosuke Kurami 通り

これは FOLIO アドベントカレンダー2018 の23日目の記事です。 さて、昨日の@minodiskの記事でも触れられている通り、FOLIOのWebフロントエンドではStorybookを中心に据えた画像回帰テストを実践しています。 この記事では、FOLIOに画像回帰テストを導入するためにやってきた取り組みについて書いていきます。 大まかな... 続きを読む

Storybook による UI & Unit Testing のススメ - Mercari Engineering Blog

2018/12/19 76 users React フロントエ メルカリ フロントエンド構築 ススメ

Mercari Advent Calendar 2018 19 日目です。 担当ははメルカリ JP フロントエンドチームの @nekobato がお送りします。 メルカリ フロントエンドチームでは主に React を利用してフロントエンド構築を行っており、 その中のWeb Rearchitecture では Storybook による UI Testing に取り組んでいます。 今回はフロントエ... 続きを読む

Storybook を自作して「フロントエンドビルドが遅い問題」に立ち向かう - 一休.com Developers Blog

2018/12/10 19 users 遅い問題 一休.com Developers Blog

この記事は一休.comアドベントカレンダー2018の10日目です。 qiita.com こんにちは。レストラン事業部の所澤です。 WEBアプリケーションエンジニアとしてフロント/サーバー問わず機能開発を行っています。 今回は一休.com レストランの旧アプリケーションのフロントエンド開発環境改善についてお話します。 ※ この記事の... 続きを読む

SVGスプライトアイコンの作り方・使い方 - 一休.com Developers Blog

2018/12/02 38 users アドベントカレンダー SVGスプライト qiita.com

この記事は一休.com アドベントカレンダー 2018の2日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でフロントエンドの開発を行っています。 今回は、最近一休.comに導入した、SVGスプライトによるアイコンの作り方・使い方について紹介します。 StorybookのSVGスプライトアイコン一覧 アイコンの一般的な使い方 ア... 続きを読む