はじめに フロントエンドのテスト手法の 1 つに Visual Regression Testing（以下、VRT）があります。 これは、アプリケーションの画面を画像として保存し、画像の差分比較をすることで意図せぬ変更が生じていないかテストする方法です。 ここ数年で広く普及し、用語としても一般的になったように思います。 私も以前、とある OSS に reg-suit & Storycap を使った VRT を導入したことがあるのですが、その後もいくつか VRT のためのライブラリが登場したもののキャッチアップできていませんでした。 そこで今回は知識のアップデートを目的として、ここ最近登場した（と思われる）VRT のライブラリをいくつかご紹介します。 なお、今回紹介するツールはすべてこちらのリポジトリで試しています。 具体的な設定ファイルや動作結果を確認できるようになっていますので、ご興味が

2021/7/28, Retty ✕ Mercari Analyst Talk Night! https://mercari.connpass.com/event/218848/

こんにちは、Analytics Infra チームの @yaginuuun です。主にA/Bテスト周りの改善や Recommendation 関連の分析を担当しています。 当ブログは 2021/07/28 に開催された Retty ✕ Mercari Analyst Talk Night! におけるLT内容を改めて少し補足を加えながらブログの形に書き起こしたものです。 当日の資料はこちらです。 A/Bテストとは A/Bテストは Randomized Controlled Trial (RCT) とも呼ばれる効果検証手法です。最も単純な例をあげると、二つの群を用意し片方の群にのみ何かの変更を加えることでその変更による数値変動を評価します。 A/Bテスト自体は医学や農業の分野など幅広く行われています。特に医学の領域においては Level of Evidence という考え方があるようですが、A

2021年度・2022年度 リクルート エンジニアコース新人研修の講義資料です

Bill One Entry*1グループの秋山です。 1. はじめに 2010年代前半に登場したReactやVue.jsに代表される宣言的UI実装は、大規模なSPAの構築を可能にしました。その一方、フロントエンド領域に新たなアーキテクチャが導入されたことで、それまでWebアプリケーション開発で定石とされたテスト手法を適用しづらいケースが増え、新たなベストプラクティスが求められるようになりました。 その要請に応える形で、2010年代後半にはフロントエンドのテスト手法に緩やかなパラダイムシフトがありました。この記事ではそのパラダイムシフトを振り返りながら、フロントエンドで必要なテストについて考察し、最後にChromaticを用いたビジュアルリグレッションテストを紹介します。 2. Testing Pyramid と フロントエンド テストを語る際によく持ち出されるメタファとして、Testing

この本で、著者のRobert Martinも、次のように述べています。 この10年間の間に この業界では多くのことがありました。1997年当時、テスト駆動開発などという言葉は誰も聞いたことがありませんでした。ほとんどの人にとって、単体テストというのは動作をひとたび『確認』したら捨ててしまうものでした。苦労してクラス メソッドを書き上げ、それらをテストするためのその場しのぎのコードをでっちあげていたのです。 『Effective Java』で有名なJoshua Blochは、この本の中のインタビューで、次のような会話を行っています。 「デバッグの話をしましょう。あなたが追いかけた最悪のバグはどのようなものでしたか」 それに対して、Joshua Blochは、 「最初に勤めた会社で私が開発したソフトウェアですね。ソフトウェアのデバッグに1週間半費やしました」 という話をしています。 1週間半費

Remember Javascript fatigue? It was 2015, and every few hours a new framework/boilerplate/build tool would burst onto the scene, one-upping the previous contender and shooting to the top of Hacker News. Eventually, React and Webpack became a de facto standard and a relative peace fell across the land. Frontend devs were able to relax and get real work done rather than frantically switching tools e

Vite PoweredReuse Vite's config and plugins - consistent across your app and tests. But it's not required to use Vitest!

会員事業部エンジニアの佐藤です。クックパッドでは日々データと向き合い、データを基にした施策作りに関わっています。 Cookpad TechConf 2018で新井が発表した「クックパッドの "体系的" サービス開発」の中で、社内で仮説検証を行う際に使われているツールについて触れている箇所がありました。 本記事ではそのツールと実際の取組み方について、実際の流れを踏まえながらもう少し詳しく説明していきます。 仮説検証 仮説検証は以下のフローで進んでいきます。 前提条件を確認する 検証の設計をする 各パターンの機能を実装する 各パターンにログを仕込む デプロイ後の監視 検証結果の振り返りとネクストアクション 小さく・手戻りなく・高速な検証を行うためには手を動かす前の段階、上記フローにおける1・2のステップが重要となります。 具体例として「朝と夜はプレミアム献立の需要が高まる」という仮説の検証フロ

このドキュメントについて リクエストパラメータでバリデーションエラーが発生する際に発生するExceptionの種類がなんか色々ありそうだったので調査してみた 完全に網羅できていないとは思うけど自分なりに使いそうだなーっていうケースを調べた 今回調査したのは以下のケース ①パスのパラメータ ②引数で指定するケース ③引数でDTOを指定するケース ④引数で@RequestBodyをつけてDTOを指定するケース(JSON) 先に結論 調査したケースとExcpetionの対応は以下の表の通り 引数でバリデーションするものはConstraintViolationExceptionになってそうでないものは下記に従うっ て言う感じだった ちなみに複数バリデーションが発生するケースも試してみたけどその場合はDTOを使っているパラメータのバリデーションエラーが優先して発生していた 引数で指定している部分を同

はじめに JavaScriptのモックライブラリでは、 sinon などが有名であるが、テスティングフレームワークに Jest を使ってるならば Jest組み込みのモックライブラリで済ませたほうが学習コスト少なくて済むだろうと思える。 しかし、 sinon の感覚でJestのモックライブラリを使おうとすると違和感というのか、モックへの考え方の違いに気づかされる。 ということで今回は、Jestのモックライブラリの考え方と使い方を整理していきたいと思う。 モックの用語整理とJestモックライブラリの位置づけ モックと一言でいっても、それが指す内容は微妙に異なる。 ここでは、モックを 広義のMock Object と 狭義のMock Object と分けて整理してくれているテスト駆動開発を参考に用語を整理する。 テスト駆動開発では、モック用語を、下図のとおり、テストダブルとそのサブクラスとして

スタブとモックの違いというのを書いたのですが、書いているとき「テストダブル」という用語についてよく知らないまま書いていました。それをコメントで指摘され、改めて調べてみました。 5種類のテストダブル テストスタブ 実際の依存コンポーネントにかわりテスト対象に間接入力を行うもの。そのテスト内では間接入力の値を確定できる。 RSpecでいう allow(hoge).to revceive(:fuga).and_return('foo') テストスパイ テスト対象が他のコンポーネントに間接出力を行う場合、実際のコンポーネントの代わりにメッセージを受け取り記録するもの。モックとの違いは事前に期待する値を知っていて、一致しているかどうか検証を行うかどうか。 RSpecでいうと expect(hoge).to have_received(:fuga) モックオブジェクト テスト対象が他のコンポーネントに

はじめに みなさんユニットテスト書いてますか？ 私はユニットテストを書くとき、テストダブルを利用することがありますが、 スタブ、スパイなど、しっかり理解せずに利用しており、そろそろ理解しないとまずそうなので、ネットの海をさまよっていたところ、t_wadaさんのこんなツイートを見つけました。 Mock, Stub, Spy, Fake 等は混乱してしまいがちなので、いつもこのエントリを紹介している / xUnit Test PatternsのTest Doubleパターン(Mock、Stub、Fake、Dummy等の定義) http://t.co/yLLsiA3H6v — Takuto Wada (@t_wada) June 10, 2015 このツイートで紹介されていたブログでは、テストダブルの分類についてわかりやすく書かれていました。 今回はこの記事の内容を前提にして、大元である xUn

ちなみにですが、GitHub に記述されているrender(ui, { legacyRoot: true } )の部分を検証しました。 React v18、react-testing-library v13 にしました。 To opt-out of this change you can use render(ui, { legacyRoot: true } ). But be aware that the legacy root API is deprecated in React 18 and its usage will trigger console warnings. この変更をオプトアウトするには、render(ui, { legacyRoot: true } ) を使用します。ただし、React 18 ではレガシー ルート API は非推奨であり、使用するとコンソールの警告が

CircleCI には、みなさまのデリバリーの効率の改善に役立つ Insights ダッシュボードが備わっています。 このダッシュボードは、パイプラインの最適化に役立つ実用的なデータを提供するため、1 年前にリリースされたものです。 リリース以来、CircleCI はみなさまのフィードバックを真摯に受け止めています。 現在のところ、最も多いご要望は、テストのパフォーマンスをさらに詳しく可視化する機能が欲しいというものです。 そこで、この度、クラウド版 CircleCI の全ユーザー様を対象として、テスト インサイトの正式リリースを決定いたしました。さらに、今後数か月以内に、CircleCI Server のお客様もご利用いただけるようアップデートを行う予定です。 テスト インサイトを利用することで、指定したテスト スイートのうちで成功率、実行時間、結果の安定性に問題があるテストを可視化でき

以降では、このテスト設計改善の取り組みに対する質問に回答していきます。 テスト設計改善についての質問の回答 【質問1】テスト設計にあたって開発ドキュメントの参照はしないのでしょうか。開発ドキュメントがほとんど無い？ 開発ドキュメントの参照はします。チケットの内容、開発ドキュメントだけでなく、その内容に対しての疑問点は実際に開発と議論しておきます。開発者との議論はテスト設計に着手する前、テスト観点出しを行う前後の活動です。 【質問2】テストと設計の比率を出していらっしゃいましたが（テストをいっぱいやるようにした）、数える単位は何ですか？人数？時間？その他？ 説明資料では文字の大きさの都合上省略した形で書いていますが、比率を出していたのは「（開発の設計ではなく）テスト設計」と「テスト実施」の比率です。また、ここでの比率は感覚値ではありますが、工数比です。 【質問3】改善後の成果物サンプルやアク

こんにちは、Autify CEOの近澤（@chikathreesix）です。 先日会社の紹介資料を公開しました。大変嬉しいことに多くの反響を頂いているのですが、会社の紹介資料には自動化に賭ける僕の熱い想いは詰め込めきれませんでした。そこで、なぜ我々が今テスト自動化に取り組んでいるのか、なぜテスト自動化がこれからの社会において重要なのか、改めてブログにまとめました。 テストの大半が未だに人手ソフトウェアテストとは、開発したソフトウェアが正しく動作するか検証する作業のことです。ですのでソフトウェアを開発するあらゆる組織において、テストを実施する必要があります。市場は非常に大きく、IT予算の1/3をテストに使っていると言われ、その額は130兆円にも登ります。 この作業ですが、未だにグローバルで見てもおよそ75%の企業が人手に大きく依存しています。人手のテストは当然人件費と時間が多くかかるわけです

皆さんは 「カバレッジが高ければ、ソースコードの品質が高い」という誤解 をしていませんか？少なくとも私は今までテストカバレッジ100%を追求していました。「C0/C1カバレッジ100%」がユニットテストの完了条件として含まれているプロジェクトも多いかと思います。 本稿では、「カバレッジが高ければ、ソースコードの品質が高い」という命題がなぜ誤っているのかを論理的に証明し、カバレッジを計測する本当の目的、そして推奨されるカバレッジの目標値について紹介したいと思います。 「カバレッジが高ければ、ソースコードの品質が高い」はなぜ間違っているのか？ カバレッジを計測する本当の目的 バグを潜在させてしまう恐怖のテストケース・アンチパターン カバレッジの目標値は100%にするべきではない カバレッジの目標値は何%にするべきなのか？ （テストカバレッジの種類については『ホワイトボックステストにおけるカバレ