Kuinka asentaa JavaScript-testaus Rails 5.1: ssä Webpackerin ja Jestin avulla

Rails 5.1 toimitetaan Webpackerilla, joka antaa minun kaltaisille dinosauruksille mahdollisuuden kahlaa nojaan JavaScript-virheeseen - virhe, ECMAScript - tervakuoppaan, joka viileä vuosituhatvuosi ui näinä päivinä.

Webpackerilla tehtävän testauksen asennusta koskevista ohjeista ei tunnu olevan paljon, joten arvelin kirjoittavani aikataulun, kuinka onnistin lopulta saamaan sen toimimaan. Päätin kokeilla Jestiä ilman erityisiä syitä, vaikka en (huohottaa!) En käytä Reaktia.

Vastuuvapauslauseke: Olen ehdottomasti newb kyseisten juttujen suhteen. Se kaikki tuntuu vähän kuin RSON Goldberg -kone, joka on rakennettu JSON: stä ja pistekopioista. Joten en ole yllättynyt (tai loukkaantunut), kun ihmiset kertovat minulle, että on parempi tapa saavuttaa jotain mitä olen kuvaillut täällä. Itse asiassa minusta olisi hienoa tietää, kuinka tätä asennusta voitaisiin parantaa.

1. Asenna Jest

Asenna ensin Jest suorittamalla tämä Rails-projektin juuresta.

lanka lisää --dev jest

Yleinen käytäntö on asettaa komentosarja, joka suorittaa testikomennot. Lisää tämä package.json-tiedostoosi:

"skriptit": {
  "testi": "jest"
},

ja voit suorittaa testisi lankakokeen avulla. Tietenkin, tässä vaiheessa voit yksinkertaisesti ajaa lankafestivaaleja, mutta se on vain typerää. Miksi tekisit niin.

2. Kerro Jestille, mistä testit löytyvät

Yksi Jestistä on hienoa, kuinka aggressiivisesti se etsii testitiedostoja projektistasi. Esimerkiksi Jest suorittaa projektissa kaikki tiedostot, jotka vastaavat * .spec.js- tai * .test.js-tiedostoa, mikä tarkoittaa, että config / webpack / test.js suoritetaan testinä, jolloin Jest ilmoittaa virheestä.

OCD-aivoni eivät pysty käsittelemään tällaista löysä-hanhi-vastaavuutta, joten käytin juuri-asetusvaihtoehtoa sanomaan Jestille suorittavan vain testitiedostot, jotka löytyvät spec / javascript-hakemistosta. Jos olet kuin minä, lisää tämä pakettiin.json:

"jest": {
  "juuret": [
    "Spec / javascript"
  ]
},

Voit varmistaa toistaiseksi asennuksen pistämällä testitiedoston ja suorittamalla sen. Luo spec / javascript / sum.spec.js yksinkertaisella testillä:

testi ('1 + 1 on yhtä suuri kuin 2', () => {
  odottaa (1 + 1) .toBe (2);
});

Suorita nyt langatesti ja sinun pitäisi nähdä vihreää tulosta ja tuntea niin tuttu, tyydyttävä Pavlovian vastaus, että vain TDD voi tarjota.

Päivitys: Huomasin, että sovelluksen / javascriptin lisääminen juuriin antoi minulle mahdollisuuden käyttää --watchAll-lippua, joka suorittaa testit aina tiedostojen muuttuessa (kuten Guard). Yhdistä - ilmoita lippu lisättyyn zeniin Yritän silti selvittää miten saada --kello toimimaan…

3. Aseta Babel

Käytän myös hienoja juttuja, kuten tuontia, mikä ei tuntunut toimivan laatikosta. Omien tietojen suorittaminen herätti tämän virheen:

SyntaxError: Odottamaton tokenin tuonti

Tämä yllättyi minusta - todennäköisesti olen määrittänyt jotain väärin. Mutta sain lopulta Babelin työskentelemään asentamalla muutama lisäpaketti:

lanka lisäys --dev babel-jest babel-preset-es2015

ja lisäämällä esiasetus "es2015" (lihavoitu) .babelrc-tiedostooni:

{
  "esiasetukset": ["es2015",
    ["env", {
      "moduulit": väärä,
      "Kohteet": {
        "selaimet": "> 1%",
        "ugglify": totta
      },
      "useBuiltIns": totta
    }]
  ],
"plugins": [
    "Syntaksin dynaaminen-tuonti",
    ["muunnosluokan ominaisuudet", {"spec": true}]
  ]
}

4. Kerro Jestille missä moduulit asuvat

En pitänyt siitä ajatuksesta, että kirjoittaisin koko polun moduuleihini spesifikaatioistani. ModuleDirectories -asetuksella voidaan kertoa Jestille, mistä moduuleja etsiä, joten osoitin sen lähdetiedostoihini sovelluksessa / javascript. Jest-kokoonpanoni paketissa.json lopulta näytti tältä:

"jest": {
  "juuret": [
    "Spec / javascript"
  ],
  "moduleDirectories": [
    "Node_modules",
    "App / javascript"
  ]
},

Huomaa: moduleDirectories-tietokantaan välitetty arvo ohittaa oletuksen, joten sinun on sisällytettävä myös hakemisto node_modules.

Lopputulos on aika suloinen ja vastaa hyvin RSpec-määritystäni. Sinulla voi olla esimerkiksi lähdetiedostosovellus / javascript / Dinosaur.js:

vie oletusluokka Dinosaurus {
  hanki isExtinct () {
    palata totta;
  }
}

ja vastaava testitiedosto spec / javascript / Dinosaur.spec.js:

tuo dinosaurus tuotteesta 'Dinosaur';
testi ('Dinosaurukset ovat sukupuuttoon sukupuuttoon'), () => {
  odottaa ((uusi dinosaurus). on poistunut) .toBeTruthy ();
});

ja lankatesti Just Works ™

BONUS ROUND: Asennuskoodia Jest-testien suorittamiseen

Käytän Codeship-ohjelmaa jatkuvassa integroinnissa ja ajattelin, että olisi haastavaa saada se käyttämään Jest-sarjaa RSpec-sarjan lisäksi. Osoittautui, että se oli erittäin helppoa.

Lisäsin tämän asennuskomentoihini:

nvm asentaa 8.4.0
lanka asentaa

Ja tämä testikomentoihini:

lankatesti

Neato

Yhteenveto

Kuten mainittiin, olen todennäköisesti tehnyt kaiken tämän pyöreällä tavalla. Haluaisin palautetta tai ehdotuksia ihmisiltä, ​​jotka tietävät mitä tekevät! Jätä kommentti tai twiitti @kylefox.