TypeScriptとVitestでユニットテストしてみた！

こんにちは稲葉です。最近ソフトウェアテストの学習をしていた事もあり、ソフトウェア開発において、品質保証とバグの早期発見は非常に重要だと感じました。そのためには、効果的なユニットテストが欠かせません。

なので、今回はTypeScriptとVitestを使用した、ユニットテストの実施方法を解説します。

Vitestとは

Viteネイティブの超高速ユニットテストフレームワーク。

参考資料：Vitest公式ドキュメント

また、Jest互換でTypeScriptやJSXに対するサポートもあります。

ちなみにVite(ヴィート)は、モダンなWebプロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。

詳細につきましては、公式ドキュメントを参照ください。

Vite公式ドキュメント

実行環境の準備

はじめにTypeScriptとViteをインストールします。

yarn create vite my-vite-app --template react-ts

上記のコマンドをターミナルに入力すると、ViteとTypeScriptの実行に必要なものが諸々インストールされます。

次に以下のコマンドを入力して、Vitestをインストールします。

cd my-vite-app

yarn add -D vitest

これで必要なものが揃いました。

最後にVitestのテストAPIをimportしなくとも使用出来るように、vite.config.tsを以下のように、

/src/vite.config.ts

/// <reference types="vitest" />
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
  },
});

"compilerOptions": {
　"types": ["vitest/globals"],
}

関数の作成

export function primenumber(n: number): boolean {
if (n <= 1) return false;
for (let i = 2; i < n; i++) {
if (n % i === 0) return false;
}
return true;
}

素数を判定する関数を作ります。

ユニットテスト作成

次にテストコードを書きます。

import { primenumber } from "./prime";

describe("primenumber", () => {
  it("should return false when n is less than 1", () => {
    const result = primenumber(0);
    expect(result).toBe(false);
  });

  it("should return false when n is not a prime number", () => {
    const result = primenumber(4);
    expect(result).toBe(false);
  });

  it("should return true when n is a prime number", () => {
    const result = primenumber(7);
    expect(result).toBe(true);
  });

  it("should return true when n is a large prime number", () => {
    const result = primenumber(997);
    expect(result).toBe(true);
  });
});

ターミナルを開き以下のコマンドを実行します。

npx vitest run fileName

実行するとこのように出力されます。

まとめ

本記事では、TypeScriptとVitestを使用したユニットテストについて解説しました。TypeScriptの静的型付けとVitestの軽量なテストランナーを組み合わせることで、効果的なユニットテストを実施することができます。

今回はシンプルな関数のユニットテストしか行いませんでしたが、今後はインテグレーションテストやE2Eテストなども試していきたいと思います。

以前、TypeScriptライブラリのZodについての記事も書いたので、興味がありましたら読んでもらえると嬉しいです！

TypeScript開発に欠かせない？Zodライブラリの基本

最後まで読んでくださりありがとうございました。