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 インストールしたも
mocha + enzyme で React Native コンポーネントをテストする - Qiita
React Native 開発でも mocha を使う理由 React Native ではテスティングフレームワークとして Jest が推奨されていますが、 Jest は Jasmine 系の API を受け継いでいることもあり、 mocha に比べると習熟が難しいことが難点です。 API を覚えるまでは expect に続けてどういった条件を書けるんだっけ、とリファレンスをあさる必要が出てきます。 こういったことを覚えずにすむ mocha は非常にコストパフォーマンスのよい技術です。単純に assert で満たすべき条件を羅列してやるだけでテストが書けます。テスト駆動開発で有名な @t_wada 和田卓人さんは No API is the best API とおっしゃっています。 ちなみに react-native init 時の Jest インストールは設定で抑制できます。 React
ReactでTDD（テスト駆動開発）を始めよう : 環境構築からテスト作成、機能実装までの詳解ガイド | POSTD
最小限の設定のTDD手法を使い、「何をテストすべきか？」から、よくある落とし穴の避け方まで、Reactコンポーネントをテストする方法を学びましょう。 導入 まず、 React を触ったことがあり、更にはいくつかのテストも書いた経験があるとしましょう。それでも、コンポーネントをどうテストするのが最善なのか、よく分からないかもしれません。どこから始めるのでしょう。具体的には何をテストすればよいのでしょうか。 いくつかのReactコンポーネントは簡潔過ぎて、そもそもテストが必要なのかすらはっきりしません。 AngularからReactに乗り換えた 人なら、テストには愛憎のような思いがあるかもしれません。 確かに Angular にはテストを支援するツールがたくさんありますが、同時にテストを書くのが難しくなる可能性があります。冗長ながら省略できない定型コードが多々ある上、 $digest の呼び出
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
JavaScriptテスト自動化キホンのキ - Qiita
if(add(1, 2) == 3) { console.log("テスト結果OK"); } else { console.log("テスト結果NG"); } のように、ひたすら泥臭いコードを書くハメになる可能性があります。（これは極端な例ですが） また、このままではテスト実行後の結果がとても分かり辛いです。 どんなテストに成功したのか/失敗したのか、全体でどれだけテストがあって、どれだけパスしたのか。 はたまた失敗した場合に、どんな部分がNGだったのか。 これらを解決するためにあるのが、テストフレームワークと呼ばれるものです。 Javaで言えばJUnit、RubyではRSpec、PHPではPHPUnitやPHPSpecなどが該当します。 こういったテストフレームワークを使うことで、テストを簡潔に分かりやすく書けるようになります。 また、こんな感じでテスト結果も見やすく出力してくれます。
スナップショットテスト · Jest
スナップショットのテストはUI が予期せず変更されていないかを確かめるのに非常に有用なツールです。 典型的なスナップショットテストでは、UIコンポーネントをレンダリングし、スナップショットを撮り、テストと一緒に保管されているスナップショットファイルと比較します。 2つのスナップショットが一致しない場合テストは失敗します: 予期されない変更があったか、参照するスナップショットが新しいバージョンのUIコンポーネントに更新される必要があるかのどちらかです。 Jestにおけるスナップショットテスト React コンポーネントをテストする場合にも、同様のアプローチをとることができます。 アプリケーション全体の構築が必要となるグラフィカルなUIをレンダリングする代わりに、シリアライズ可能なReactツリーの値を素早く生成するテスト用レンダラーを利用できます。 Consider this exampl
スナップショットテストのすゝめ - Qiita
変更履歴 2018/6/1 jest@23について追記 はじめに 勉強会で使ったスライドをそのまま公開したものです TDDとかする時にスナップショットテストするといいよ、という話 前置き ユニットテスト書いてますか？ TDDで常にメンテ 危なそうなとこだけ書く 男は黙って手動テスト テストコードはコストが高い？ テストコードを書く工数が確保できない -> テストコードのメンテが面倒 -> テストコードはコストが高い？ テストコードを書く工数が確保できない -> テストフェーズの工数を前借りする テストコードのメンテが面倒 -> メンテを普段の開発フローに組み込む （テストコード実装 + テスト実行時間） < （コンパイル/起動時間 + 手動テストの工数）のとき、テストコードを書いた方が生産性が高い +テストコードがあるとCIでリグレッションテストとして使える TDD テスト駆動開発 失敗す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CODEPREP | JavaScriptで学ぶユニットテスト