Kuidas seadistada JavaScripti testimine Rails 5.1 koos Webpackeri ja Jestiga

Rails 5.1 tarnitakse koos Webpackeriga, mis võimaldab minusugustel dinosaurustel vaikselt vaikselt sisse sumisevasse JavaScripti - eks, ECMAScript - tõrvakaevu, mida tänapäeval ujuvad jahedad aastatuhanded.

Tundub, et Webpackeriga testimise seadistamise kohta pole palju dokumente, nii et arvasin, et tahaksin kroonikat, kuidas mul see lõpuks tööle sai. Otsustasin proovida Jesti eriti ilma põhjuseta, ehkki ma (jahmun!), Et ma Reacti ei kasuta.

Kohustustest loobumine: olen selle asja osas kindlasti uustulnuk. See kõik tundub natuke nagu JSONist ja punktfailidest valmistatud Rube Goldbergi masin. Nii et ma ei imesta (või solvu), kui inimesed ütlevad mulle, et siin kirjeldatu saavutamiseks on parem viis. Tegelikult oleks mul hea meel teada saada, kuidas seda seadistust paremaks muuta.

1. Installige Jest

Esiteks installige Jest, käivitades selle projekti Rails juurest.

lõnga lisada --dev jest

Tavaline on skripti seadistamine, mis täidab teie testkäske. Lisage see oma faili package.json:

"skriptid": {
  "test": "jest"
},

ja saate katseid lõngatestiga läbi viia. Muidugi võiks sel hetkel lihtsalt lõnga joosta, kuid see on lihtsalt tobe. Miks sa seda teeksid.

2. Ütle Jestile, kust leida oma testid

Üks asi, mis Jesti puhul on tore, on see, kui agressiivselt ta teie projektist proovifaile otsib. Näiteks Jest käivitab kõik failid, mis vastavad teie projekti projektile * .spec.js või * .test.js ... mis tähendab, et konfiguratsiooni / webpack / test.js käivitatakse testina, pannes Jesti teatama tõrkest.

Minu OCD aju ei saa hakkama sellise lahtise-hane sobitamisega, seetõttu kasutasin juurte konfiguratsiooni suvandit, et Jest käitaks ainult testfaile, mis leitakse spec / javascripti kataloogist. Kui olete minuga sarnane, lisage see saidile package.json:

"jest": {
  "juured": [
    "spec / javascript"
  ]
},

Senist seadistust saate kontrollida testfaili torkimisega ja selle käivitamisega. Looge spec / javascript / sum.spec.js lihtsa testiga:

test ('1 + 1 võrdub 2', () => {
  oodata (1 + 1) .toBe (2);
});

Nüüd tehke lõngaproov ja peaksite nägema rohelist väljundit ning tundma seda tuttavat ja rahuldavat Pavlovi vastust, mida ainult TDD pakub.

Värskendus: avastasin, et rakenduse / javascripti lisamine juurtele võimaldas mul kasutada lippu --watchAll, mis töötab testide ajal, kui failid muutuvad (näiteks Guard). Kombineerige lisatud zeni lisamisega - teatage lipuga trying Proovin ikkagi välja mõelda, kuidas saada - vaht tööle ...

3. Häälestage paabel

Kasutan ka lahedaid asju, näiteks importi, mis ei paistnud toimivat. Minu spetsifikatsioonide käitamine tõstis selle vea:

SyntaxError: ootamatu tokeni import

See üllatas mind - tõenäoliselt olen konfigureerinud midagi valesti. Kuid lõpuks sain Babeli tööle, installeerides paar lisapaketti:

lõnga lisamine --dev babel-jest babel-preset-es2015

ja eelseade "es2015" (rasvases kirjas) lisamine minu .babelrc faili:

{
  "eelseaded": ["es2015",
    ["env", {
      "moodulid": vale,
      "eesmärgid": {
        "brauserid": "> 1%",
        "uglify": tõsi
      },
      "useBuiltIns": tõsi
    }]
  ],
"pluginad": [
    "süntaks-dünaamiline-import",
    ["teisendusklassi omadused", {"spec": true}]
  ]
}

4. Teatage Jestile, kus teie moodulid elavad

Mulle ei meeldinud mõte kirjutada oma moodulitest kogu moodulite tee välja. Seadistust moduleDirectories saab kasutada Jestile öeldes, kust mooduleid otsida, nii et osutasin rakenduses / javascriptis oma lähtefailidele. Minu Jesti konfiguratsioon paketis.json nägi välja selline:

"jest": {
  "juured": [
    "spec / javascript"
  ],
  "moduleDirectories": [
    "node_modules",
    "rakendus / javascript"
  ]
},

Märkus. ModuleDirectories edastatud väärtus alistab vaikimisi, seega peate lisama ka kataloogi node_modules.

Lõpptulemus on päris armas ja sobib väga täpselt minu RSpeci seadistusega. Näiteks võib teil olla lähtefailirakendus / javascript / Dinosaur.js:

eksporti vaikeklass Dinosaurus {
  hankige isExtinct () {
    tagasi tõsi;
  }
}

ja sobivat testfaili spec / javascript / Dinosaur.spec.js:

importida Dinosaurus 'Dinosaurusest';
test ('Dinosaurused on kustunud', () => {
  oodata ((uus Dinosaurus) .isExtinct) .toBeTruthy ();
});

ja lõngatest Just Works ™

BONUSE RING: häälestustestide moodustus Jesti testide käivitamiseks

Kasutasin pidevas integreerimises Codeshipi ja arvasin, et oleks nõtke, kui see lisaks RSpec-komplektile käivitaks ka minu Jesti komplekti. Selgub, et see oli ülilihtne.

Lisasin selle oma häälestuskäskudesse:

nvm install 8.4.0
lõnga paigaldada

Ja see minu testkäskudele:

lõngaproov

Neato

Kokkuvõte

Nagu mainitud, olen seda kõike tõenäoliselt teinud ümarlaua korras. Mulle meeldiks tagasiside või soovitused inimestelt, kes tegelikult teavad, mida nad teevad! Jäta kommentaar või säutsu @kylefox.