Jest 入門 ～ テストケース作成の第一歩 ～

Jestは、JavaScript のテストフレームワークとして広く使用されており、単体テストの作成や実行を簡単に行うことができます。

この記事では、Jest を使用してテストケースを作成する手順と、テストファイルの基本的な構造について解説します。

１．単体テストの書き方と基本構造の理解
２．テストケースの作成と実行の手順

１．単体テストの書き方と基本構造の理解

Jest を使用して単体テストを書く際には、以下の基本構造を理解することが重要です。

describe/it ブロック:

describe/it ブロックは、テストスイートとテストケースを定義するためのものです。describe ブロックは、テストケースのグループを定義し、it ブロックは個々のテストケースを定義します。

describe('グループ１', () => {
  it('テストケース１', () => {
    // テストの実行と検証
  });
});

expect:

Expectは、テストケースで期待される結果を検証するために使用されます。これらは、テストの成功または失敗を判定します。

expect(result).toBe(4);

２．テストケースの作成と実行の手順

Jest を使用してテストケースを作成し、実行する手順は以下の通りです。

１．テスト対象のファイルの作成

まずは、テストの対象となるファイルを作成しましょう。

今回は、足し算と引き算を行うメソッドを持った、calculator クラスを作成します。

// calculator.js
class Calculator {
  // コンストラクタ
  constructor() {
    // 何もしない
  }

  // 2つの数値の和を計算するメソッド
  plus(num1, num2) {
    return num1 + num2;
  }

  // 2つの数値の差を計算するメソッド
  minus(num1, num2) {
    return num1 - num2;
  }
}

// Calculatorクラスをエクスポート
module.exports = Calculator;

２．テストファイルの作成:

まず、テスト対象のコードと同じディレクトリ内に、テストファイルを作成します。テストファイルは、.test.js もしくは .spec.js の拡張子を持つことが一般的です。

Describe/It ブロックを使って、テストケースの枠組みだけを作成してみます。

// calculator.test.js
describe("Calculator クラス", () => {
  describe("plus メソッド", () => {
    it("1 + 1 = 2 となること", () => {});
    it("1 + (-3) = -2 となること", () => {});
  });

  describe("minus メソッド", () => {
    it("3 - 1 = 2 となること", () => {});
    it("1 - (-3) = 4 となること", () => {});
  });
});

３．テストケースの作成:

では、先程作成したファイルに、実際にテストコードを書いていきましょう。

必要に応じて、expect を使用して期待される結果を検証します。

// calculator.test.js
const Calculator = require("./calculator");

describe("Calculator クラス", () => {
  describe("plus メソッド", () => {
    it("1 + 1 = 2 となること", () => {
      const calc = new Calculator();

      expect(calc.plus(1, 2)).toBe(3);
    });

    it("1 + (-3) = -2 となること", () => {
      const calc = new Calculator();

      expect(calc.plus(1, -3)).toBe(-2);
    });
  });

  describe("minus メソッド", () => {
    it("3 - 1 = 2 となること", () => {
      const calc = new Calculator();

      expect(calc.minus(3, 1)).toBe(2);
    });

    it("1 - (-3) = 4 となること", () => {
      const calc = new Calculator();

      expect(calc.minus(1, -3)).toBe(4);
    });
  });
});

３．テストの実行:

コマンドラインで、テストファイルがあるディレクトリに移動し、以下のコマンドを実行してテストを実行します。

npm test

４．テスト結果の確認:

テストが実行されると、コンソールにテスト結果が表示されます。成功したテストケースは緑色で表示され、失敗したテストケースは赤色で表示されます。

先程の calculator.test.js を実行した結果は、以下のようになるかと思います。

> my_project@1.0.0 test
> jest

 PASS  src/calculator.test.js
  Calculator クラス
    plus メソッド                                                                                                  
      √ 1 + 1 = 2 となること (6 ms)
      √ 1 + (-3) = -2 となること (1 ms)
    minus メソッド
      √ 3 - 1 = 2 となること (1 ms)
      √ 1 - (-3) = 4 となること (1 ms)

Test Suites: 1 passed, 1 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        1.072 s
Ran all test suites

Jest 入門　～テストケース作成の第一歩～