Storybook First な開発のススメ
Storybook first な開発とは Storybook での呼び出され方を意識しながらアプリケーションコードを書くことをそのように呼んでいます。 道具に設計がひきづられるのはアンチパターンと言われそうな気もするのですが、コンポーネントのカタログを整備していくことは、コンポーネントが良い感じに再利用可能な形で分離できるということでもあり、やっていくとむしろ正道に近づいていくと思います。 Storybook First のコンポーネント設計や型定義をすると、パーツに限らず Storybook でカバーできる範囲が広がり、ページそのもののサンドボックスを作れます。 そして API がない状態でもデータを使って開発ができたり、特定のスナップショットの再現やタイムトラベルに近いことも可能になるというメリットがあります。 つまり、ただのコンポーネントカタログとしてではなく、開発のためのサンドボ
React+Cypress+StorybookでVisualRegressionTestする - resqnet's blog
はじめに React＋CypressでVisualRegressionを実現するのにやったこと 環境構築 react/storybook導入 npx create-react-app my-app npx -p @storybook/cli sb init Cypress導入 yarn add cypress @testing-library/cypress -D // 不要なテストを削除 rm -rf cypress/integration/examples Storybookのpreview-iframeを取得 Storybookのiframeを取得する cypress/support/command.js import '@testing-library/cypress/add-commands'; Cypress.Commands.add('getIframeBody', () =
Puppeteer と Coverage の話
アドカレの 1 日目も Puppeteer の話を書いてたのだけど、別にその続きとかではまったくなくて、少し前に Puppeteer のカバレッジ関連でドハマリしたのでそれを書こうと思う。 背景他のところで散々書いてきているので、軽く触れる程度にしておくが、 https://github.com/reg-viz/storycap というツールの開発・メンテをしている。Puppeteer で Storybook をクローリングして各 Story を PNG 画像にする、ただそれだけの CLI だ。 このツールは画像ベースの回帰テストを自動化する目的で作られていて、日々の業務でも reg-suit や reg-cli などのツールと組み合わせて使っており、僕自身も前職の頃から世話になっている CLI だ。 自動テストの一環として Storycap を使っている関係上、Storybook をコン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://x.com/housecor/status/1817567002224996366?s=12&t=WLoQjPOJLfZ0ZJFtTOS7aw
