Kirjoita tulipaloisat nopeat Vue-yksikkötestit nauha- ja vuetestiohjelmilla

Tape and Vue - taivaassa tehty ottelu

Nauha on nopein kehys yksikkötestaukseen Vue-komponentteja.

Tässä artikkelissa nähdään, kuinka Vue-yksikkötestejä voi kirjoittaa nauha- ja Vue Test Utils -sovelluksilla.

Tämä opas on tarkoitettu käyttäjille, jotka tuntevat yksikkötestauksen. Jos olet uusi yksikkötestaus, tutustu yksikkötestauksen Vue-komponentteihin aloittelijoille.

Mikä on nauha?

Nauha on paljaiden luiden yksikkötestijärjestelmä, joka tuottaa testiraportin TAP (Test Anything Protocol) -muodossa.

Sillä on yksinkertainen sovellusliittymä, jonka avulla voidaan vakuuttaa, että JavaScript- ja Vue-komponentit käyttäytyvät oikein.

Miksi nauha?

Muutama viikko sitten suoritin suorituskykytestejä erilaisissa testauskehyksissä. Halusin selvittää, mikä kehys oli nopein Vue SFC: n (yksittäiset tiedostokomponentit) testaamiseen.

Lisäsin nauhan täydellisyyden vuoksi ja olin järkyttynyt siitä, että se oli nopeimmin suorittava kehys.

Testien suorittamiseksi nauhassa täytyy tehdä joitain asennuksia. Sukellaan oikein sisään.

Projektin käynnistäminen

Olen aloittanut yksinkertaisen aloitusprojektin. Gon kloonaa projekti hakemistoon:

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

cd siihen ja asenna riippuvuudet:

cd jest-vue-starter ja & npm-asennus

Suorita dev-palvelin nimellä npm run dev tarkistaaksesi sovelluksen.

Se on melko yksinkertaista. Tämän oppaan pääasia on nähdä, kuinka kasetti ja vue asetetaan, ei kirjoittaa monimutkaisia ​​testejä.

Nauha- ja tyyppikoestusohjelmien asettaminen

Ensimmäinen tehtävä on asentaa nauha- ja vuetestiohjelmat:

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

Vue Test Utils on beeta, joten meidän on pyydettävä versio nimenomaisesti

Vue Test Utils tarvitsee suorittaakseen selainympäristön. Tämä ei tarkoita, että meidän on suoritettava testit selaimessa (kiitos täysin!).

Voimme käyttää jsdomia selainympäristön luomiseen Solmussa. Se lisää globaalit muuttujat, kuten asiakirja ja ikkuna, solmuun.

jsdom on hiukan tuskallinen asennuksessa. Onneksi jokin yritteliäs solmukehittäjä teki käärekirjastoksi nimeltään browser-env.

npm install --save-dev browser-env

Meidän on suoritettava selain-env ennen testejä. Nauhan avulla voimme määrittää tiedostot, jotka ajetaan ennen testejä, teemme sen sekunnin kuluessa.

Vue SFC: t on koottava ennen niiden testaamista. Voimme käyttää vaatimuskoukkuja WebPackin suorittamiseen tiedostoissa, kun niitä vaaditaan Solmussa. Se on yksinkertainen asennus.

Asenna ensin tarvittavat laajennuskoukut ja niiden variantit:

npm asennus - säästää-dev vaatii-laajennus-koukut vaatii-laajennus-koukut-babel vaatii-laajennus-koukut-vue

Tehdään se asennustiedosto, josta puhuin aiemmin. Luo testihakemisto ja lisää setup.js-tiedosto. Viimeinen polku on test / setup.js.

Olemme melkein siellä. Hulluja juttuja.

Kirjoitakoon savutesti nauhaan. Luo testihakemistoon uusi tiedosto nimeltä List.spec.js. Koko polun testi / Lista.spec.js. Kopioi alla oleva testi tiedostoon:

Mitä siellä tapahtuu? Määrittelemme testin ja saadaan t-objekti takaisinsoittoon. Objekti t sisältää väittämismenetelmät. Sillä on myös suunnitelmamenetelmä. Meidän on kerrottava Tapelle, kuinka monta testiä sen pitäisi odottaa.

Tarvitsemme nyt skriptin testien suorittamiseen. Avaa paketti.json ja lisää tämä komentosarja:

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

Tämä käskee nauhan suorittamaan kaikki .spec-tiedostot testissä. -R käskee Teippiä vaatimaan tai suorittamaan testin / asennuksen ennen testien suorittamista.

Suorita yksikkötestit:

npm ajoyksikkö

Yay, meillä on läpäisevä testi. Mutta huorapoika - se on ruma testitulos output️

Muistatko, että mainitsin TAP: n aiemmin? Tämä on TAP sen paljaassa kunniassa. Aika ruma eikö niin? Älä huoli, voimme tarkentaa sen.

Asenna tap-spec:

npm install --save-dev tap-spec

Voimme piippata TAP-lähtömme nauhasta. Muokkaa yksikkökomentosarjaa putkistaaksesi lähtö kosketusnäyttöön:

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

Ja suorita testit uudelleen:

npm ajoyksikkö

Paljon parempi

Testien kirjoittaminen nauhan ja Vue Test Utilsin avulla

Kirjoitetaan sitten joitain testejä. Koska käytämme Vue Test Utils -laitteita, testit ovat melko luettavissa.

List.spec.js-julkaisussa kirjoitamme testin, joka välittää kohteiden ryhmän Listaan. Käytämme Vue Test Utilsin matalamenetelmää komponentin matalaan kiinnittämiseen. matala palauttaa kääreen, joka sisältää asennetun komponentin. Löydämme haun hakupuusta

  • -tunnisteita findAll: n avulla ja tarkistaaksesi kuinka monta niitä on.

    Kopioi testi alhaalta testi / tekniset tiedot / List.spec.js.

    Katso testien läpäisyä npm-ajoyksiköllä. Huomaa, että meillä on mukautettu virhesanoma out.e.equals -lausekkeelle. Oletusviestit eivät ole kovin luettavissa, joten on parempi lisätä omat viestit.

    Lisää nyt uusi tiedostotesti / tekniset tiedot / MessageToggle.spec.js. Tässä kirjoitamme testin, arvasit sen, MessageToggle.vue.

    Me kirjoitamme nyt kaksi testiä. Yksi tarkistaa, että

    -tagi antaa oletusviestin. Käytämme taas matalaa saadaksesi kääre, joka sisältää asennetun komponentin, ja palauta teksti

    ​​-tunnisteen sisällä tekstimenetelmällä.

    Toinen testi on samanlainen. Väitämme, että viesti muuttuu, kun vaihto-viestipainiketta painetaan. Tätä varten voimme käyttää liipaisumenetelmää.

    Kopioi alla oleva koodi testiin / specs / MessageToggle.spec.js:

    Suorita testit uudelleen npm-käyttöyksiköllä. Woop - vihreät testit

    Hyödyt ja haitat nauhalle

    Nyt olemme lisänneet joitain testejä, katsotaanpa teipin käytön etuja ja haittoja.

    Plussat

    • Se on nopea
       Kuten todella nopea
    • Se on yksinkertaista
       Voit lukea lähdekoodin
    • Se käyttää TAP: tä.
      Koska TAP on standardi, on paljon ohjelmia, jotka toimivat suoraan TAP: n kanssa
      Kuten tap-spec-moduuli, piippaimme vain TAP-tekstiä siihen ja se alustattiin sen meille
    • Rajoitetut väitteet
       Rajoitetut väitteet pitävät väitteesi helposti ymmärrettävinä

    Haittoja

    • Rajoitetut väitteet
       Tämä on myös huijaus
      Voit saada hyödyllisiä virheilmoituksia väitteillä, kuten hasBeenCalledWith, tätä on vaikea toistaa t.equalin kanssa.
    • Se katkeaa
      Kun suoritat yli 10000 testiä
      Et todennäköisesti osunut siihen. Mutta se saattaa olla kaupan rikkoja suurelle Vue-projektille
    • Se on perus
       Sinun on käytettävä muita kirjastoja pilkkaamiseksi, pistämiseen ja väärentämiseen

    Hyödyt ja haitat ovat melko samanlaiset. Nauha on perus, ja se voi olla hyvä tai huono asia riippuen siitä, kettä kysyt.

    Tärkeintä on kuitenkin, että se on nopea!

    Nopeat yksikkötestit ovat hyviä yksikkötestejä.

    Kehotus toimintaan

    Paras tapa kehittää uusi testijärjestelmä on käyttää sitä.

    Kokeile seuraavassa aloittamassasi Vue-projektissa Tape. Löydät väiteluettelon nauhasta README.

    Nauti

    Löydät valmis repo GitHubista.