Storybook8.1からSubpath importsを使ったモジュールのモックができるように
- import { type GetExamplesResponse, getExamples } from "../../api/example"; + import { type GetExamplesResponse, getExamples } from "#src/api/example"; Node.js が提供する Subpath imports は Vite と Webpack、また TypeScript5.4 でサポートされている。実際に次の環境で試すと、型の補完も効くし、モジュールがモックされた。tsconfig も Vite の config もいじってないのに。 Storybook: 8.1.6 Vite: 5.2.8 TypeScript: 5.4.5 @storybook/testのfnと Story のbeforeEachを使うことで、Jest や Vite
@storybook-test: more streamlined and powerful testing
Storybook is the best way to build and test your UI components in isolation. Storybook 7.6 (now in alpha) takes Storybook's testing even further with the introduction of @storybook/test. It brings a set of new utilities for spying on your components, interacting with them in the browser, and asserting the results. Plus better performance and smaller size. The new hotness@storybook/test consolidate
Storybook をフル活用してテストを実装した話 - Cybozu Inside Out | サイボウズエンジニアのブログ
サムネイル こんにちは、フロリアでエンジニアとして活動している irico です。 現在 kintone ではフロリアというプロジェクトの中で、Closure Tools から React への移行作業に取り組んでいます。 今回は、そのフロリアのチームの 1 つである Reactone チーム が採用した「Storybook をフル活用したテスト手法」についてお話します。 Storybook によるテストアプローチ Storybook の v6.4 から play 関数が導入され、v6.5 から Interaction tests が可能になりました。 これによって Story 上でテストを実行するだけでなく、実行したテストの動作確認がブラウザ上で可能になりました。 今までは Jest や Vitest 上で Testing Library を利用する際、DOM 操作の視覚的な確認が難しく
Storybook 7.0
Storybook is the gold standard UI workshop environment. It’s used across the industry by teams at Monday.com, The Guardian, Intuit, and many others due to its unparalleled framework compatibility and rich features for development, documentation, and testing. Today, I’m excited to announce Storybook 7 (SB7), our first major release in over two years and by far our largest ever. It includes: ⚡ First
Storybook と Chromatic でビジュアルリグレッションテストを実施する - BASEプロダクトチームブログ
Chromatic とは Chromatic とは、Storybook のメンテナーが作成している Storybook 用のツールです。Storybook をビルドして公開したり、ストーリーごとのスクリーンショットを撮影し、差分を比較してくれる機能を備えています。 Chromatic を使うことにより、UI の予期せぬ変更を事前に検知することができます。本記事では Chromatic の導入、活用方法をご紹介します。 なお、BASE 社では社内の UI コンポーネントライブラリである BBQ で Chromatic を導入、活用しています。その経緯はアドベントカレンダー15日目に公開する記事でご紹介します。 Chromatic をプロジェクトに導入する サンプルプロジェクトを作成する 今回は Storybook 公式で用意されているサンプルプロジェクトを利用します。 プロジェクト作成にあた
Storybook 6.3
Storybook is the industry-standard UI development workshop for components and pages. It's used by Dropbox, Shopify, Stripe, and thousands more teams. Developers choose Storybook because it helps them focus on one thing: the user interface. There's already a mountain of complexity in app development, Storybook makes your job simpler by isolating UI concerns from the noise of backend, APIs, and data
N 予備校に Visual Regression Testing を導入した話 + tips - ドワンゴ教育サービス開発者ブログ
こんにちは。N 予備校 Web フロントエンド開発チームの berlysia です。 N 予備校の Web フロントエンド開発に、 Storycap + reg-suit による Visual Regression Testing を導入しました。設定の工夫から、設定中や運用してしばらくの間に実際に発生したハマりどころを挙げ、簡単に注意点や対処例を紹介します。 背景 N予備校について N 予備校はドワンゴが提供するオンライン学習サービスです。大学受験対策、プログラミング、Webデザイン、機械学習など多様なコースがあります。オンラインでの利用に合わせた教材や、講師が生放送で行う授業、受講者同士でも質問し教えあえるフォーラムを備えています。 www.nnn.ed.nico 周辺状況 N 予備校の Web フロントエンド開発とそれを取り巻く状況には、次のような特徴があります。 React による
Storybook 6.2
Storybook is the industry standard UI development workshop for components and pages. It's used by Netflix, Slack, Target, Shopify, Stripe, and thousands of teams around the world. As a modern frontend developer, you’re in a constant cat-and-mouse game to stay on top of ecosystem changes. Every Storybook release contains hundreds of adaptations to try to make that easier for you, whether you’re upg
Storybook公式アドオンをまとめてみた - Qiita
記事のターゲット 基本的に私です Storybookを触ってみたは良いけど公式アドオンの選定に迷っている人 公式アドオン各々の利点がわかっていない人 フロントエンド初心者だけどStorybook知ってそうな雰囲気出してドヤりたい人 Storybook とは UIコンポーネントを分離して開発するためのオープンソースツールで、Web上のサンドボックス環境を提供してくれます。 ローカルホストで立ち上げ、ブラウザ上で細かな動作確認を行えるので細かいコンポーネント単位で開発がしやすくなります。 また、サンドボックスではUIコンポーネントのカタログを検索・閲覧する機能を提供することでUIの再利用性を高めることができます。 ビジネスロジックに寄らないコンポーネント実装やMockingもお手軽なのでAtomicDesignベースの開発では必需品かもしれません。 ただし、サンドボックス環境も開発者の手でコン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - rspack-contrib/storybook-rsbuild: Storybook builder and frameworks powered by Rsbuild.
Storybook 8
Storybookの実力をフル活用するChromatic
Storybook 8 Beta
Lost Pixel - holistic Visual Regression Testing cloud
Storybookを用いてテストの可視化を進めた話 | PR TIMES 開発者ブログ
First-class Vite support in Storybook
GitHub - storybookjs/builder-vite: A builder plugin to run and build Storybooks with Vite
Interactive stories (beta)
GitHub - vitebook/vitebook: Blazing fast alternative to Storybook.
Accessibility testing with Storybook
