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 8
Storybook is the industry standard UI tool for building, testing, and documenting components and pages. It’s used by thousands of teams globally, integrates with all major JavaScript frameworks, and combines with most leading design and developer tools. Today, I’m thrilled to announce the release of Storybook 8! This latest version of Storybook brings together 8,865 commits across 773 PRs from 218
Storybook 8 Beta
🚀Update March 12: Storybook 8 is out now!Storybook 8 is now available to try in beta! This latest release continues Storybook’s quest of giving you an instant-on, seamless environment for frontend development. Check out the release highlights and try the beta release today! 🚀 Major performance improvements 🆕 Visual tests workflow 📱 Polished mobile UI 🔬 Improved test utilities ⚛️ React Server
@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
First-class Vite support in Storybook
Vite is a next-gen build tool that has taken the web development world by storm. It gives you fast startup, instant reloads, widespread compatibility, and easy configuration. With nearly GitHub 50k stars, almost 2 million weekly npm downloads, and 650+ contributors, Vite is clearly a “big deal.” Storybook first supported Vite in April 2021 (two months after Vite 2.0 was released) with help from co
Interactive stories (beta)
Building components in isolation allows you to stress test them to find edge cases. With Storybook, you write stories for each of these cases by supplying props to your component. But not all component variations can be reproduced with props alone. Some UI states can only be reached via user interaction like dropdowns, modals, and hidden form elements. In the past, you interacted with the componen
Storybook と Chromatic でビジュアルリグレッションテストを実施する - BASEプロダクトチームブログ
Chromatic とは Chromatic とは、Storybook のメンテナーが作成している Storybook 用のツールです。Storybook をビルドして公開したり、ストーリーごとのスクリーンショットを撮影し、差分を比較してくれる機能を備えています。 Chromatic を使うことにより、UI の予期せぬ変更を事前に検知することができます。本記事では Chromatic の導入、活用方法をご紹介します。 なお、BASE 社では社内の UI コンポーネントライブラリである BBQ で Chromatic を導入、活用しています。その経緯はアドベントカレンダー15日目に公開する記事でご紹介します。 Chromatic をプロジェクトに導入する サンプルプロジェクトを作成する 今回は Storybook 公式で用意されているサンプルプロジェクトを利用します。 プロジェクト作成にあた
Accessibility testing with Storybook
26% of adults in the US have at least one disability. When you improve accessibility, it has an outsized impact on your current and future customers. It’s also a legal requirement. The most accurate way to check accessibility is manually on real devices. But that requires specialized expertise and a lot of time. Both of which are scarce on frontend teams. Teams at Twilio, Adobe and Shopify use a c
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 powered by Rsbuild.
Storybookの実力をフル活用するChromatic
Lost Pixel
Storybookを用いてテストの可視化を進めた話 | PR TIMES 開発者ブログ
GitHub - storybookjs/builder-vite: A builder plugin to run and build Storybooks with Vite
GitHub - vitebook/vitebook: Blazing fast alternative to Storybook.
