💪

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

2022/04/16に公開約2,700字

やりたいこと(目標)

以前作成したフロントエンド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

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

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

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(31); //書き換え33 -> 31
  });
});

エラーが出ます
error

おまけ

調べている間に、node-fetchをテストする方法も書いたので、以下の記事にまとめておきます。

https://zenn.dev/akira_kashihara/articles/2c3a985010f24b
脚注
  1. フロントエンドJavascriptのみでCloud Storageにファイルをアップロードする / Akira Kashihara https://zenn.dev/akira_kashihara/articles/a7c0c0df48f5a0 (2022-04-16閲覧) ↩︎

  2. sheremet-va / vi-fetch https://github.com/sheremet-va/vi-fetch (2022-04-16閲覧) ↩︎

  3. Vitest https://vitest.dev/ (2022-04-16閲覧) ↩︎

  4. Vitest / Releases (Github) https://github.com/vitest-dev/vitest/releases ↩︎

Discussion

ログインするとコメントできます