フロントエンドのテスト環境を作る（Bun+Jest）

はじめに

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

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

環境について

パッケージ管理はBunを使っていきます。とても早い評判ですし、最初からTypeScriptが使えるのが魅力ですね！流行りには乗っていきましょう。
テスティングフレームワークは情報量の多く、モックの仕組みやカバレッジの機能が入っているMeta社発のOSSのJestを使っていきます!

必要なものインストール

Bunのプロジェクトをinitする

公式のドキュメントに従ってinitします。
実行時に質問されるので、必要があれば入力して設定変更しましょう。Hello via Bun!が標準出力に出ればOKです！

$ bun init
$ bun index.ts 
Hello via Bun!

Jestを入れる

こちらもjestの公式のドキュメントとts-jestの公式ドキュメントに従ってインストールしていきます。

$ bun add -d jest typescript ts-jest @types/jest ts-node
$ bunx ts-jest config:init

jestのコンフィグをtsにする

jest.config.ts

import type { JestConfigWithTsJest } from "ts-jest";

const config: JestConfigWithTsJest = {
  rootDir: ".",
  preset: "ts-jest",
  testEnvironment: "node",
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
};

export default config;

スクリプトコマンドで実行できるように、package.jsonのscriptsに追加しましょう。

{
  ...
  "scripts": {
    "test": "jest"
  },
  ...
}

以下のコマンドで実行できればOKです！
（テスト書いてないので特に実行結果はエラーになります）

$ bun run test

ついでに、@/xxxx形式でimportできるようにtsconfigもいじっておきます。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    ...
  }
}

テスト書いてみる

src/functions/sum.ts

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

src/__tests__/functions/sum.test.ts

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

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

これで実行してpassしたらOK!

$ bun run test
jest
 PASS  src/__tests__/functions/sum.test.ts
  ✓ adds 1 + 2 to equal 3 (1 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.908 s, estimated 1 s
Ran all test suites.

さいごに

今回はシンプルなjestの実行構築だけ説明してます！
実際の実行コードは今後増やしきます〜