【React × Cypress】getApiの中身を書き換えてテストする

こんにちは Gaji-Labo フロントエンドエンジニアの茶木です。

cypress の e2e テストを書くとき、api の mock を含むケースがあります。たとえば商品検索のテストを書くとして、普通の検索結果を返すテストと商品リストが空っぽのときだけ「商品がありません」と表示するような、いわゆるゼロリザルトのテストと書き分けたいときがあります。

こういうとき getApi の戻り値を書き換えられれば便利です。

intercept で api の戻り値を書き換える

it("検索結果がないときに「商品がありません」と表示する", () => {
  cy.visit("/products/123456");
  cy.intercept(
    "GET",
    "api/product_list/123456",
    []
  ).as("getProductList");
  cy.wait("@getProductList");
  cy.contains("商品がありません");
});

たとえば “api/product_list” が 配列で商品リストを固定で返すように mock で書かれているとき、普通に cypress のテストを書くと、商品リストのテストになりますよね。

一方、商品リストがないテストを書きたければ、api の戻り値が空配列になっていればテストが書けそうですね。
これは、 cy.intercept メソッドの url の次の引数に値を指定することで実現できます。 この例だと第3引数に空の配列 [] を渡しています。この指定した空配列が api の戻り値になります。

となれば、商品リストが空のときのテストが書けますね。

beforeEach(() => {
  cy.intercept(
    "GET",
    "api/product_list/123456",
    []
  );
});

なお、intercept は、beforeEach の中で書いても良いので、複数のテストで使用するのも可能です。

intercept で api の戻り値の一部を書き換える

ある程度大きなデータを返すような api の形式によっては、戻り値の一部だけを書き換えたいこともあります。

// 想定される戻り値
{
  product_list: [{ id: xxx, name: yyy, price: zzz}],
  some_trivial_big_data: {
    :
    :
    :
    :
  }
}

たとえば、戻り値がオブジェクトで返され、その中に変更したい product_list と他の変更したくない props がデータに含まれているようなケースです。ここでは、 product_list を空配列に書き換えて、それ以外はそのままにしておきたいというケースとしましょう。

cy.intercept(
  "GET",
  "api/product_list/123456",
  (req) => {
    req.reply((res) => {
      res.product_list = [];
    });
  }
);

cy.intercept メソッドの 書き換えたい値には 値そのものではなくメソッドを書くこともできます。このときメソッドの第1引数 req を利用すると、もともとの戻り値が参照できます。req.reply メソッドで変更したいプロパティだけを簡単に書き換えることができます。

まとめ

静的な値しか返さない api mock でも戻り値の書き換えをを組み合わせることで、apiの実際の設計をいったん気にせずテストを書けるので便利ですね。