0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

fetch-mockを使ったテスト

Last updated at Posted at 2022-03-29

mochaにおけるテストでfetch-mockを使ったのでメモしておく。
フロントエンドで、fetch APIを使ってリクエストを行う部分のテストをする際にリクエストをmockするのにfetch-mockを利用した。

mockとは

mockとは、テスト対象クラスが呼び出しているクラスを置き換えるためのテスト用オブジェクトのこと。mockでテスト対象クラスが呼び出しているクラスを置き換え、mockの動作を指定することで意図したテスト条件を作ることができる。

fetch-mockを使ったテスト

fetch-mockを使ったテストの内、GETリクエストのテストの場合をメモしておく。

テストコード例
import fetchMock from "fetch-mock";

describe("APIのテスト", () => {

    afterEach(() => {
        // fetchMockをリセット
        fetchMock.restore();
    });

    it("GETメソッドをmock", async () => {
        // fetch-mockを設定
        fetchMock.get(<リクエストURL>, {
            <レスポンスの内容>
            // 例
            //status: 200,
        });
        const result = <テスト対象メッソド>
    });
});

上記のように、fetchMock.get()の第1引数にURLを指定し、リクエストのURLと一致した場合mockされる。第2引数はレスポンスを指定する。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?