TL;DR：執行順序
- 頂層和describe() 區塊中的所有內容（其中describe() 區塊基本上是IIFE）
-
之前所有（）
- 頂
- 第一級描述()
- 第N級describe()
-
在每個()之前
- 頂
- 第一級描述()
- 第N級describe()
- 測試()
-
每個之後（）
- 第N級describe()
- 第一級描述()
- 頂
-
畢竟（）
- 第N級describe()
- 第一級描述()
- 頂
免責聲明
我假設您對笑話和單元測試有基本的了解。我不會解釋鉤子的意思。這更像是備忘單/參考類型的貼文。
有規則
乍一看，笑話似乎有神奇的作用。什麼時候執行什麼？但如果你想一想，它就會顯而易見不那麼令人困惑。
也許這些簡單的「規則」有幫助：
- 每個檔案都是獨立執行的：您在 A.test.js 中所做的任何操作都不會影響 B.test.js。 （除非你開始存取外部資源）
-
describe() 回呼會立即執行。
- 鉤子（beforeAll/afterAll、beforeEach/afterEach）從外部作用域（頂級/模組）到內部作用域（描述）執行。
基本範例
console.log("./<start>");
beforeAll(() => {
console.log("./beforeAll");
})
beforeEach(() => {
console.log("./beforeEach");
})
afterAll(() => {
console.log("./afterAll");
})
afterEach(() => {
console.log("./afterEach");
})
describe("foo", () => {
console.log("./describe(foo)/<start>");
beforeAll(() => {
console.log("./describe(foo)/beforeAll");
})
beforeEach(() => {
console.log("./describe(foo)/beforeEach");
})
afterAll(() => {
console.log("./describe(foo)/afterAll");
})
afterEach(() => {
console.log("./describe(foo)/afterEach");
})
test("testFoo", () => {
console.log("./describe(foo)/test(testFoo)");
})
console.log("./describe(foo)/<end>");
})
describe("bar", () => {
console.log("./describe(bar)/<start>");
beforeAll(() => {
console.log("./describe(bar)/beforeAll");
})
beforeEach(() => {
console.log("./describe(bar)/beforeEach");
})
afterAll(() => {
console.log("./describe(bar)/afterAll");
})
afterEach(() => {
console.log("./describe(bar)/afterEach");
})
test("testBar", () => {
console.log("./describe(bar)/test(testBar)");
})
test("testOtherBar", () => {
console.log("./describe(bar)/test(testOtherBar)");
})
console.log("./describe(bar)/<end>");
})
console.log("./<end>");
登入後複製
這是結果（在我刪除其他輸出後）：
./<start>
./describe(foo)/<start>
./describe(foo)/<end>
./describe(bar)/<start>
./describe(bar)/<end>
./<end>
./beforeAll
./describe(foo)/beforeAll
./beforeEach
./describe(foo)/beforeEach
./describe(foo)/test(testFoo)
./describe(foo)/afterEach
./afterEach
./describe(foo)/afterAll
./describe(bar)/beforeAll
./beforeEach
./describe(bar)/beforeEach
./describe(bar)/test(testBar)
./describe(bar)/afterEach
./afterEach
./beforeEach
./describe(bar)/beforeEach
./describe(bar)/test(testOtherBar)
./describe(bar)/afterEach
./afterEach
./describe(bar)/afterAll
./afterAll
登入後複製
會發生什麼事？
頂層和描述回呼中的所有內容都會立即執行：
./<start>
./describe(foo)/<start>
./describe(foo)/<end>
./describe(bar)/<start>
./describe(bar)/<end>
./<end>
[...]
登入後複製
頂層的 beforeAll 和 afterAll 是所有測試的「支撐」。每個只執行一次。
[...]
./beforeAll
[...]
./afterAll
登入後複製
./describe(*)/beforeAll 和 ./describe(*)/afterAll 是 that 描述回調中所有測試的大括號。每個只執行一次。
[...]
./describe(foo)/beforeAll
[...]
./describe(foo)/afterAll
./describe(bar)/beforeAll
[...]
./describe(bar)/afterAll
[...]
登入後複製
beforeEach 和 afterEach 是每個測試周圍的大括號。最頂層是外層大括號。描述等級是內部大括號。
[...]
./beforeEach
./describe(*)/beforeEach
[...]
./describe(*)/afterEach
./afterEach
[...]
登入後複製
高級版
這是一個帶有巢狀描述區塊的高階範例。它產生 XMLish 結果來強調執行步驟的分層性質。
console.log("<top-level>");
beforeAll(() => {
console.log("<all>");
})
beforeEach(() => {
console.log("<each>");
})
afterAll(() => {
console.log("</all>");
})
afterEach(() => {
console.log("</each>");
})
describe("foo", () => {
console.log("<describe id=\"foo\">");
beforeAll(() => {
console.log("<all in=\"foo\">");
})
beforeEach(() => {
console.log("<each in=\"foo\">");
})
afterAll(() => {
console.log("</all> <!-- in=\"foo\" -->");
})
afterEach(() => {
console.log("</each> <!-- in=\"foo\" -->");
})
test("testFoo", () => {
console.log("<test in=\"foo\" id=\"testFoo\" />");
})
console.log("</describe> <!-- id=\"foo\" -->");
})
describe("bar", () => {
describe("barinner", () => {
console.log("<describe id=\"barinner\">");
beforeAll(() => {
console.log("<all in=\"barinner\">");
})
beforeEach(() => {
console.log("<each in=\"barinner\">");
})
afterAll(() => {
console.log("</all> <!-- in=\"barinner\" -->");
})
afterEach(() => {
console.log("</each> <!-- in=\"barinner\" -->");
})
test("testBarInner", () => {
console.log("<test in=\"barinner\" id=\"testBarInner\" />");
})
console.log("</describe> <!-- id=\"barinner\" -->");
})
console.log("<describe id=\"bar\">");
beforeAll(() => {
console.log("<all in=\"bar\">");
})
beforeEach(() => {
console.log("<each in=\"bar\">");
})
afterAll(() => {
console.log("</all> <!-- in=\"bar\" -->");
})
afterEach(() => {
console.log("</each> <!-- in=\"bar\" -->");
})
test("testBar", () => {
console.log("<test in=\"bar\" id=\"testBar\" />");
})
test("testOtherBar", () => {
console.log("<test in=\"bar\" id=\"testOtherBar\" />");
})
console.log("</describe> <!-- id=\"bar\" -->");
})
console.log("</top-level>");
登入後複製
這是經過一些清理和格式化後的輸出：
<top-level>
<describe id="foo">
</describe> <!-- id="foo" -->
<describe id="barinner">
</describe> <!-- id="barinner" -->
<describe id="bar">
</describe> <!-- id="bar" -->
</top-level>
<all>
<all in="foo">
<each>
<each in="foo">
<test in="foo" id="testFoo" />
</each> <!-- in="foo" -->
</each>
</all> <!-- in="foo" -->
<all in="bar">
<all in="barinner">
<each>
<each in="bar">
<each in="barinner">
<test in="barinner" id="testBarInner" />
</each> <!-- in="barinner" -->
</each> <!-- in="bar" -->
</each>
</all> <!-- in="barinner" -->
<each>
<each in="bar">
<test in="bar" id="testBar" />
</each> <!-- in="bar" -->
</each>
<each>
<each in="bar">
<test in="bar" id="otherBar" />
</each> <!-- in="bar" -->
</each>
</all> <!-- in="bar" -->
</all>
登入後複製
這就是關於執行順序的全部資訊。
以上是笑話回顧：什麼時候運行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
