Nieuw Vue project starten met Vue CLI en unit testen met Mocha

In deze post leg ik uit hoe je een Vue project opzet (zonder Laravel) en hoe je unit testen kan gebruiken met het Mocha test framework.

Nieuw Vue.js project opzetten

Heb je de Vue.js CLI tool nog niet geinstalleerd, doe dit (eenmalig/globaal) dan via:

npm install -g @vue/cli

Ga naar de directory waar je een nieuw Vue.js project wilt starten, voer daar het volgende in:

vue create <project/foldernaam>

Je krijgt nu een keuze menu, kies voor de eerste optie (klik op enter)

Server starten

Nadat de bestanden zijn gedownload kan je dit nieuwe Vue.js project starten, voer het volgende in:

npm run serve

Het project zal nu je browser te zien zijn op, http://localhost:8080

Unit testen met Mocha

Mocha is een Javascript test framework, we gaan deze toevoegen in het project. Ik gebruik de @vue/cli-plugin-unit-mocha plugin, installeer deze door het volgende in te voeren:

vue add unit-mocha

Default / eerste test

Standaard komt Vue CLI al met een standaard unit testen en in package.json staat ook al een npm commando om deze uit te voeren

"test:unit": "vue-cli-service test:unit",

Je kan het volgende uitvoeren om deze test uit te voeren

npm run test:unit

Als uitkomst zou het volgende moeten verschijnen.

---

Watcher

Als je aan het ontwikkelen bent wil je niet na elke aanpassing steeds naar de terminal en de test uitvoeren. Met het -w commando zeg je 'voer de test nogmaals uit na een wijziging in de code.

 "test:unit": "vue-cli-service test:unit -w",

---

Server starten + opstarten testen

Voordat je gaat developen moet je de server opstarten en ook een npm commando voor het testen. Dit wil ik automatiseren, door dit te kunnen doen met 1 npm commando. Hiervoor heb je wel een npm package nodig, https://www.npmjs.com/package/npm-run-all Installeren:

npm install npm-run-all --save-dev

En zo ziet het eruit in mijn composer package:

"dev": "npm-run-all --parallel test:unit serve"

Om de Vue js server op te starten + unit testen

npm run dev