Rekap Jest: Apa Berlaku Bila?-tutorial js-php.cn

Rekap Jest: Apa Berlaku Bila?

王林

Lepaskan： 2024-07-19 15:59:30

asal

1111 orang telah melayarinya

Jest Recap: What Runs When?

TL;DR: Perintah Pelaksanaan

Semuanya di peringkat atas dan dalam blok describe() (di mana blok describe() pada dasarnya adalah IIFE)
sebelumSemua()
1. peringkat atas
2. perihalan tahap 1()
3. Tahap kesembilan menerangkan()
beforeEach()
1. peringkat atas
2. perihalan tahap 1()
3. Tahap kesembilan menerangkan()
ujian()
afterEach()
1. Tahap kesembilan menerangkan()
2. perihalan tahap 1()
3. peringkat atas
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:

Setiap fail dilaksanakan secara berasingan: tiada apa yang anda lakukan dalam A.test.js mempengaruhi B.test.js. (melainkan anda mula mengakses sumber luaran)
describe() panggil balik dilaksanakan serta-merta.
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>");

Salin selepas log masuk

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

Salin selepas log masuk

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>
[...]

Salin selepas log masuk

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

[...]

./beforeAll

[...]

./afterAll

Salin selepas log masuk

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

[...]

Salin selepas log masuk

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
[...]

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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!