Comment écrire des tests unitaires pour Javascript dans Laravel
Récemment, l’entreprise dans laquelle je travaille a choisi de se recentrer un peu sur Javascript afin de créer des interfaces plus dynamiques pour les utilisateurs. Nous avons donc fait le choix de VueJs afin de développer des composantes pour les pages HTML.
Quand il arrive de tester nos fonctions, classes et composantes, nous étions un peu confus. Après une longue réflexion, nous avons finalement choisi Jest et cela marche parfaitement.
Dans cet article, je vous montrerai comment utiliser Jest pour écrire des tests unitaires de vos codes écrits en Javascript dans Laravel.
L’environnement avant toute chose
Étant donné que votre application tourne déjà, vous devez modifier un peu vos fichiers de configuration pour utiliser Jest. Ne vous inquiétez pas, c’est assez facile.
- Installer VueJs et vue-template-compiler
2. Installer Babel
Créer un fichier .babelrc à la racine de votre projet avec ces lines de code
3. Installer Jest et ses outils
Dans le fichier package.json créer ajouter la clé “test” avec pour valeur “jest” à l’intérieur de la sectionn “scripts”. N’oubliez pas aussi de créer une section spécifique pour jest.
Tester votre code
Allez à resources/js.
Voici la structure de fichiers que nous allons utiliser
Dans cette section, nous allons écrire des tests unitaires pour une classe et une composantes Vue.
Tester notre classe “Person”
Tester notre composante “myFirstComponent”
Traquer des bugs
Requires Babel “7.0.0–0”, but was loaded with “6.26.3”. If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version.
Inspect the stack trace of this error to look for the first entry that doesn’t mention “@babel/core” or “babel-core” to see what is calling Babel.
Si vous avez ce message quand vous lancer les tests de vos composantes, mettez à jour babel-core à 7.0.0-bridge.0.
Derniers mots
Si vous voulez tester votre code à chaque commande npm run dev, vous pouvez remplacer la clé “development” dans package.js par la line suivante:
Si vous voulez vous plonger dans l’apprentissage de Jest, vous pouvez lire la documentation : https://jestjs.io/docs/en/getting-started
