Cypressで外部サイトとの通信をスタブする

Cypress.intercept()という関数でリクエストもレスポンスも自由にスタブできます。

今回、私が書いていたのは、「将棋の騎士がずらっと表示されていて、各々をクリックすると日本将棋連盟のプロフィールページに飛ぶ」という仕様のテストで、別にレスポンスはなんでもいいので、とにかく外部サイトにリクエストを飛ばさないというのが主目的でした。

実際に書いたコード。

cy.intercept('https://www.shogi.or.jp//player/pro/**', 'success').as('kishiDatabasePage')

Cypressでネットワークリクエストをどう扱うか

ちゃんと公式にページがあります。トレードオフが書いてあるのと、どういう時にスタブすべきかという戦略が明記されていて、すごくタメになりました。

docs.cypress.io

ただし、今回私がやったのは、アプリケーションの動作に必要なデータをAPI経由でフェッチする部分だとか、特定の状況の再現などではなく、「アプリケーションと直接関係のない外部サイトへのリクエストを飛ばしたくない」というのが動機でした。 正しく考えられているか、誤ったアプローチをしていないかは若干心配。 自分の趣味コードだからいざとなったら後でなんとでも直せばいいか、という気持ちで先に進みます。