Kuidas seadistada Jest testimisraamistikku Laravel Mix jaoks

See artikkel on kirjutatud aadressidele laravel-mix@0.11.3 ja jest@19.0.2

Mix on uus tööriist, mis aitab teil luua Laraveli rakenduse esivara vara ilma Webpack API-d otseselt puudutamata.

Ehkki see on mõneti arvamusel, ei võta see Mix'i kohandamiseks ega teiste tööriistadega integreerimiseks kuigi palju pingutusi. Siin vaatleme, kuidas konfigureerida populaarne testimisraamistik Jest.

Miks just Jest?

Kuni olete Vue üksikute failikomponentide juurde sattunud, võtab Jest seadistamiseks kõige vähem vaeva. Sellel on ka Facebooki taustaga tööstuses hoogne hoog ning see on ametlik testimisraamistik rakenduses Create React App. Jestil on karbist väljas populaarsed funktsioonid, näiteks OS-i teatised, vahemällu salvestamine jne. Viimased versioonid on osutunud väga kiireks.

Esimene samm on vajalike sõltuvuste installimine:

npm install --save-dev jest babel-jest

Lisagem siis Jest meie npm skriptidesse. Kuigi raamistik seab NODE_ENV muutuja juba katsetamiseks, edastame selle siin selgesõnaliselt, et teie keskkond ei saaks selle väärtust kogemata üle vaadata:

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

Praegu saate Jesti juba käivitada ja kui installitud trafo on babel-jest, proovib ta teie JavaScripti faile isegi ümber paigutada, kuid meie seadistused pole veel selles kohas.

Esiteks tahame veenduda, et Jest ei töötle tarbetuid faile, lisades teie paketile.json järgmised read:

"jest": {
  "juured": [" / ressursid / varad / js /"]
}

See juhendab Jestit otsima faile ainult konkreetsest kataloogist.

Teiseks, babel-jest ei tea tegelikult, kuidas edasi minna, kuna Laravel Mix ei paljasta oma paabeli seadeid. Sukeldugem allikasse, kui vajalike sätete lisamine meie projekti .babelrc:

Nüüd on see fail, mille babel-jest teisendeid tehes automaatselt üles võtab. Kuid see ei toimi, kuna kuigi Webpack 2.0+ saab töödelda ES6 mooduleid, ei saa Node.js ja võib olla ka muid võimalusi, mida võiksime rakendada spetsiaalselt oma testide jaoks. Mida me tahame kasutada, on .babelrc env suvand, mis ühendab konkreetse keskkonna konfiguratsioonid:

Ülaltoodud häälestuse korral käsib babel-jest muuta impordiavaldused CommonJS-i nõudmiseks.

Kui olete mingil juhul ületanud oma .babelrc ja kasutate dünaamilise impordi süntaksi ettepanekut, asendage see kindlasti testimiskeskkonnaga babel-plugin-dynamic-import-node.

Nüüd olete valmis kasutama Jestit oma Laraveli rakenduses. Lisateavet leiate nende dokumentidest. Testide tegemiseks käivitage:

npm test

Ülejäänud see artikkel räägib Jesti kasutamisel mõnedest populaarsematest trikkidest ja hangetest. Võite need jaotised vahele jätta, kuni ilmnevad seotud probleemid.

Kuidas teavitada Jestit lahendamismoodulitest

Oletame, et tabasite sellise impordiga seina:

impordi MyComponents kaustast ./../../../MyComponent.vue

ja soovite midagi elegantsemat. Seadistate Laravel Mixis oleva Webpacki eksemplari, et lisaks tavalistele node_modulesile otsida valitud kataloogist ka jagatud mooduleid:

.webpackConfig ({
  lahenda: {
    moodulid: [path.resolve (__ dirname, 'ressursid / varad / js / moodulid'), 'node_modules']
  }
})

Kui eeldada, et komponent asub otse moodulite kataloogis, saate selle nüüd kokkuvõtlikumalt importida:

impordi MyComponents saidist 'MyComponent.vue'

Jesti teadvustamiseks nendest shenaniganidest lisage oma paketti.json konfiguratsiooni lihtsalt suvand moduleDirectories:

"jest": {
  "juured": [" / ressursid / varad / js /"],
  "moduleDirectories": ["ressursid / varad / js / moodulid", "node_modules"]
}

Kuidas pilkata staatilisi varasid?

Ehkki ebatõenäoline, võite proovida staatilisi varasid importivaid faile. Saame neid varasid ohutult mõnitada:

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

Ja piltide failid ise:

ressursid / varad / js / jest / mocks / styleMock.js

moodul.exports = {}

ressursid / varad / js / jest / mocks / fileMock.js

module.exports = 'test-file-stub'

Vue üksikfaili komponentide testimine (katseline)

Inspiratsiooni ammutab see hämmastav artikkel, mille on kirjutanud Cristian Carlesso.

Esiteks looge kohandatud vue-jest.js trafo ressursside / varade / js / jest / transformers kataloogis:

Seejärel muutke oma paketti.json jest config:

"jest": {
  "juured": [" / ressursid / varad / js /"],
  "moduleNameMapper": {
    "^ vue $": "vue / dist / vue.common.js"
  },
  "teisendama": {
    "^. + \\. vue $": " /resources/assets/js/jest/transformers/vue-jest.js",
    "^. + \\. js $": "babel-jest"
  },
  "leviPathIgnorePatterns": [" / ressursid / varad / js / komponendid"]
}

Siin juhendame Jestit muutma vue-faile ja lahendama Vue-vorming täisversiooniks, mitte ainult tööajaga ehitamiseks (sest just seda teeb Laravel Mix kapoti all).

Pange tähele, et koodide katmise ajal eirame ka Vue-komponente. See on üsna tavaline vaipalahendus tuntud probleemile, kui Jest ei tee seda korralikult. Kui teate aga, kuidas seda parandada, kommenteerige julgelt.

See selleks. Nautige oma üksuse testimise töövoogu Laravel Mixi ja Jesti abil.