APIとの連携を非同期（Ajax）でたくさん行うSPAのページを制作したときに、cypressを使ったE2Eテストを導入してみました。
今回は、そのときに対応してみて、非同期（Ajax）通信周りのテストがやりやすかったので、そのことを書いてみようと思います。

はじめに

cypressのインストール方法や使い方は、公式サイトがとてもわかりやすいので公式サイトを見てください。
実装した当時のバージョンは4系で route 関数を使っていますが、最新バージョンでは非推奨となり intercept 関数に変わっているので気を付けてください。

最初に用意した設定

まず、ローカル、開発環境、テスト環境、本番環境みたいに環境が複数あったので、各環境を npm-scripts で引数を渡して、環境ごとに設定を変えられるようにしました。

設定方法

通常、基本的な設定は cypress.json に書きますが、cypressはデフォルトで引数を受け取れるようにしてくれてます。
さらに plugins に書かれた処理は、cypressが実行される前に行われるので、ここで基本設定を上書きすることにしました。

ベースとなる設定は、通常通りに cypress.json に書いておきます。

cypress.json

{
  "baseUrl": "https://www.example.jp"
}

つぎに plugins/index.js で受け取った引数によって設定を上書きする処理を書きます。
今回は type=環境名 みたいにする想定で書いてみます。

plugins/index.js

module.exports = (on, config) => {
  switch (config.env.type) {
    'dev':
      config.baseUrl = 'https://develop.example.jp'
      break
    'local':
      config.baseUrl = 'http://localhost:3000'
      break
  }
  return config;
};

こんな感じ
あとは npm-scripts で、cypressを立ち上げるコマンド cypress open を追加して

npm run cypress:open -- --type dev

こんな感じで実行すれば、環境ごとに設定を変更して、cypressを実行することができるようになります。

APIとの連携テスト

では、APIとの連携テストを書いていきます。

非同期（Ajax）通信のレスポンスを上書きする

たとえば、APIとの連携でエラーが起きたときのテストをする場合、エラー用のレスポンスが返ってくるように強制的に上書きして、想定通りの動きになるかを確認します。

// apiのパス
const apiPath = '/api/test';

// 上書きするレスポンスのJSON
const response = {
  isSuccess: false,
  errorMessage: '〇〇が正しくないよ'
};

// ステータスを400に設定
const options = {
  status: 400
};

// routeを使って上書き
cy.route('POST', apiPath, response, options)

こんな感じで route を使うと上書きすることができます。
あとは、ちゃんとエラー処理が正しく行われたかのテストも追加すればエラーのテストが完成です。

非同期（Ajax）通信でリクエストしたPOST情報を確認

レスポンスもいじったら、今度は、リクエストも正しいか一緒に確認したいなと思って、POST情報も確認するようにしました。

例）
POSTのname値にhogeがありかつ value値は文字列のfugaであるか確認する

// /api/testにPOSTされる内容を確認するためrouteで設定
// この通信に対してasで名前を付けておく
cy.route('POST', '/api/test').as('apitest')

// 名前をつけたapitestの通信情報を確認
cy.wait('@apitest')
  .then((xhr) => {
    // POSTのname値にhogeがあり かつ value値は文字列のfugaであるか確認
    cy.wrap(xhr.request.body).its('hoge').should('eq', 'fuga')
  })

こんな感じで確認するテストコードを追加しました。
で、たとえば入力エリアがあって、その入力した値が正しくPOSTされているかを確認するときは、この処理の前に入力処理を書いて、そこで入力した値とPOSTされた内容があっているかを確認すればいいと思います。

まとめ

SPAのページとかを制作するとき、APIの結果によってページが変わったり、エラー処理がすごく複雑だったりすることがありますが、cypressを使うとブラウザで表示されたページを見ながらテストができるので、気づかなかったミスにも気づけたりして、導入してよかったと思いました。
あと、ほかにも、画面キャプチャやテスト中の画面を動画で保存することなどもあるので、興味を持った方は、さわってみてはいかがでしょうか。

FORK Advent Calendar 2020
23日目技術書 2020 @dashimakitamago
25日目 PayPay for Developersやってみた @ono_t