Heim  >  Artikel  >  Web-Frontend  >  Scherzrückblick: Was läuft wann?

Scherzrückblick: Was läuft wann?

王林
王林Original
2024-07-19 15:59:301054Durchsuche

Jest Recap: What Runs When?

TL;DR: Ausführungsbefehl

  1. Alles auf der obersten Ebene und in beschreiben()-Blöcken (wobei beschreiben()-Blöcke im Grunde genommen IIFEs sind)
  2. beforeAll()
    1. Top-Level
    2. 1. Ebene beschreiben()
    3. N-te Ebene beschreiben()
  3. beforeEach()
    1. Top-Level
    2. 1. Ebene beschreiben()
    3. N-te Ebene beschreiben()
  4. test()
  5. afterEach()
    1. N-te Ebene beschreiben()
    2. 1. Ebene beschreiben()
    3. Top-Level
  6. schließlich()
    1. N-te Ebene beschreiben()
    2. 1. Ebene beschreiben()
    3. Top-Level

Haftungsausschluss

Ich gehe davon aus, dass Sie über ein grundlegendes Verständnis von Scherz und Unit-Tests verfügen. Ich werde die Bedeutung der Haken nicht erklären. Dies ist eher ein Spickzettel-/Referenzbeitrag.

Es gibt Regeln

Auf den ersten Blick scheint Scherz Dinge auf magische Weise zu bewirken. Was wird wann ausgeführt? Aber wenn man eine Minute darüber nachdenkt, wird es offensichtlich weniger verwirrend.

Vielleicht helfen diese einfachen „Regeln“:

  1. Jede Datei wird unabhängig ausgeführt: Nichts, was Sie in A.test.js tun, wirkt sich auf B.test.js aus. (es sei denn, Sie beginnen, auf externe Ressourcen zuzugreifen)
  2. write()-Rückrufe werden sofort ausgeführt.
  3. Hooks (beforeAll/afterAll, beforeEach/afterEach) werden vom äußeren Bereich (oberste Ebene/Modul) zum inneren Bereich (beschreiben) ausgeführt.

Grundlegendes Beispiel

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

Dies ist das Ergebnis (nachdem ich andere Ausgaben entfernt habe):

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

Was geschieht?

Alles auf der obersten Ebene und in Beschreibungsrückrufen wird sofort ausgeführt:

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

beforeAll und afterAll auf der obersten Ebene bilden eine „Klammer“ um alle Tests. Jeder wird nur einmal ausgeführt.

[...]

./beforeAll

[...]

./afterAll

./describe(*)/beforeAll und ./describe(*)/afterAll sind eine geschweifte Klammer um alle Tests in die den Rückruf beschreiben. Jeder wird nur einmal ausgeführt.

[...]

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

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

[...]

beforeEach und afterEach sind geschweifte Klammern um jeden Test. Die oberste Ebene ist die äußere Klammer. Die Beschreibungsebene ist die innere geschweifte Klammer.

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

Erweiterte Version

Dies ist ein erweitertes Beispiel mit einem verschachtelten Beschreibungsblock. Es erzeugt XML-Ergebnisse, um die hierarchische Natur der Ausführungsschritte hervorzuheben.

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

Dies ist die Ausgabe nach einiger Bereinigung und Formatierung:

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

Das ist alles, was Sie über den Hinrichtungsbefehl wissen müssen.

Das obige ist der detaillierte Inhalt vonScherzrückblick: Was läuft wann?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Shims in der WebentwicklungNächster Artikel:Shims in der Webentwicklung