Jest: beforeAll, beforeEach, beforeAll, beforeEach の実行タイミング

Jest: beforeAll, beforeEach, beforeAll, beforeEach の実行タイミング

August 3, 2023

ネストした構造でいくつかの beforeEach を書いた際などに、どういった順序でそれらが実行されるのか理解できていなかったのでここで確認、整理します。

テストコード #

このコードを実行することで、各々の処理がどのタイミングで実行されるのか確認してみます。

sample.test.js

describe('describe 第1階層', () => {
  beforeAll(() => console.log('beforeAll: 第1階層'));
  afterAll(() => console.log('afterAll: 第1階層'));
  beforeEach(() => console.log('beforeEach: 第1階層'));
  afterEach(() => console.log('afterEach: 第1階層'));

  test('test: 第1階層:A', () => console.log('test: 第1階層:A'));

  describe('describe 第2階層', () => {
    beforeAll(() => console.log('beforeAll: 第2階層'));
    afterAll(() => console.log('afterAll: 第2階層'));
    beforeEach(() => console.log('beforeEach: 第2階層'));
    afterEach(() => console.log('afterEach: 第2階層'));

    test('test: 第2階層:A', () => console.log('test: 第2階層:A'));

    describe('describe 第3階層', () => {
      beforeAll(() => console.log('beforeAll: 第3階層'));
      afterAll(() => console.log('afterAll: 第3階層'));
      beforeEach(() => console.log('beforeEach: 第3階層'));
      afterEach(() => console.log('afterEach: 第3階層'));

      test('test: 第3階層:A', () => console.log('test: 第3階層:A'));
      test('test: 第3階層:B', () => console.log('test: 第3階層:B'));
    });

    test('test: 第2階層:B', () => console.log('test: 第2階層:B'));
  });

  test('test: 第1階層:B', () => console.log('test: 第1階層:B'));
});

実行結果ログ #

実行結果のログをそのまま貼り付けています。このログは読み飛ばしてください。次項でこの内容をもとに整理しています。

console.log
  beforeAll: 第1階層

    at Object.log (sample.test.js:2:27)

console.log
  beforeEach: 第1階層

    at Object.log (sample.test.js:4:28)

console.log
  test: 第1階層:A

    at Object.log (sample.test.js:7:38)

console.log
  afterEach: 第1階層

    at Object.log (sample.test.js:5:27)

console.log
  beforeAll: 第2階層

    at Object.log (sample.test.js:10:29)

console.log
  beforeEach: 第1階層

    at Object.log (sample.test.js:4:28)

console.log
  beforeEach: 第2階層

    at Object.log (sample.test.js:12:30)

console.log
  test: 第2階層:A

    at Object.log (sample.test.js:15:40)

console.log
  afterEach: 第2階層

    at Object.log (sample.test.js:13:29)

console.log
  afterEach: 第1階層

    at Object.log (sample.test.js:5:27)

console.log
  beforeAll: 第3階層

    at Object.log (sample.test.js:18:31)

console.log
  beforeEach: 第1階層

    at Object.log (sample.test.js:4:28)

console.log
  beforeEach: 第2階層

    at Object.log (sample.test.js:12:30)

console.log
  beforeEach: 第3階層

    at Object.log (sample.test.js:20:32)

console.log
  test: 第3階層:A

    at Object.log (sample.test.js:23:42)

console.log
  afterEach: 第3階層

    at Object.log (sample.test.js:21:31)

console.log
  afterEach: 第2階層

    at Object.log (sample.test.js:13:29)

console.log
  afterEach: 第1階層

    at Object.log (sample.test.js:5:27)

console.log
  beforeEach: 第1階層

    at Object.log (sample.test.js:4:28)

console.log
  beforeEach: 第2階層

    at Object.log (sample.test.js:12:30)

console.log
  beforeEach: 第3階層

    at Object.log (sample.test.js:20:32)

console.log
  test: 第3階層:B

    at Object.log (sample.test.js:24:42)

console.log
  afterEach: 第3階層

    at Object.log (sample.test.js:21:31)

console.log
  afterEach: 第2階層

    at Object.log (sample.test.js:13:29)

console.log
  afterEach: 第1階層

    at Object.log (sample.test.js:5:27)

console.log
  afterAll: 第3階層

    at Object.log (sample.test.js:19:30)

console.log
  beforeEach: 第1階層

    at Object.log (sample.test.js:4:28)

console.log
  beforeEach: 第2階層

    at Object.log (sample.test.js:12:30)

console.log
  test: 第2階層:B

    at Object.log (sample.test.js:27:40)

console.log
  afterEach: 第2階層

    at Object.log (sample.test.js:13:29)

console.log
  afterEach: 第1階層

    at Object.log (sample.test.js:5:27)

console.log
  afterAll: 第2階層

    at Object.log (sample.test.js:11:28)

console.log
  beforeEach: 第1階層

    at Object.log (sample.test.js:4:28)

console.log
  test: 第1階層:B

    at Object.log (sample.test.js:30:38)

console.log
  afterEach: 第1階層

    at Object.log (sample.test.js:5:27)

console.log
  afterAll: 第1階層

    at Object.log (sample.test.js:3:26)

PASS  ./sample.test.js
  describe 第1階層
    ✓ test: 第1階層:A (6 ms)
    ✓ test: 第1階層:B (4 ms)
    describe 第2階層
      ✓ test: 第2階層:A (13 ms)
      ✓ test: 第2階層:B (4 ms)
      describe 第3階層
        ✓ test: 第3階層:A (7 ms)
        ✓ test: 第3階層:B (8 ms)

Test Suites: 1 passed, 1 total
Tests:       6 passed, 6 total

実行結果の整理その1 #

実行結果のログの内容について、出力順番はそのままに、それぞれの処理がどのテストに対応して実行されているものか、コメントをつけて整理しています。

beforeAll: 第1階層 # 第1階層の beforeAll

# test: 第1階層:A に関する beforeEach と afterEach
beforeEach: 第1階層
test: 第1階層:A # 👈 テスト
afterEach: 第1階層

beforeAll: 第2階層 # 第2階層の beforeAll

# test: 第2階層:A に関する beforeEach と afterEach
beforeEach: 第1階層
beforeEach: 第2階層
test: 第2階層:A # 👈 テスト
afterEach: 第2階層
afterEach: 第1階層

beforeAll: 第3階層 # 第3階層の beforeAll

# test: 第3階層:A に関する beforeEach と afterEach
beforeEach: 第1階層
beforeEach: 第2階層
beforeEach: 第3階層
test: 第3階層:A # 👈 テスト
afterEach: 第3階層
afterEach: 第2階層
afterEach: 第1階層

# test: 第3階層:B に関する beforeEach と afterEach
beforeEach: 第1階層
beforeEach: 第2階層
beforeEach: 第3階層
test: 第3階層:B # 👈 テスト
afterEach: 第3階層
afterEach: 第2階層
afterEach: 第1階層

afterAll: 第3階層 # 第3階層の afterAll

# test: 第2階層:B に関する beforeEach と afterEach
beforeEach: 第1階層
beforeEach: 第2階層
test: 第2階層:B # 👈 テスト
afterEach: 第2階層
afterEach: 第1階層

afterAll: 第2階層 # 第2階層の afterAll

# test: 第1階層:B に関する beforeEach と afterEach
beforeEach: 第1階層
test: 第1階層:B # 👈 テスト
afterEach: 第1階層

afterAll: 第1階層 # 第1階層の afterAll

実行結果の整理その2 #

これまでに得られた内容をコード上に示してみます。上から順番に前処理や後処理そして test() が実行されます。

つまり test() は上から順番に 1, 2, 3, 4, 5, 6 と実行され、その前後でコメントに書かれた前処理と後処理が実行されます。

describe('----------------', () => {
  // この describe で登録された beforeAll

  // この describe で登録された beforeEach
  test('1', () => {});
  // この describe で登録された afterEach

  describe('----------------', () => {
    // この describe で登録された beforeAll

    // 親 describe で登録された beforeEach
    // この describe で登録された beforeEach
    test('2', () => {});
    // この describe で登録された afterEach
    // 親 describe で登録された afterEach

    describe('----------------', () => {
      // この describe で登録された beforeAll

      // 親の親 describe で登録された beforeEach
      // 親 describe で登録された beforeEach
      // この describe で登録された beforeEach
      test('3', () => {});
      // この describe で登録された afterEach
      // 親 describe で登録された afterEach
      // 親の親 describe で登録された afterEach

      // 親の親 describe で登録された beforeEach
      // 親 describe で登録された beforeEach
      // この describe で登録された beforeEach
      test('4', () => {});
      // この describe で登録された afterEach
      // 親 describe で登録された afterEach
      // 親の親 describe で登録された afterEach

      // この describe で登録された afterAll
    });

    // 親 describe で登録された beforeEach
    // この describe で登録された beforeEach
    test('5', () => {});
    // この describe で登録された afterEach
    // 親 describe で登録された afterEach

    // この describe で登録された afterAll
  });

  // この describe で登録された beforeEach
  test('6', () => {});
  // この describe で登録された afterEach

  // この describe で登録された afterAll
});