タグ「StorYBook」 - はてブログ

タグ StorYBook

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 47件)

StorybookとPlaywrightではじめるインタラクションテスト - enechain Tech Blog

2024/12/21 15 users playwright

この記事はenechain Advent Calendar 2024の21日目の記事です🎄 はじめにこんにちは。enechainでソフトウェアエンジニアをしている@nakker1218です。私たちのチームでは、電力の取引仲介を行う同僚(ブローカー)たちが使う、注文の統合管理システムeNgineの開発しています。ブローカーは日々1分1秒を争いながら収益を... 続きを読む

Nx活用術！モノレポ内のStorybookのパス設定自動化 - Findy Tech Blog

2024/12/03 7 users ユーティリティ puku0x リートフロントエンド新福

ファインディ株式会社でフロントエンドのリードをしている新福(@puku0x)です。 Nxはモノレポ管理の便利なユーティリティとして @nx/devkit を提供しています。今回は @nx/devkit を利用したStorybookの設定の自動化についてご紹介します。 Nxについては以前の記事で紹介しておりますので、気になる方は是非ご覧ください... 続きを読む

Storybook との上手な向き合い方を考える

2024/11/23 42 users 向き合い方

JSConf JP 2024 にて登壇した資料です。スピーカーノートはこちら -> ﾏﾀﾞﾅｲﾖ続きを読む

Storybook と Vitest の統合したコンポーネントテスト

2024/10/06 38 users Vitest API テストランナーストーリー将来

Note Storybook Vitest Plugin は 2024 年 10 月 5 日現在実験的な機能として提供されており、API が将来にわたって変更される可能性があります。 Storybook v8.3 より、ストーリーをテストするためのテストランナーとして Vitest を使用できるようになりました。今までも composeStories 関数で作成済みのストーリーを... 続きを読む

Storybook をフル活用してテストを実装したその後の話 - Cybozu Inside Out | サイボウズエンジニアのブログ

2024/08/13 34 users サイボウズエンジニア Cybozu Inside Out

この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend stage) DAY13 の記事です。こんにちは、フロリアでエンジニアとして活動している hacchan です。現在 kintone ではフロリアというプロジェクトの中で、Closure Tools から React への移行作業に取り組んでいます。以前、そのフロリアのチームの 1 つである Reacton... 続きを読む

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ͱ͔Α͘ฉ͘ɻͦΕҎ֎͸…ʁ • ൺֱతมߋ͕... 続きを読む

(1 - 25 / 47件)

次の25件 »