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

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

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

こういうとき 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の実際の設計をいったん気にせずテストを書けるので便利ですね。

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

投稿者 Chaki Hironori

webライターもやってるフロントエンドエンジニアです。Reactは自信があります。またデザイン畑の出身で、気持ちのいいアニメーションやインタラクティブな表現は丁寧に手掛けます。好きなものは中南米の遺跡で、スペイン語が少しできます。