Rekap Jest: Apa Berlaku Bila?

TL;DR: Perintah Pelaksanaan

1. Semuanya di peringkat atas dan dalam blok describe() (di mana blok describe() pada dasarnya adalah IIFE)
2. sebelumSemua()
   1. peringkat atas
   2. perihalan tahap 1()
   3. Tahap kesembilan menerangkan()
3. beforeEach()
   1. peringkat atas
   2. perihalan tahap 1()
   3. Tahap kesembilan menerangkan()
4. ujian()
5. afterEach()
   1. Tahap kesembilan menerangkan()
   2. perihalan tahap 1()
   3. peringkat atas
6. afterAll()
   1. Tahap kesembilan menerangkan()
   2. perihalan tahap 1()
   3. peringkat atas

Penafian

Saya menganggap anda mempunyai pemahaman asas tentang jenaka dan ujian unit. Saya tidak akan menerangkan maksud mata kail. Ini lebih kepada jenis helaian tipu/rujukan siaran.

Terdapat Peraturan

Pada mulanya gurauan seolah-olah melakukan perkara secara ajaib. Apa yang akan dilaksanakan apabila? Tetapi jika anda memikirkannya sebentar, ia menjadi jelas kurang mengelirukan.

Mungkin "peraturan" mudah ini membantu:

1. Setiap fail dilaksanakan secara berasingan: tiada apa yang anda lakukan dalam A.test.js mempengaruhi B.test.js. (melainkan anda mula mengakses sumber luaran)
2. describe() panggil balik dilaksanakan serta-merta.
3. cangkuk (beforeAll/afterAll, beforeEach/afterEach) dilaksanakan dari skop luar (tahap atas/modul) ke skop dalam (huraikan).

Contoh Asas

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

Inilah hasilnya (selepas saya mengeluarkan output lain):

./<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

Apa yang berlaku?

Semua pada panggilan balik peringkat atas dan dalam huraikan dilaksanakan serta-merta:

./<start>
./describe(foo)/<start>
./describe(foo)/<end>
./describe(bar)/<start>
./describe(bar)/<end>
./<end>
[...]

sebelumSemua dan selepasSemua di peringkat teratas ialah "pendakap" di sekeliling semua ujian. Setiap satu dilaksanakan sekali sahaja.

[...]

./beforeAll

[...]

./afterAll

./describe(*)/beforeAll dan ./describe(*)/afterAll ialah pendakap di sekeliling semua ujian dalam yang menerangkan panggilan balik. Setiap satu dilaksanakan sekali sahaja.

[...]

./describe(foo)/beforeAll
[...]
./describe(foo)/afterAll

./describe(bar)/beforeAll
[...]
./describe(bar)/afterAll

[...]

sebelumSetiap dan selepasSetiap adalah pendakap di sekeliling setiap ujian. Peringkat atas ialah pendakap luar. Tahap penerangan ialah pendakap dalaman.

[...]
./beforeEach
./describe(*)/beforeEach
[...]
./describe(*)/afterEach
./afterEach
[...]

Versi Lanjutan

Ini ialah contoh lanjutan dengan blok huraikan bersarang. Ia menghasilkan hasil XMLish untuk menekankan sifat hierarki langkah pelaksanaan.

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

Ini adalah output selepas beberapa pembersihan dan pemformatan:

<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>

Itu sahaja yang perlu diketahui tentang perintah pelaksanaan.

Atas ialah kandungan terperinci Rekap Jest: Apa Berlaku Bila?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!