フロントエンドエンジニア必見！Jestで単一ファイルテストを効率化する方法

2024-04-02

Jestを使用して単一ファイルをテストする方法

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

まず、テスト対象となるファイルを準備します。ここでは、index.jsという名前のファイルを作成し、以下のコードを追加します。

function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

module.exports = {
  add,
  subtract,
};

このファイルでは、addとsubtractという2つの関数を定義し、それらをモジュールとして公開しています。

テストファイルの作成

const { add, subtract } = require('./index');

describe('index.js', () => {
  it('should add two numbers', () => {
    expect(add(1, 2)).toBe(3);
  });

  it('should subtract two numbers', () => {
    expect(subtract(2, 1)).toBe(1);
  });
});

このファイルでは、index.jsからaddとsubtract関数をインポートし、それぞれに対してテストケースを記述しています。

テストの実行

テストファイルを作成したら、Jestを使用してテストを実行できます。

npx jest

テストが成功すると、以下の出力が出力されます。

PASS  ./index.test.js
✓ should add two numbers (5ms)
✓ should subtract two numbers (5ms)

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

このように、Jestを使用して単一ファイルのテストを簡単に実行できます。

テストの詳細

Jestには、さまざまなテスト機能が用意されています。ここでは、いくつかの基本的な機能を紹介します。

テストケースは、it関数を使用して記述します。テストケースには、テスト対象のコードに対する具体的な動作を記述します。

it('should add two numbers', () => {
  expect(add(1, 2)).toBe(3);
});

このテストケースは、add(1, 2)が3を返すことを検証しています。

アサーションは、テスト結果を検証するために使用します。Jestには、さまざまなアサーションが用意されています。

expect(add(1, 2)).toBe(3);

モックは、テストコード内で外部モジュールをシミュレートするために使用します。

jest.mock('./my-module', () => {
  return {
    add: jest.fn(() => 10),
  };
});

it('should call my-module.add', () => {
  const { add } = require('./my-module');

  add(1, 2);

  expect(add).toHaveBeenCalledWith(1, 2);
});

このテストコードは、my-module.add関数をモックし、常に10を返すようにしています。

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

テスト対象ファイル (index.js)

function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

module.exports = {
  add,
  subtract,
};

テストファイル (index.test.js)

const { add, subtract } = require('./index');

describe('index.js', () => {
  it('should add two numbers', () => {
    expect(add(1, 2)).toBe(3);
  });

  it('should subtract two numbers', () => {
    expect(subtract(2, 1)).toBe(1);
  });

  it('should throw an error when dividing by zero', () => {
    expect(() => add(1, 0)).toThrow();
  });

  it('should return a truthy value when the number is positive', () => {
    expect(add(1, 2)).toBeTruthy();
  });

  it('should return a falsy value when the number is negative', () => {
    expect(subtract(2, 1)).toBeFalsy();
  });

  it('should return an array of numbers', () => {
    const numbers = [1, 2, 3];
    expect(numbers).toBeInstanceOf(Array);
  });

  it('should contain the number 2', () => {
    const numbers = [1, 2, 3];
    expect(numbers).toContain(2);
  });

  it('should be greater than 10', () => {
    const number = 11;
    expect(number).toBeGreaterThan(10);
  });

  it('should be less than 20', () => {
    const number = 15;
    expect(number).toBeLessThan(20);
  });

  it('should be equal to "hello"', () => {
    const string = 'hello';
    expect(string).toEqual('hello');
  });

  it('should match the regular expression /hello/', () => {
    const string = 'hello world';
    expect(string).toMatch(/hello/);
  });

  it('should be a spy', () => {
    const spy = jest.fn();
    spy();
    expect(spy).toHaveBeenCalled();
  });

  it('should be a mock', () => {
    const mock = jest.fn();
    mock.mockImplementation(() => 10);
    const result = mock(1, 2);
    expect(result).toBe(10);
  });
});

Jestには、さまざまなオプションや機能があります。詳細は公式ドキュメントを参照してください。
Jestは、JavaScriptだけでなく、TypeScriptのテストにも使用できます。

Jest以外で単一ファイルをテストする方法

Mochaは、JavaScriptのテストフレームワークとして広く利用されています。Jestと同様に、テストケースを記述して実行することができます。

const assert = require('assert');

describe('index.js', () => {
  it('should add two numbers', () => {
    const result = add(1, 2);
    assert.equal(result, 3);
  });

  it('should subtract two numbers', () => {
    const result = subtract(2, 1);
    assert.equal(result, 1);
  });
});

QUnitは、JavaScriptのテストフレームワークとして老舗的存在です。MochaやJestと比べて軽量で、シンプルなテストに適しています。

QUnit.test('should add two numbers', function(assert) {
  const result = add(1, 2);
  assert.equal(result, 3);
});

QUnit.test('should subtract two numbers', function(assert) {
  const result = subtract(2, 1);
  assert.equal(result, 1);
});

Karmaは、JavaScriptのテストランナーです。ブラウザ上でテストを実行することができます。

// karma.conf.js

module.exports = function(config) {
  config.set({
    // ...
    files: [
      // ...
      'index.js',
      'index.test.js',
    ],
  });
};

// index.test.js

describe('index.js', () => {
  it('should add two numbers', () => {
    const result = add(1, 2);
    expect(result).toBe(3);
  });

  it('should subtract two numbers', () => {
    const result = subtract(2, 1);
    expect(result).toBe(1);
  });
});