mocha における describe it before beforeEach after afterEach の実行順序

はじめに

この記事について

Javascript のテストフレームワーク mocha における describe it before beforeEach after afterEach の実行順序について調べてみました。

環境

• Windows 7 Professional x86
• mocha 5.0.1

結果

5行で

• describe は上から順番に実行される
• it は上から順番に実行される
• beforeEach, afterEach は 各 it の前後 で実行される
• before は describe の最初に一度だけ 実行される
• after は describe の最後に一度だけ 実行される

実行結果

$ mocha test.js
describe(1)-top
describe(1)-bottom
describe(2)-top
describe(2)-bottom

  DESCRIBE-1
describe(1)-before
describe(1)-beforeEach
describe(1)-it(1)
    √ テスト1
describe(1)-afterEach
describe(1)-beforeEach
describe(1)-it(2)
    √ テスト2
describe(1)-afterEach
describe(1)-after

  DESCRIBE-2
describe(2)-before
describe(2)-beforeEach
describe(2)-it(1)
    √ テスト1
describe(2)-afterEach
describe(2)-beforeEach
describe(2)-it(2)
    √ テスト2
describe(2)-afterEach
describe(2)-after

実験で書いたテストコード

describe('DESCRIBE-1', function () {
    console.log('describe(1)-top');

    before(function(){
        console.log('describe(1)-before');
    });

    beforeEach(function(){
        console.log('describe(1)-beforeEach');
    });

    after(function(){
        console.log('describe(1)-after');
    });

    afterEach(function(){
        console.log('describe(1)-afterEach');
    });

    it('テスト1', function(){
        console.log('describe(1)-it(1)');
    });

    it('テスト2', function(){
        console.log('describe(1)-it(2)');
    });

    console.log('describe(1)-bottom');
});

describe('DESCRIBE-2', function () {
    console.log('describe(2)-top');

    before(function(){
        console.log('describe(2)-before');
    });

    beforeEach(function(){
        console.log('describe(2)-beforeEach');
    });

    after(function(){
        console.log('describe(2)-after');
    });

    afterEach(function(){
        console.log('describe(2)-afterEach');
    });

    it('テスト1', function(){
        console.log('describe(2)-it(1)');
    });

    it('テスト2', function(){
        console.log('describe(2)-it(2)');
    });

    console.log('describe(2)-bottom');
});