💪

VitestでフロントエンドJavascriptのfetchをmockする

2022/04/17に公開

JavaScript

やりたいこと（目標）

以前作成したフロントエンドJavascriptのみでCloud Storageにファイルをアップロードするコード^[1]をライブラリ化しているところで、そのテストを書いています。そのコードの中にはfetchを使う部分があり、このmockの作り方がよく分からなかったので、書きたいと思います。結論から言うと、vi-fetch^[2]というモジュールがあって、それを使えば簡単にテストを書くことが出来ます。

環境の導入

まだ、Vitest^[3]はメジャーなツールではないので、一応、導入方法についても書いておきます。

npm i -D vitest vi-fetch jsdom

テスト対象の関数を作る

記事用に、かなり簡素化したテスト対象の関数を作ります。この関数は、https://hogehoge.hogehoge.hogehoge というサイトをGETして、そのレスポンスのjsonにあるcountの値を返すだけです。

getCount.js

export const getCount = async () => {
  const response = await fetch("https://hogehoge.hogehoge.hogehoge"); // GETする
  const countJson = await response.json(); // Responseのbodyをjsonで得る
  return countJson.count; // 得られたjsonのcountの値を返す
};

テストを書く

本来はテストケースを書いてから、関数を書くほうが良いと思うのですが、試しなので手順前後です。
今回、getCount.jsは同じフォルダ内にあります。
1行目の// @vitest-environment jsdomはフロントエンドの環境でテストするという、おまじないです。

getCount.test.js

// @vitest-environment jsdom

import "vi-fetch/setup";
import { describe, it, expect } from "vitest";
import { mockGet } from "vi-fetch";
import { getCount } from "./getCount";

describe("sample", () => {
  it("hello", async () => {
    const mock = mockGet("https://hogehoge.hogehoge.hogehoge").willResolve({
      count: 33,
    });
    const result = await getCount();
    expect(result).toBe(33);
  });
});

テストを実行

じっこうした結果は以下のようになります。
passed

わざと、通らないようにしてみる

テストのコードを以下のように書き換えて動かすと…