ネストした構造でいくつかの beforeEach を書いた際などに、どういった順序でそれらが実行されるのか理解できていなかったのでここで確認、整理します。
テストコード #
このコードを実行することで、各々の処理がどのタイミングで実行されるのか確認してみます。
sample.test.js
describe("describe 第１階層", () => {
beforeAll(() => console.log("beforeAll: 第１階層"));
afterAll(() => console.log("afterAll: 第１階層"));
beforeEach(() => console.log("beforeEach: 第１階層"));
afterEach(() => console.log("afterEach: 第１階層"));
test("test: 第１階層：A", () => console.log("test: 第１階層：A"));
describe("describe 第２階層", () => {
beforeAll(() => console.log("beforeAll: 第２階層"));
afterAll(() => console.log("afterAll: 第２階層"));
beforeEach(() => console.log("beforeEach: 第２階層"));
afterEach(() => console.log("afterEach: 第２階層"));
test("test: 第２階層：A", () => console.log("test: 第２階層：A"));
describe("describe 第３階層", () => {
beforeAll(() => console.log("beforeAll: 第３階層"));
afterAll(() => console.log("afterAll: 第３階層"));
beforeEach(() => console.log("beforeEach: 第３階層"));
afterEach(() => console.log("afterEach: 第３階層"));
test("test: 第３階層：A", () => console.log("test: 第３階層：A"));
test("test: 第３階層：B", () => console.log("test: 第３階層：B"));
});
test("test: 第２階層：B", () => console.log("test: 第２階層：B"));
});
test("test: 第１階層：B", () => console.log("test: 第１階層：B"));
});
実行結果ログ #
実行結果のログをそのまま貼り付けています。このログは読み飛ばしてください。次項でこの内容をもとに整理しています。
console.log
beforeAll: 第１階層
at Object.log (sample.test.js:2:27)
console.log
beforeEach: 第１階層
at Object.log (sample.test.js:4:28)
console.log
test: 第１階層：A
at Object.log (sample.test.js:7:38)
console.log
afterEach: 第１階層
at Object.log (sample.test.js:5:27)
console.log
beforeAll: 第２階層
at Object.log (sample.test.js:10:29)
console.log
beforeEach: 第１階層
at Object.log (sample.test.js:4:28)
console.log
beforeEach: 第２階層
at Object.log (sample.test.js:12:30)
console.log
test: 第２階層：A
at Object.log (sample.test.js:15:40)
console.log
afterEach: 第２階層
at Object.log (sample.test.js:13:29)
console.log
afterEach: 第１階層
at Object.log (sample.test.js:5:27)
console.log
beforeAll: 第３階層
at Object.log (sample.test.js:18:31)
console.log
beforeEach: 第１階層
at Object.log (sample.test.js:4:28)
console.log
beforeEach: 第２階層
at Object.log (sample.test.js:12:30)
console.log
beforeEach: 第３階層
at Object.log (sample.test.js:20:32)
console.log
test: 第３階層：A
at Object.log (sample.test.js:23:42)
console.log
afterEach: 第３階層
at Object.log (sample.test.js:21:31)
console.log
afterEach: 第２階層
at Object.log (sample.test.js:13:29)
console.log
afterEach: 第１階層
at Object.log (sample.test.js:5:27)
console.log
beforeEach: 第１階層
at Object.log (sample.test.js:4:28)
console.log
beforeEach: 第２階層
at Object.log (sample.test.js:12:30)
console.log
beforeEach: 第３階層
at Object.log (sample.test.js:20:32)
console.log
test: 第３階層：B
at Object.log (sample.test.js:24:42)
console.log
afterEach: 第３階層
at Object.log (sample.test.js:21:31)
console.log
afterEach: 第２階層
at Object.log (sample.test.js:13:29)
console.log
afterEach: 第１階層
at Object.log (sample.test.js:5:27)
console.log
afterAll: 第３階層
at Object.log (sample.test.js:19:30)
console.log
beforeEach: 第１階層
at Object.log (sample.test.js:4:28)
console.log
beforeEach: 第２階層
at Object.log (sample.test.js:12:30)
console.log
test: 第２階層：B
at Object.log (sample.test.js:27:40)
console.log
afterEach: 第２階層
at Object.log (sample.test.js:13:29)
console.log
afterEach: 第１階層
at Object.log (sample.test.js:5:27)
console.log
afterAll: 第２階層
at Object.log (sample.test.js:11:28)
console.log
beforeEach: 第１階層
at Object.log (sample.test.js:4:28)
console.log
test: 第１階層：B
at Object.log (sample.test.js:30:38)
console.log
afterEach: 第１階層
at Object.log (sample.test.js:5:27)
console.log
afterAll: 第１階層
at Object.log (sample.test.js:3:26)
PASS ./sample.test.js
describe 第１階層
✓ test: 第１階層：A (6 ms)
✓ test: 第１階層：B (4 ms)
describe 第２階層
✓ test: 第２階層：A (13 ms)
✓ test: 第２階層：B (4 ms)
describe 第３階層
✓ test: 第３階層：A (7 ms)
✓ test: 第３階層：B (8 ms)
Test Suites: 1 passed, 1 total
Tests: 6 passed, 6 total
実行結果の整理その１ #
実行結果のログの内容について、出力順番はそのままに、それぞれの処理がどのテストに対応して実行されているものか、コメントをつけて整理しています。
beforeAll: 第１階層 # 第１階層の beforeAll
# test: 第１階層：A に関する beforeEach と afterEach
beforeEach: 第１階層
test: 第１階層：A # 👈 テスト
afterEach: 第１階層
beforeAll: 第２階層 # 第２階層の beforeAll
# test: 第２階層：A に関する beforeEach と afterEach
beforeEach: 第１階層
beforeEach: 第２階層
test: 第２階層：A # 👈 テスト
afterEach: 第２階層
afterEach: 第１階層
beforeAll: 第３階層 # 第３階層の beforeAll
# test: 第３階層：A に関する beforeEach と afterEach
beforeEach: 第１階層
beforeEach: 第２階層
beforeEach: 第３階層
test: 第３階層：A # 👈 テスト
afterEach: 第３階層
afterEach: 第２階層
afterEach: 第１階層
# test: 第３階層：B に関する beforeEach と afterEach
beforeEach: 第１階層
beforeEach: 第２階層
beforeEach: 第３階層
test: 第３階層：B # 👈 テスト
afterEach: 第３階層
afterEach: 第２階層
afterEach: 第１階層
afterAll: 第３階層 # 第３階層の afterAll
# test: 第２階層：B に関する beforeEach と afterEach
beforeEach: 第１階層
beforeEach: 第２階層
test: 第２階層：B # 👈 テスト
afterEach: 第２階層
afterEach: 第１階層
afterAll: 第２階層 # 第２階層の afterAll
# test: 第１階層：B に関する beforeEach と afterEach
beforeEach: 第１階層
test: 第１階層：B # 👈 テスト
afterEach: 第１階層
afterAll: 第１階層 # 第１階層の afterAll
実行結果の整理その２ #
これまでに得られた内容をコード上に示してみます。上から順番に前処理や後処理そして 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
});