はじめに

この記事は「フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識」を読んで、私自身がよく忘れるところをまとめたものです。

とても良い書籍なので購入してじっくり読んでみることをお勧めします。

非同期処理のテスト

非同期処理のテストを書く方法です。

resolveのテスト

テストする関数はこちらです。

export function wait(duration: number) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(duration);
    }, duration);
  });
}

async、awaitを利用した書き方です。

test("非同期処理のテスト", async () => {
  expect(await wait(1000)).toBe(1000);
});

resolvesマッチャーを利用した書き方です。

test("非同期処理のテスト", async () => {
  await expect(wait(1000)).resolves.toBe(1000);
});

rejectのテスト

テストする関数はこちらです。

export function wait(duration: number) {
  return new Promise((_,reject) => {
    setTimeout(() => {
      reject(duration);
    }, duration);
  });
}

Promiseをreturnする書き方です。

rejectsマッチャーを利用した書き方です。

test("非同期処理のテスト", async () => {
  await expect(wait(1000)).rejects.toBe(1000);
});

try catchを利用した書き方です。

test("非同期処理のテスト", async () => {
  expect.assertions(1);　// アサーションが1回実行されることを保証
  try {
    await wait(1000);　// ここで成功した場合は、アサーションが実行されないのでテストはエラーとなる
  } catch (e) {
    expect(e).toBe(1000);
  }
});

expect.assertions

アサーションが必ず実行されることを保証するためのメソッドです。
テストの記述ミスを防ぐために利用します。

ポイント

非同期処理のテストを書くときのポイントは以下です。

• 非同期処理のテストは、テスト関数をasyncにする
• resolves、rejectsマッチャーを含むアサーションはawaitを利用する
• try、catchを利用した場合は、expect.assertionsを書く

モックのテスト

モジュールのモック化

以下のモジュールのテストを書きます。

export function sayHello(name: string) {
  return `Hello! ${name}.`;
}

export function sayGoodBye(name: string) {
  throw new Error("未実装");
}

モジュールをモック化してみます。

import { sayHello,sayGoodBye } from "./greet";

jest.mock("./greet", () => ({
  sayGoodBye: (name:string) => `GoodBye! ${name}.`,
}));

test("スタブのテスト", () => {
  expect(sayHello("Taro")).toBe("Hello! Taro."); // undefinedとなり失敗する
  expect(sayGoodBye("Taro")).toBe("GoodBye! Taro."); // モック化した関数が呼ばれるので成功する
});

モックにsayHelloの関数がスタブ化されていない為、undefinedとなりテストが失敗します。
モジュールの一部をスタブに置き換える場合は、jest.requireActual関数を利用します。

import { sayHello,sayGoodBye } from "./greet";

jest.mock("./greet", () => ({
  ...jest.requireActual("./greet"),
  sayGoodBye: (name:string) => `GoodBye! ${name}.`,
}));

Web APIクライアントのスタブ化

まずは、APIをリクエストしているモジュールをモック化します。