Zenn
📖

フロントエンドの関数単体テスト（Bun+Jest+TS）

2024/05/17に公開
JavaScript
TypeScript
Jest
Test
Bun
tech

はじめに

フロントエンド開発において、コードの品質を保つことは重要です。特に、ユーザーインターフェースの変更や機能の追加が頻繁に行われる現代のWeb開発では、予期しないバグが発生することを防ぐためにテストの導入が欠かせません。
しかし、過去にはフロントエンドテストがあまり重視されていなかった時代もありました。そのため、バグが発生しやすく、保守が困難なコードが多く存在していました。

この記事では、シンプルなフロントエンドテストに関する部分を書こうと思います。テストのレシピブックとしても使っていこうと思っているので、随時この記事を更新or新規記事作成していこうと思っています！

環境構築

関数の単体テストとは

関数の単体テストとは、ソフトウェアの最小単位（通常は関数やメソッド）でのテストです。Reactのコンポーネントに対するテストではなく、シンプルな関数のテストを指します。

こういった関数です。

export function sum(a: number, b: number) {
  return a + b;
}

関数の単体テスト

ケース1：シンプルな計算関数

足し算をする関数

export function sum(a: number, b: number) {
  return a + b;
}

テスト

import { sum } from "@/functions/sum";

test("sum関数は1と2を足して3を返す", () => {
  expect(sum(1, 2)).toBe(3);
});

test("sum関数は-1と-2を足して-3を返す", () => {
  expect(sum(-1, -2)).toBe(-3);
});

test("sum関数は1と-2を足して-1を返す", () => {
  expect(sum(1, -2)).toBe(-1);
});

test("sum関数は0と0を足して0を返す", () => {
  expect(sum(0, 0)).toBe(0);
});

ケース2：非同期処理

APIを叩く関数

export async function fetchData(apiUrl: string) {
  const response = await fetch(apiUrl);
  const data = await response.json();
  return data;
}

テスト

import { fetchData } from "@/functions/promise";

describe("fetchData関数のテスト", () => {
  beforeEach(() => {
    global.fetch = jest.fn(() =>
      Promise.resolve({
        json: () => Promise.resolve({ data: "mock data" }),
      })
    ) as jest.Mock;
  });

  afterEach(() => {
    (global.fetch as jest.Mock).mockClear();
  });

  test("fetchData関数はAPIからデータを取得する", async () => {
    const data = await fetchData("http://example.com/api");
    expect(data).toEqual({ data: "mock data" });
  });
});

さいごに

内容だいぶ浅めだけど、一日一zenn今日はここまで。
さいごに色々な記事まとめてBookにしたいな（願望）。

Discussion