Comment configurer les tests JavaScript dans Rails 5.1 avec Webpacker et Jest

Rails 5.1 est livré avec Webpacker, ce qui permet aux dinosaures comme moi de plonger tiède dans le javascript bourdonnant - euh, ECMAScript - une fosse de goudron dans laquelle nagent des millénaires fraîches.

Il ne semble pas y avoir beaucoup de documentation sur la façon de configurer les tests avec Webpacker, alors je me suis dit que je raconterais comment j'ai réussi à le faire fonctionner. J’ai décidé d’essayer Jest sans raison particulière, même si je (gasp!) N’utilise pas React.

Clause de non-responsabilité: Je suis définitivement novice dans ce domaine. Cela ressemble un peu à une machine de Rube Goldberg construite à partir de JSON et de dotfiles. Je ne serai donc pas surpris (ni offensé) quand les gens me diront qu’il ya un meilleur moyen de réaliser quelque chose que j’ai décrit ici. En fait, j'aimerais savoir comment cette configuration pourrait être améliorée.

1. Installer Jest

Commencez par installer Jest en l’exécutant à partir de la racine de votre projet Rails.

fil ajouter --dev jest

Une pratique courante consiste à configurer un script qui exécute vos commandes de test. Ajoutez ceci à votre fichier package.json:

"scripts": {
  "test": "plaisanterie"
},

et vous pourrez exécuter vos tests avec test de fil. Bien sûr, à ce stade, vous pouvez simplement exécuter une farce, mais c’est idiot. Pourquoi ferais-tu ça.

2. Dites à Jest où trouver vos tests

Une des choses intéressantes à propos de Jest est son apparence agressive pour les fichiers de test de votre projet. Par exemple, Jest exécutera tous les fichiers correspondant aux fichiers * .spec.js ou * .test.js de votre projet… ce qui signifie que config / webpack / test.js sera exécuté en tant que test, ce qui provoquera l'échec de Jest.

Mon cerveau OCD ne peut pas gérer ce type de correspondance volumineuse. J'ai donc utilisé l'option de configuration des racines pour indiquer à Jest d'exécuter uniquement les fichiers de test situés dans le répertoire spec / javascript. Si vous êtes comme moi, ajoutez ceci à package.json:

"plaisanterie": {
  "les racines": [
    "spec / javascript"
  ]
},

Vous pouvez vérifier la configuration jusqu’à présent en stubbing dans un fichier de test et en l’exécutant. Créez spec / javascript / sum.spec.js avec un test simple:

test ('1 + 1 est égal à 2', () => {
  attendre (1 + 1) .toBe (2);
});

Maintenant, lancez le test de fil et vous devriez voir une sortie verte et sentir la réponse pavlovienne familière et satisfaisante que seul le TDD peut fournir.

Mise à jour: j'ai découvert que l'ajout de app / javascript aux racines m'a permis d'utiliser l'indicateur --watchAll, qui exécute des tests chaque fois que des fichiers sont modifiés (comme Guard). Combinez avec le drapeau --notify pour plus de zen Vous essayez toujours de trouver comment faire fonctionner --watch au travail…

3. Configurer Babel

J’utilise également des outils intéressants comme l’importation, qui ne semblent pas fonctionner immédiatement. L'exécution de mes spécifications a généré cette erreur:

SyntaxError: Importation de jeton inattendue

Cela m’a surpris: il est probable que j’ai configuré quelque chose de mal. Mais j'ai fini par faire travailler Babel en installant quelques paquets supplémentaires:

fils ajouter --dev babel-jest babel-preset-es2015

et en ajoutant le préréglage "es2015" (gras) à mon fichier .babelrc:

{
  "presets": ["es2015",
    ["env", {
      "modules": faux,
      "cibles": {
        "navigateurs": "> 1%",
        "uglify": true
      },
      "useBuiltIns": true
    }]
  ],
"plugins": [
    "syntax-dynamic-import",
    ["transform-class-properties", {"spec": true}]
  ]
}

4. Dites à Jest où vivent vos modules

Je n’ai pas aimé l’idée de taper le chemin complet de mes modules à partir de mes spécifications. Le paramètre moduleDirectories peut être utilisé pour indiquer à Jest où chercher des modules. Je l'ai donc dirigé vers mes fichiers source dans app / javascript. Ma configuration Jest dans package.json a fini par ressembler à ceci:

"plaisanterie": {
  "les racines": [
    "spec / javascript"
  ],
  "moduleDirectories": [
    "node_modules",
    "app / javascript"
  ]
},

Remarque: la valeur transmise à moduleDirectories remplace la valeur par défaut. Vous devez donc également inclure le répertoire node_modules.

Le résultat final est plutôt sympathique et correspond très bien à la configuration RSpec. Par exemple, vous pouvez avoir un fichier source app / javascript / Dinosaur.js:

classe par défaut d'exportation Dinosaur {
  get isExtinct () {
    retourne vrai;
  }
}

et un fichier de test correspondant spec / javascript / Dinosaur.spec.js:

importer un dinosaure à partir de 'Dinosaure';
test ('Les dinosaures sont éteints', () => {
  attendre ((nouveau dinosaure) .isExtinct) .toBeTruthy ();
});

et test de laine Just Works ™

BONUS ROUND: Configurez Codehip pour exécuter des tests Jest

J'utilise Codeship pour une intégration continue et j'ai pensé qu'il serait intéressant de le faire exécuter ma suite Jest en plus de ma suite RSpec. Il s'est avéré que c'était super facile.

J'ai ajouté ceci à mes commandes d'installation:

nvm installer 8.4.0
fil installer

Et ceci à mes commandes de test:

test de fil

Neato

Résumé

Comme je l’ai dit, j’ai probablement fait tout cela de façon détournée. J'adorerais recevoir des commentaires ou des suggestions de gens qui savent ce qu’ils font! Laissez un commentaire ou tweetez @kylefox.