The more your tests resemble the way your software is used, the more confidence they can give you.
こんにちは、CX事業本部 IoT事業部の若槻です。 今回は、JavaScriptのテストフレームワークJestを使用して、ReactアプリケーションのUIテストの自動化をしてみました。 ReactアプリのUIテストをするためには Reactアプリケーションのユーザーインターフェース（UI）のテストを自動化する場合、次のような観点が考えられます。 DOM要素の出力が期待通りであるかのテスト コードの変更前後でDOM要素の出力に差分が発生していないか（又はしているか）のテスト 特に後者のテストは、ある時点の画面のスナップショットを用意したテストとなるため、スナップショットテストと呼びます。 そして、これらいずれのUIテストもJestを使用して自動化が可能です。 やってみた テスト環境の作成 テスト対象となるReactアプリケーションを新規作成します。 $ npx create-react-ap
2022-05-06 更新 「React でコンポーネントテストを書くといいらしい、 React Testing Library や jest でサンプルを参考に書いてみたが 現実どうやってプロダクトコードに合わせていけばいいか分からない」 そういった方が対象となる本を目指しています。 いろいろ調べて実践したものの下記のように感じた方に適しているかもしれません。 - 結局テストで何を担保しようとしているか分からない - React のテストでハマっているか、Jest でハマっているか分からない - モックとかスパイとかアプリケーションとは遠い出来事も多くてピンとこない 誤り・ご指摘あればフィードバックいただけると嬉しいです。 無料で配布していますが、気に入ったらサポートなどいただけると今後もこの本をアップデートし拡張していく気持ちになれるのでよろしくお願いします。
Mercari Advent Calendar 2018 19 日目です。 担当はメルカリ JP フロントエンドチームの @nekobato がお送りします。 メルカリ フロントエンドチームでは主に React を利用してフロントエンド構築を行っており、 その中のWeb Rearchitecture では Storybook による UI Testing に取り組んでいます。 今回はフロントエンドの UI Testing と Unit Testing を Storybook & Storyshots を利用して行っているという話をします。 Storybook とは Storybook は個別の UI コンポーネントをブラウジングする開発環境を構築するモジュールです。 単独では目視による UI テストを可能にするのみですが、アドオンと組み合わせることで様々なテスト環境を構築することが可能にな
パフォーマンス改善ハンドブック ウェブページにおけるパフォーマンスに関する問題の見つけ方や考え方の事例をまとめた Webフロントエンド パフォーマンス改善ハンドブックを公開しました。 URL: https://dwango-js.github.io/performance-handbook/ このハンドブックでは過去に行ったWebフロントエンドのパフォーマンス改善の事例を中心に紹介しています。 注意点としてWebフロントエンドは常に変化しているため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを用い、映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのWebフロントエンドを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれていま
（訳者注: これは、JavaScript Stack from Scratchを翻訳し、まとめて読めるように1ファイルにしたものです。元の翻訳と各種ファイルについては、日本語訳forkリポジトリを参照してください。また、原文が活発に更新されているため、訳文も追従して更新されます。ご了承ください。） ゼロから始めるJavaScript生活 モダンJavaScriptスタックチュートリアル、ゼロから始めるJavaScript生活へようこそ。 ⚠️️ このチュートリアルのメジャーアップデート版を3月初旬に公開する予定です。ご期待下さい! より詳しく(英語). これはJavaScriptスタックを使い始めるための最短最速のガイドです。このガイドは一般的なプログラミングの知識とJavaScriptの基礎を前提としています。これら全てのツールを一緒につなぎ合わせることにフォーカスしており、各ツールにつ
これは何 JSer.info 5周年記念イベント - connpass (2016/01/16) にて発表した資料。特に理由はないが公開するのを忘れていた。 スライドモードのリリースにあたって公開する 近況(2016/01/16) 昨年9月 Kobito for Windows => Qiita開発チーム モダンなJS(当社比)を導入しようとした モダンなJSとは(mizchi主観2016版) npm/browserifyで依存を解決 Babel/ES2015 React/Flux Testable No More jQuery plugins ※これらの基準について今回は割愛 現実(2015) CoffeeScript Sprockets / グローバル名前空間渡し Backbone JSのテストはjasmineで数件 (※request specは豊富) jQuery plugins
最小限の設定のTDD手法を使い、「何をテストすべきか？」から、よくある落とし穴の避け方まで、Reactコンポーネントをテストする方法を学びましょう。 導入 まず、 React を触ったことがあり、更にはいくつかのテストも書いた経験があるとしましょう。それでも、コンポーネントをどうテストするのが最善なのか、よく分からないかもしれません。どこから始めるのでしょう。具体的には何をテストすればよいのでしょうか。 いくつかのReactコンポーネントは簡潔過ぎて、そもそもテストが必要なのかすらはっきりしません。 AngularからReactに乗り換えた 人なら、テストには愛憎のような思いがあるかもしれません。 確かに Angular にはテストを支援するツールがたくさんありますが、同時にテストを書くのが難しくなる可能性があります。冗長ながら省略できない定型コードが多々ある上、 $digest の呼び出
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く