Kirjutage lõõmavaid kiireid Vue-üksuse teste lindi- ja saitide testimisriistadega

Lint ja Vue - matš, mis on tehtud taevas

Lint on Vue-komponentide ühikatsetuse kiireim raamistik.

Selles artiklis näeme, kuidas kirjutada Vue-ühiku teste lindi ja Vue-testimisriistadega.

See õpetus on mõeldud kasutajatele, kes tunnevad ühiku testimist. Kui olete üksuste testimise alal uus, siis tutvuge üksuste testimisega Vue komponentide pakkumisega algajatele.

Mis on lint?

Lint on paljaste luude ühiktesti raamistik, mis väljastab testiprotokolli TAP (Test Anything Protocol) vormingus.

Sellel on lihtne API, et kinnitada, et teie JavaScripti ja Vue komponendid käituvad õigesti.

Miks lint?

Paar nädalat tagasi viisin läbi erinevaid jõudlusteste erinevatel testimisraamistikel. Tahtsin teada saada, milline raamistik oli Vue SFC-de (üksikute failide komponendid) testimiseks kiireim.

Lisasin lindi täielikkuse huvides ja olin šokeeritud, et see oli kõige kiiremini toimiv raamistik.

Lintides testide tegemiseks peame tegema mõned seadistused. Sukeldugem otse sisse.

Projekti alglaadimine

Alustuseks olen teinud lihtsa stardiprojekti. Pange projekt kloonima kataloogi:

git kloon https://github.com/eddyerburgh/jest-vue-starter.git

cd sinna ja installi sõltuvused:

cd jest-vue-starter ja & npm installimine

Rakenduse kontrollimiseks käivitage dev-server nagu npm run dev.

See on üsna lihtne. Selle õpetuse põhipunkt on näha, kuidas häälestada lint ja Vue, mitte kirjutada keerukaid teste.

Lindi- ja saitide testimisriistade seadistamine

Esimese asjana tuleb installida lindi- ja saitide testimisriistad:

npm install --save-dev tape @ vue / test-utils

Vue Test Utils on beetaversioon, seetõttu peame versiooni selgesõnaliselt taotlema

Vue Test Utils vajab käivitamiseks brauseri keskkonda. See ei tähenda, et peaksime testid brauseris läbi viima (tänan tänan!).

Saame kasutada jsdom-i brauseri keskkonna seadistamiseks sõlmis. See lisab sõlme globaalsed muutujad, näiteks dokumendi ja akna.

jsdom on seadistamisega pisut valus. Õnneks lõi mõni ettevõtlik sõlmede arendaja mähisekogu, mida nimetatakse brauseriks-env.

npm install --save-dev brauser-env

Enne katseid peame käivitama brauseri-env. Lint võimaldab meil määratleda failid, mida enne katseid käitada saab, seda teeme sekundi jooksul.

Vue SFC-d tuleb enne nende testimist kokku panna. Saame failide WebPacki käitamiseks failidega nõutavaid konkse kasutada siis, kui neid nõutakse sõlmis. See on lihtne seadistamine.

Esiteks installige konksud vaja-laiendused ja selle variandid:

npm install - salvesta-dev vaja-laiendus-konksud vaja-laiendus-konksud-babel vaja-laiendus-konksud-vue

Teeme selle installifaili, millest ma varem rääkisin. Looge testkataloog ja lisage fail setup.js. Viimane tee on test / setup.js.

Oleme peaaegu kohal. Hull värk.

Kirjutame Tape'is suitsutesti. Looge testkataloogis uus fail nimega List.spec.js. Terve tee test / List.spec.js. Kopeerige allolev test faili:

Mis seal toimub? Me määratleme testi ja saame t-objekti tagasihelistamisel. Objekt t sisaldab kinnitusmeetodeid. Sellel on ka plaanimeetod. Peame Tape'ile teatama, mitu testi ta peaks ootama.

Nüüd vajame testide käivitamiseks skripti. Avage pakett.json ja lisage see skript:

"unit": "tape ./test/specs/*.spec.js -r ./test/setup.js"

See käsib lindil käivitada kõiki testispetsifikaatides olevaid .spec-faile. -R käsib lindil enne meie testide käivitamist nõuda testi või seadistust või käivitada see.

Tehke ühiktestid:

npm tööseade

Yay, meil on läbitud test. Kuid vetsupoiss - see on mingi kole prooviväljund

Mäletate, et mainisin TAP-i varem? See on TAP selles alasti hiilguses. Päris kole eks? Ärge muretsege, me saame selle ära viimistleda.

Installi kraanispets:

npm install --save-dev kraani-spec

Saame oma TAP-väljundi Tape'ist juhtida. Redigeerige ühiku skripti, et väljund toru-spetsiifilistesse kanalitesse sisestada:

"unit": "lint ./test/specs/*.spec.js -r ./test/setup.js | tap-spec"

Ja viige testid uuesti läbi:

npm tööseade

Palju parem

Testide kirjutamine lindi- ja saitide testimisriistadega

Kirjutame siis mõned testid. Kuna me kasutame Vue Test Utilsi, on testid üsna loetavad.

Loendis List.spec.js kirjutame testi, mis edastab loendisse üksuste massiivi. Komponendi pinnapealseks paigaldamiseks kasutame Vue Test Utilsi madalat meetodit. pinnapealne tagastab ümbrise, mis sisaldab paigaldatud komponenti. Saame kasutada leidmisallikat, et otsida renderduspuust

  • silte ja kontrollida, kui palju neid on.

    Kopeerige test altpoolt test / specs / List.spec.js.

    Vaadake katsete läbimist npm jooksuüksusega. Pange tähele, et meil on kohandatud veateade t.equalsi väite jaoks. Vaikesõnumid pole eriti loetavad, nii et parem on lisada meie oma.

    Nüüd lisage uus failitesti / tehnilised andmed / MessageToggle.spec.js. Kirjutame siia testi, mille arvasite ära, MessageToggle.vue.

    Kirjutame nüüd kaks testi. Üks saab kontrollida, kas silt

    muudab vaikesõnumi. Paigaldatud komponenti sisaldava ümbrise saamiseks kasutame jälle pinnapealset, ja sildi

    ​​teksti tagastamiseks kasutame tekstimeetodit.

    Teine test on sarnane. Me kinnitame, et teade muutub, kui vajutate lülitusnuppu. Selleks saame kasutada päästiku meetodit.

    Kopeerige allolev kood testi / spetsifikatsiooni / MessageToggle.spec.js:

    Tehke katsed uuesti npm käivitusseadmega. Woop - rohelised testid

    Kasseti plussid ja miinused

    Nüüd oleme lisanud mõned testid, vaatame kasseti kasutamise plusse ja miinuseid.

    Plussid

    • See on kiire
       Nagu väga kiire
    • See on lihtne
       Lähtekoodi saate lugeda aadressil
    • See kasutab TAP-i.
      Kuna TAP on standard, on palju programme, mis töötavad otse TAP-iga
      Nagu tap-spec moodul, laadisime sellesse lihtsalt natuke TAP-i teksti ja see valmistas selle meie jaoks ette
    • Piiratud väited
       Piiratud väited muudavad teie väited kergesti arusaadavaks

    Miinused

    • Piiratud väited
       Ka see on miinus
      Võite saada kasulikke tõrketeateid väidetega, näiteks hasBeenCalledWith, seda on t.equaliga keeruline korrata.
    • See puruneb
      Kui läbite rohkem kui 10000 testi
      Tõenäoliselt ei saa te seda lüüa. Kuid see võib olla suure Vue projekti jaoks tehingupurustaja
    • See on põhiline
       Pilkamiseks, muigamiseks ja võltsimiseks peate kasutama teisi raamatukogusid

    Plussid ja miinused on üsna sarnased. Lint on põhiline ja see võib olla hea või halb asi sõltuvalt sellest, kellelt te küsite.

    Mis aga kõige tähtsam - see on kiire!

    Kiired ühikatsetused on head ühikatsed.

    Kutse tegevusele

    Parim viis uue testiraamistiku väljatöötamiseks on selle kasutamine.

    Järgmisel alustataval Vue-projektil proovige linti. Väidete loetelu leiate lindilt README.

    Naudi

    Lõppenud repo leiate GitHubist.