Récapitulatif de la plaisanterie : qu'est-ce qui s'exécute quand ?-js tutoriel-php.cn

Récapitulatif de la plaisanterie : qu'est-ce qui s'exécute quand ?

王林

Libérer： 2024-07-19 15:59:30

original

1112 Les gens l'ont consulté

Jest Recap: What Runs When?

TL;DR : ordre d'exécution

Tout ce qui se trouve au niveau supérieur et dans les blocs décrire() (où les blocs décrire() sont essentiellement des IIFE)
avantTout()
1. haut niveau
2. 1er niveau décrire()
3. Nième niveau décrire()
avantChaque()
1. haut niveau
2. 1er niveau décrire()
3. Nième niveau décrire()
test()
aprèsChaque()
1. Nième niveau décrire()
2. 1er niveau décrire()
3. haut niveau
après tout()
1. Nième niveau décrire()
2. 1er niveau décrire()
3. haut niveau

Clause de non-responsabilité

Je suppose que vous avez une compréhension de base de la plaisanterie et des tests unitaires. Je n'expliquerai pas la signification des crochets. Il s’agit plutôt d’un article de type aide-mémoire/référence.

Il y a des règles

Au début, la plaisanterie semble faire les choses comme par magie. Qu'est-ce qui est exécuté quand ? Mais si vous y réfléchissez une minute, cela devient ~~évident~~ moins déroutant.

Peut-être que ces « règles » simples peuvent vous aider :

Chaque fichier est exécuté indépendamment : rien de ce que vous faites dans A.test.js n'affecte B.test.js. (sauf si vous commencez à accéder à des ressources externes)
Les rappels décrire() sont exécutés immédiatement.
les hooks (beforeAll/afterAll, beforeEach/afterEach) sont exécutés de la portée externe (niveau supérieur/module) à la portée interne (décrire).

Exemple de base

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

Copier après la connexion

Voici le résultat (après avoir supprimé les autres sorties) :

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

Copier après la connexion

Ce qui se produit?

Tout ce qui se trouve au niveau supérieur et dans les rappels de description est exécuté immédiatement :

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

Copier après la connexion

beforeAll et afterAll au niveau supérieur constituent une "accolade" autour de tous les tests. Chacun n'a été exécuté qu'une seule fois.

[...]

./beforeAll

[...]

./afterAll

Copier après la connexion

./describe(*)/beforeAll et ./describe(*)/afterAll sont une accolade autour de tous les tests dans qui décrivent le rappel. Chacun n'a été exécuté qu'une seule fois.

[...]

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

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

[...]

Copier après la connexion

beforeEach et afterEach sont des accolades autour de chaque test. Le niveau supérieur est le corset extérieur. Le niveau de description est l'orthèse intérieure.

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

Copier après la connexion

Version avancée

Il s'agit d'un exemple avancé avec un bloc de description imbriqué. Il produit des résultats XML pour souligner la nature hiérarchique des étapes d'exécution.

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

Copier après la connexion

Voici le résultat après quelques nettoyages et formatages :

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

Copier après la connexion

C'est tout ce qu'il y a à savoir sur l'ordre d'exécution.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!