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
});