Perchè testare?

Testare il proprio codice con sistemi automatici è sempre una buona pratica. Ormai per me e per la mia squadra di lavoro fa parte della normale routine. Soprattutto con Ruby On Rails. Purtroppo finora non siamo altrettanto bravi per quanto riguarda il frontend. Purtroppo (o per fortuna) il frontend sta diventanto sempre più importante e non si può dormire sonni troppo tranquilli in assenza di un ambiente di sviluppo privo di test automatici. Spesso ci sono bug che si ripresentano, situazioni difficili da decodificare, soldi che vengono spesi senza freno alla rincorsa dell’ultimo bug emerso. Proprio per evitare tutto questo sto cercando di capire come testare anche i componenti vue. Questo articolo rappresenta quindi i miei appunti di questo percorso fino a qui.

La complessità della interfaccia di significatocanzone in particolare rende ormai necessario iniziare a testare i componenti vue. Testare è sempre importante. Ancora di più è importante quando i giochi si fanno difficili. Quindi gli appunti che sto scrivendo si riferiscono soprattutto al sito sopracitato.

Quale percorso devo usare per importare un componente?

Dopo aver configurato con Vue-Jest il proprio ambiente di test è importante capire come importare i componenti all’interno dell’ambiente di test.

Per indicare le cartelle in modo corretto è importante configurare package.json.

"jest": {
  "moduleFileExtensions": [
    "js",
    "json",
    "vue"
  ],
  "transform": {
    ".*\\.(vue)$": "vue-jest",
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
  },
  "moduleDirectories": [
    "node_modules",
    "frontend/components_vue"
  ],
  "roots": [
    "test/js"
  ]
}

In particolare per poter importare i componenti è molto importante indicare moduleDirectories. Questa chiave permette infatti di indicare le directory da usare come riferimento nel momento dell’utilizzo del metodo import.

Di seguito un esempio:

import BtnLikeSubcomment from 'subcomments/btn_like_subcomment'

Questo significa che lo script js andrà a cercare il componente nelle due directory sopra indicate (node_modules e frontend/components_vue).

Un libro che ho iniziato a leggere e che mi sembra molto completo è testing vue js applications.