LoginSignup
12
6

More than 1 year has passed since last update.

Ateam Brides Inc.Advent Calendar 2021Day 9ateam-life-design
@oekazuma(Kazuma Oe)in株式会社エイチームライフデザイン

いろんなJavaScriptのテストフレームワークを試してみる！

Last updated at Posted at 2021-12-08

Ateam Brides Inc. Advent Calendar 2021の9日目は
株式会社エイチームブライズの@oekazumaが担当します。

はじめに

今回試すJavaScriptのテストフレームワークはJest、AVA、Mocha、tape、Jasmine、uvuです。

今回使用したコードはこちら
https://github.com/oekazuma/test-runner-compare

テストするコードは簡単な計算をするプログラムを用意しました。

math.js
exports.sum = (a, b) => a + b;
exports.div = (a, b) => a / b;
exports.mod = (a, b) => a % b;

Jest

インストール

$ npm install --save-dev jest

テストコード

const math = require('../math');

describe('sum', () => {
    it('should be a function', () => {
        expect(typeof math.sum).toBe('function');
    });

    it('should compute values correctly', () => {
        expect(math.sum(1, 2)).toBe(3);
        expect(math.sum(-1, -2)).toBe(-3);
        expect(math.sum(-1, 1)).toBe(0);
    });
});

describe('div', () => {
    it('should be a function', () => {
        expect(typeof math.div).toBe('function');
    });

    it('should compute values correctly', () => {
        expect(math.div(1, 2)).toBe(0.5);
        expect(math.div(-1, -2)).toBe(0.5);
        expect(math.div(-1, 1)).toBe(-1);
    });
});

describe('mod', () => {
    it('should be a function', () => {
        expect(typeof math.mod).toBe('function');
    });

    it('should compute values correctly', () => {
        expect(math.mod(1, 2)).toBe(1);
        expect(math.mod(-3, -2)).toBe(-1);
        expect(math.mod(7, 4)).toBe(3);
    });
});

実行結果

> jest

 PASS  ./index.spec.js
  sum
    ✓ should be a function (1 ms)
    ✓ should compute values correctly
  div
    ✓ should be a function
    ✓ should compute values correctly (1 ms)
  mod
    ✓ should be a function
    ✓ should compute values correctly (1 ms)

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

AVA

インストール

$ npm install --save-dev ava

テストコード

const test = require('ava');
const math = require('../math');

test('sum', t => {
    t.is(typeof math.sum, 'function');
    t.is(math.sum(1, 2), 3);
    t.is(math.sum(-1, -2), -3);
    t.is(math.sum(-1, 1), 0);
});

test('div', t => {
    t.is(typeof math.div, 'function');
    t.is(math.div(1, 2), 0.5);
    t.is(math.div(-1, -2), 0.5);
    t.is(math.div(-1, 1), -1);
});

test('mod', t => {
    t.is(typeof math.mod, 'function');
    t.is(math.mod(1, 2), 1);
    t.is(math.mod(-3, -2), -1);
    t.is(math.mod(7, 4), 3);
});

実行結果

> ava

  ✔ sum
  ✔ div
  ✔ mod
  ─

  3 tests passed

Mocha

インストール

$ npm install --save-dev mocha

テストコード

const assert = require('assert');
const math = require('../math');

describe('sum', () => {
    it('should be a function', () => {
        assert.equal(typeof math.sum, 'function');
    });

    it('should compute result correctly', () => {
        assert.equal(math.sum(1, 2), 3);
        assert.equal(math.sum(-1, -2), -3);
        assert.equal(math.sum(-1, 1), 0);
    });
});

describe('div', () => {
    it('should be a function', () => {
        assert.equal(typeof math.div, 'function');
    });

    it('should compute result correctly', () => {
        assert.equal(math.div(1, 2), 0.5);
        assert.equal(math.div(-1, -2), 0.5);
        assert.equal(math.div(-1, 1), -1);
    });
});

describe('mod', () => {
    it('should be a function', () => {
        assert.equal(typeof math.mod, 'function');
    });

    it('should compute result correctly', () => {
        assert.equal(math.mod(1, 2), 1);
        assert.equal(math.mod(-3, -2), -1);
        assert.equal(math.mod(7, 4), 3);
    });
});

実行結果

> mocha

  sum
    ✔ should be a function
    ✔ should compute result correctly

  div
    ✔ should be a function
    ✔ should compute result correctly

  mod
    ✔ should be a function
    ✔ should compute result correctly


  6 passing (7ms)

tape

インストール

$ npm install --save-dev tape

テストコード

const test = require('tape');
const math = require('../math');

test('sum', t => {
    t.is(typeof math.sum, 'function');
    t.is(math.sum(1, 2), 3);
    t.is(math.sum(-1, -2), -3);
    t.is(math.sum(-1, 1), 0);
    t.end();
});

test('div', t => {
    t.is(typeof math.div, 'function');
    t.is(math.div(1, 2), 0.5);
    t.is(math.div(-1, -2), 0.5);
    t.is(math.div(-1, 1), -1);
    t.end();
});

test('mod', t => {
    t.is(typeof math.mod, 'function');
    t.is(math.mod(1, 2), 1);
    t.is(math.mod(-3, -2), -1);
    t.is(math.mod(7, 4), 3);
    t.end();
});

実行結果

> tape

TAP version 13
# sum
ok 1 should be strictly equal
ok 2 should be strictly equal
ok 3 should be strictly equal
ok 4 should be strictly equal
# div
ok 5 should be strictly equal
ok 6 should be strictly equal
ok 7 should be strictly equal
ok 8 should be strictly equal
# mod
ok 9 should be strictly equal
ok 10 should be strictly equal
ok 11 should be strictly equal
ok 12 should be strictly equal

1..12
# tests 12
# pass  12

# ok

Jasmine

インストール

$ npm install --save-dev jasmine

テストコード

const math = require('../math');

describe('sum', () => {
    it('should be a function', () => {
        expect(typeof math.sum).toBe('function');
    });

    it('should compute values correctly', () => {
        expect(math.sum(1, 2)).toBe(3);
        expect(math.sum(-1, -2)).toBe(-3);
        expect(math.sum(-1, 1)).toBe(0);
    });
});

describe('div', () => {
    it('should be a function', () => {
        expect(typeof math.div).toBe('function');
    });

    it('should compute values correctly', () => {
        expect(math.div(1, 2)).toBe(0.5);
        expect(math.div(-1, -2)).toBe(0.5);
        expect(math.div(-1, 1)).toBe(-1);
    });
});

describe('mod', () => {
    it('should be a function', () => {
        expect(typeof math.mod).toBe('function');
    });

    it('should compute values correctly', () => {
        expect(math.mod(1, 2)).toBe(1);
        expect(math.mod(-3, -2)).toBe(-1);
        expect(math.mod(7, 4)).toBe(3);
    });
});

実行結果

> jasmine

Randomized with seed 53426
Started
......


6 specs, 0 failures
Finished in 0.011 seconds
Randomized with seed 53426 (jasmine --random=true --seed=53426)

uvu

インストール

$ npm install --save-dev uvu

テストコード

const { test } = require('uvu');
const assert = require('uvu/assert');
const math = require('../math');

test('sum', () => {
    assert.type(math.sum, 'function');
    assert.is(math.sum(1, 2), 3);
    assert.is(math.sum(-1, -2), -3);
    assert.is(math.sum(-1, 1), 0);
});

test('div', () => {
    assert.type(math.div, 'function');
    assert.is(math.div(1, 2), 0.5);
    assert.is(math.div(-1, -2), 0.5);
    assert.is(math.div(-1, 1), -1);
});

test('mod', () => {
    assert.type(math.mod, 'function');
    assert.is(math.mod(1, 2), 1);
    assert.is(math.mod(-3, -2), -1);
    assert.is(math.mod(7, 4), 3);
});

test.run();

実行結果

> uvu

index.js
• • •   (3 / 3)

  Total:     3
  Passed:    3
  Skipped:   0
  Duration:  1.01ms

ベンチマーク

~> "jest" 1.02s
~> "ava" 564ms
~> "mocha" 194ms
~> "tape" 118ms
~> "jasmine" 96ms
~> "uvu" 87ms

State of JavaScript

state of javascript

State of JavaScriptを見るとJestがダントツ人気で、次にMocha、Jasmine、AVAといったかんじですね。
やっぱりJestは強いです！

npm trends

npm trends

ダウンロード数を半年で比較すると概ね、State of JacaScriptと同じような結果になりました。

JavaScriptフレームワーク

JavaScriptフレームワークの開発で使用されているテストフレームワークも調べてみました。

React

Jest

Vue

Jasmine

Angular

Jasmine

Svelte

Mocha

Next.js

Jest

Nuxt.js 2

Jest

Nuxt.js 3

Mocha

SvelteKit

uvu

おわりに

今回は主要なJavaScriptのテストフレームワークを6つ試してみました！
それぞれ書き方や、実行結果の表示の仕方や、速度に違いがあり、おもしろいなと思いました。
JavaScriptフレームワークの開発で使用されているテストフレームワークがそれぞれバラバラなのも興味深いです。
Jestはもちろんのこと、JasmineとMochaも使われてるケースがあり、一番後発であるSvelteKitはuvuが使われています。
uvuはベンチマークを見る限りでは一番早くて、軽量ですので今後注目です！
内包している機能が違うので単純比較できないかもしれませんが、Jestは実行速度が遅くなってしまう印象なので実行速度を早めたい場合はJest以外のテストフレームワークを使ってみるのもいいかもしれません。

12
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
6