Kuinka Jest-testauskehys määritetään Laravel Mixille

Tämä artikkeli on kirjoitettu osoitteille laravel-mix@0.11.3 ja jest@19.0.2

Mix on uusi työkalu, jonka avulla voit rakentaa käyttöliittymän resursseja Laravel-sovellukselle koskettamatta suoraan Webpack-sovellusliittymää.

Vaikka se on jonkin verran mielipidettä, totuudessa se ei vie paljon vaivaa muokataksesi Mixiä tai integroidaksesi sitä muihin työkaluihin. Tässä tarkastellaan kuinka määrittää suosittu testauskehys Jest.

Miksi Jest?

Kunnes törmäät Vue-yksittäisiin tiedostokomponentteihin, Jest määrittelee vähiten vaivaa. Sillä on myös hieno vauhti toimialalla Facebook-tuella ja se on virallinen testauskehys Create React App -sovelluksessa. Jestissä on suosittuja ominaisuuksia, kuten käyttöjärjestelmäilmoitukset, välimuisti jne., Jotka toimitetaan laatikosta, ja viimeisimpien versioiden on osoitettu olevan erittäin nopea.

Ensimmäinen askel on asentaa tarvittavat riippuvuudet:

npm install --save-dev jest babel-jest

Lisäämme sitten Jestin npm-skripteihimme. Vaikka kehys asettaa NODE_ENV-muuttujan jo testattavaksi, välitämme sen täällä nimenomaisesti, jotta ympäristö ei vahingossa korvaa sen arvoa:

"test": "cross-env NODE_ENV = test jest",
"tdd": "npm run test - --watch - notify",

Tässä vaiheessa voit jo suorittaa Jestin ja kun babel-jest-muuntaja on asennettu, se yrittää jopa siirtää JavaScript-tiedostojasi, mutta asennusohjelmamme eivät ole vielä siellä.

Ensinnäkin haluamme varmistaa, että Jest ei käsittele tarpeettomia tiedostoja lisäämällä seuraavat rivit pakettiin.json:

"jest": {
  "juuret": [" / resurssit / varat / js /"]
}

Tämä ohjeistaa Jestia etsimään tiedostoja vain tietystä hakemistosta.

Toiseksi babel-jest ei oikeastaan ​​tiedä miten edetä, koska Laravel Mix ei paljasta babel-asetuksiaan. Sukellaan lähteeseen vetämällä tarvittavat asetukset projektiimme .babelrc:

Nyt tämä on tiedosto, jonka babel-jest noutaa automaattisesti muutoksia tehdessään. Tämä ei kuitenkaan toimi, koska vaikka Webpack 2.0+ pystyy käsittelemään ES6-moduuleja, Node.js ei voi, ja voi olla muita vaihtoehtoja, joita saatamme haluta soveltaa erityisesti testeihimme. Haluamme käyttää .babelrc env -vaihtoehtoa, joka yhdistää tietyn ympäristön kokoonpanot:

Yllä olevalla asennuksella babel-jestin käsketään muuntaa tuontilausekkeet CommonJS vaativat.

Jos olet sattumalta ohittanut .babelrc-tiedoston ja käyttäessäsi dynaamista tuontisyntaksi-ehdotusta, muista korvata se babel-plugin-dynamic-import-node -solmulla testiympäristössä.

Nyt olet valmis käyttämään Jestiä Laravel-sovelluksessasi. Voit seurata heidän dokumenttejaan saadaksesi lisätietoja. Suorita testit suorittamalla:

npm-testi

Jäljempänä tämä artikkeli käsittelee joitain suosituimpia temppuja ja juttuja Jestia käytettäessä. Ohita nämä osiot, kunnes kohtaat niihin liittyviä ongelmia.

Kuinka saada Jest tietoiseksi resol.modules

Oletetaan, että osut seinään tuonnilla näin:

Tuo MyComponents hakemistosta './../../../MyComponent.vue'

ja haluat jotain tyylikästä. Määrität alla olevan Webpack-esiintymän Laravel Mixissä etsimään jaettuja moduuleja valitusta hakemistosta tavallisten node_modules-lisäksi:

.webpackConfig ({
  ratkaista: {
    moduulit: [polku.resolve (__ dirname, 'resurssit / resurssit / js / moduulit'), 'node_modules']
  }
})

Sitten olettaen, että komponentti sijaitsee suoraan moduulien hakemistossa, voit nyt tuoda sen ytimekkäämmällä tavalla:

Tuo MyComponents-sovellus MyComponent.vue-sivulta

Lisää Jest tietoisuuteen näistä shenaniganista lisäämällä moduleDirectories-vaihtoehto paketti.json-asetukseesi:

"jest": {
  "juuret": [" / resurssit / varat / js /"],
  "moduleDirectories": ["resurssit / omaisuus / js / moduulit", "node_modules"]
}

Kuinka pilkata staattista omaisuutta?

Ehkä epätodennäköistä, saatat joutua testaamaan tiedostoja, jotka tuovat staattisia omaisuuksia. Voimme pilkata näitä varoja turvallisesti näin:

{
  "jest": {
    "juuret": [" / resurssit / varat / js /"],
    "moduleNameMapper": {
      "\\. (jpg | jpeg | png | gif | eot | otf | svg | ttf | woff | woff2) $": " /resources/assets/js/jest/mocks/fileMock.js",
      "\\. (css | vähemmän | scss) $": " /resources/assets/js/jest/mocks/styleMock.js"
    }
  }
}

Ja mock-tiedostot itse:

resurssit / varat / js / leikillään / pilkkaa / styleMock.js

module.exports = {}

resurssit / varat / js / leikillään / pilkkaa / fileMock.js

module.exports = 'test-tiedosto-tynkä'

Kuinka testata Vue-yksittäiset tiedostokomponentit (kokeellinen)

Hyödynnämme tätä hämmästyttävää artikkelia, jonka on kirjoittanut Cristian Carlesso.

Luo ensin mukautettu vue-jest.js -muuntaja resurssien / omaisuus / js / jest / muuntajat -hakemistoon:

Muokkaa sitten pack.json jest config:

"jest": {
  "juuret": [" / resurssit / varat / js /"],
  "moduleNameMapper": {
    "^ vue $": "vue / dist / vue.common.js"
  },
  "muuntaa": {
    "^. + \\. vue $": " /resources/assets/js/jest/transformers/vue-jest.js",
    "^. + \\. js $": "babel-jest"
  },
  "kattavuusPathIgnorePatterns": [" / resurssit / varat / js / komponentit"]
}

Täällä opastamme Jestia muuttamaan vue-tiedostot ja ratkaisemaan Vue-versio täysimääräiseksi, vain suorituksenaikaisen rakennuksen sijasta (koska tätä Laravel Mix tekee konepellin alla).

Huomaa, että huomioimme myös Vue-komponentit suorittaessamme koodin kattavuutta. Se on melko paljon pyyhkäisy mattoratkaisun alla tunnetulle ongelmalle, koska Jest ei tee sitä oikein. Jos kuitenkin tiedät kuinka korjata tämä, voit kommentoida.

Se siitä. Nauti yksikkötestauksen työnkulusta Laravel Mixin ja Jestin avulla.