Storybookの旨味をしゃぶり尽くす
株式会社FOLIOのメンバーによるアドベントカレンダーです！ FOLIO Advent Calendar 2017: https://qiita.com/advent-calendar/2017/folio-sec… Storybookを取り入れたワークフローで開発を行ったところ、Storybookは単なるスタイルガイドツールではなく、ビジュアル実装のためのインフラであることを実感しました。 三度どころじゃなくおいしいなと感じているので、導入がまだならシュッと導入してしゃぶりつくして欲しいなと思いました。開発がある程度進んでからでも小さく導入できるので、予め考えておく必要のあることはあまり無いと思います。三度おいしいスライドと内容が被っていますが、おいしいものはおいしいので何度でもおいしいことを主張していきたいという思いです。 ストーリーを追加してビジュアルを実装するストーリーを追加してバ
FOLIOの画像回帰テストの裏側 – Yosuke Kurami – Medium
これは FOLIO アドベントカレンダー2018 の23日目の記事です。 さて、昨日の@minodiskの記事でも触れられている通り、FOLIOのWebフロントエンドではStorybookを中心に据えた画像回帰テストを実践しています。 この記事では、FOLIOに画像回帰テストを導入するためにやってきた取り組みについて書いていきます。 大まかなワークフロー画像回帰テストのワークフローを簡単に説明します。 まずは対象となるコンポーネントについてStorybookでStoryを用意します。 StorybookこのStoryからCIで生成されるキャプチャ画像がスナップショットファイルとなります。 さて、仕様変更などによって上記のコンポーネントに変更が生じたとします。
Storybook による UI & Unit Testing のススメ | メルカリエンジニアリング
Mercari Advent Calendar 2018 19 日目です。 担当はメルカリ JP フロントエンドチームの @nekobato がお送りします。 メルカリ フロントエンドチームでは主に React を利用してフロントエンド構築を行っており、 その中のWeb Rearchitecture では Storybook による UI Testing に取り組んでいます。 今回はフロントエンドの UI Testing と Unit Testing を Storybook & Storyshots を利用して行っているという話をします。 Storybook とは Storybook は個別の UI コンポーネントをブラウジングする開発環境を構築するモジュールです。 単独では目視による UI テストを可能にするのみですが、アドオンと組み合わせることで様々なテスト環境を構築することが可能にな
React Storybookを使用したVisual regression testingの導入
全体の流れ まず、今回使用するメインツールであるLOKIとREG-SUITの紹介をします。 次に目指す全体像を共有し、最後にそれを実現するための方法を説明します。 利用技術の説明 LOKI Visualized Testを実施するためにはStorybookのページにアクセスし、キャプチャする仕組みが必要です。 この機能を持ったツールがLOKIです。 上記に Visual Regression Testing for Storybook とある通り、LOKIはリグレッションテストまで実施することのできるツールです。 しかし、以下の理由から差分比較部分は別のツールを使うことにしています。 画像をGitにコミットしなくてはいけない 出力結果が画像のみのため結果が一目で分からない 差分の表示方法が好みではない REG-SUIT CUIでVisual regression testingを実施するツ
Storybookとreg-suitで気軽にはじめるVisual Regression Testing - wadackel.me
約半年前に「Puppeteer を使った Storybook の自動スクリーンショット撮影用のアドオンを作った」という記事を書きました。この時 storybook-chrome-screenshot というアドオンを作って公開した紹介でした。 当初は React のみのサポートだったのですが継続的に手を加えていて、最近 Angular と Vue.js へのサポートが完了したり、機能的にも大分実用的になってきました。 そこで今回は、storybook-chrome-screenshot と reg-viz/reg-suit を使って Visual Regression Testing (視覚回帰テスト) を導入して、ありがたみを感じるところまでを書いていきたいと思います。 だらだら書いていたら思っていたよりも長くなってしまったので、各種ツールのセットアップ だけで充分という方は読み飛ばして
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
Reactのテストを mocha + nyc から Jestにしてみる - Qiita
{ "test": "NODE_ENV=test mocha test/", "coverage": "nyc -c npm test" } /srcにソースディレクトリ /testにテストディレクトリ MISC jsdom-global使って色々小細工していた。 mocha -> jestにするモチベーション 興味本位 Jestがv15.0.0でAutomockingを捨てて本気を出してきたのでちょっと使ってみたかった気持ち Railsプロジェクトにjavascriptプロジェクトを混ぜようとしたとき、mochaのテストディレクトリに悩んでしまうぐらいなら、Jestのテストフでやってみようかと思った jestでは、/srcなどのコードに対して、/src/__tests__というディレクトリを作るか、some.test.jsという名前をつけるのがデフォルト設定になっている。 mochaでも
enzyme+mocha+power-assertでReactコンポーネントのフルレンダリングテスト - wadackel.me
公開されている React コンポーネントのテストコードを見てみると、enzymeを使ってテストしているものを結構見かけます。enzyme はReact 公式でも押しているっぽいので、積極的に使っていきたいです。 Note: Airbnb has released a testing utility called Enzyme, which makes it easy to assert, manipulate, and traverse your React Components’ output. If you’re deciding on a unit testing library, it’s worth checking out: http://airbnb.io/enzyme/ 日本語の紹介記事では@syossan27さんの記事が参考になりました。 React のテストを Enz
Enzyme: JavaScript Testing utilities for React
Testing code is crucial for the maintainability of a complex code base, but it is just as important that tests are easy to write, maintain, and understand. Frontend code is no exception to this rule, and behaviors that live in your UI should be tested as well. Almost three months ago, Airbnb open sourced Enzyme, a JavaScript library for testing React components. Since then, the reception has been
ReactのテストをEnzymeで書いてみよう - Qiita
GithubのExploreを覗いていたら面白そうなテストツールがありました。 https://github.com/airbnb/enzyme Reactに力を入れているというAirbnbが作ったテスティングツールなのですが、ドキュメントがサラッとしか書いてなかったのでお遊びがてら使えるようになるまで触った軌跡を書いてきます。 「んなことより早くブツを見せんかい！！」という猛者JSerな方は以下のリポジトリから何となく意図を汲みとって何となくマサカリを投げてください。 はじめに まずは必要なものをnpmで入れてきましょう。 $ npm install -g mocha $ npm install --save-dev chai $ npm install --save-dev babel-register $ npm install --save-dev enzyme インストールしたも
How we unit test React components using expect-jsx - Algolia Blog
React was designed to solve one problem—how to build applications with data that changes over time. Considering the as-you-type search experience offered by Algolia wherein whole results pages, hits and refinement links alike, are updated at each keystroke, React was the obvious choice when we needed a tool to build out our new library of UI widgets: instantsearch.js. We quickly struggled, however
Test Driven React Tutorial
Testing is an important part of the development cycle. There is a name for code without tests: legacy code. When I first started learning React and JavaScript it was overwhelming to say the least. If you’re new to the JS/React community you’re probably feeling super overwhelmed as well. Thinking things like: Which build tool should I use? Which testing framework is right? What flux pattern should
Day 2: Testing React Applications
In this article we’re going to take a look at how we can test React applications. Typically applications built with a frontend framework are difficult to test; it’s tricky to emulate the actions of your users in testing, despite it being one of the most important things to test. If your tests can’t emulate what a user might do, it’s going to be tricky to have full confidence that your application
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Visual Regression Testing and React Storybook
GitHub - americanexpress/jest-image-snapshot: ✨ Jest matcher for image comparisons. Most commonly used for visual regression testing.
React Redux テスト考察 - Qiita
GitHub - MicheleBertoli/react-fix-it: Automagically generate tests from errors
GitHub - ruanyf/react-testing-demo: A tutorial of testing React components
GitHub - enzymejs/enzyme: JavaScript Testing utilities for React
Testing React Components Using Shallow Rendering