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 操作の視覚的な確認が難しく
TypeScript + Storybook CSF3.0の書き方とユニットテストへの応用
概要 Storybook6.4からデフォルトでCSF3の書き方が使えるようになったので、自分なりに調べたことをまとめてみました。TypeScript + Reactで説明します。 公式の記事はこちら この記事の内容は以下のとおりです。 CSF2からCSF3の変更点 CSFの既知の問題と公式の対応状況 インタラクティブストーリーの書き方 CSF3で書いたストーリーをユニットテストに応用する方法 この記事の説明で使うコンポーネント 名前を入力してSubmitボタンを押すと、ボタンを押した時の入力テキストを下に表示するコンポーネントです。 import { VFC, useState } from 'react' export type Props = { title: string } const SimpleFrom: VFC<Props> = ({ title }) => { const
Storybook × MSW × Chromaticを使ったUIの影響範囲を自動検知するための取り組み - ZOZO TECH BLOG
こんにちは、FAANS部の田中です。普段は、WebのフロントエンドエンジニアとしてFAANSの開発を行なっています。 FAANSの由来は「Fashion Advisors are Neighbors」で、「ショップスタッフの効率的な販売をサポートするショップスタッフ専用ツール」です。現在正式リリースに向けて、WEARと連携したコーディネート投稿機能やその成果を確認できる機能など開発中です。プラットフォームとしてはWeb、iOS、Androidが存在し、今回取り上げるWebはショップ店長をはじめとした管理者向けツールという立ち位置です。 本記事では、FAANSのWebにおけるStorybook × MSW × Chromaticを使ったUIの影響範囲を自動検知するための取り組みを紹介します。 はじめに FAANSのWebはReact、TypeScriptで構成されています。設計に関しては、ロ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Storybook CSF3.0 時代のテストに備える