Comment configurer le framework de test Jest pour Laravel Mix

Cet article a été écrit pour laravel-mix@0.11.3 et jest@19.0.2

Mix est un nouvel outil qui vous aide à créer des actifs frontaux pour votre application Laravel sans toucher directement à l'API Webpack.

En réalité, il faut déployer beaucoup d’efforts pour personnaliser Mix et l’intégrer à d’autres outils. Nous allons voir ici comment configurer le framework de test populaire Jest.

Pourquoi plaisanter?

Jusqu'à ce que vous utilisiez des composants de fichier unique Vue, Jest ne demande que peu d'effort à configurer. Le support de Facebook bénéficie également d'une belle dynamique dans le secteur. Il s'agit d'un cadre de test officiel dans Create React App. Jest a des fonctionnalités populaires telles que les notifications de système d'exploitation, la mise en cache, etc. fournies prêtes à l'emploi et les versions récentes s'avèrent très rapides.

La première étape consiste à installer les dépendances nécessaires:

npm installer --save-dev jest babel-jest

Ajoutons ensuite Jest à nos scripts npm. Bien que la structure définisse déjà la variable NODE_ENV à tester, nous la transmettons ici explicitement afin que sa valeur ne soit pas remplacée par inadvertance par votre environnement:

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

À ce stade, vous pouvez déjà exécuter Jest et si babel-jest transformer est installé, il tentera même de transpiler vos fichiers JavaScript, mais notre configuration n’est pas encore tout à fait là.

Tout d’abord, nous voulons nous assurer que Jest ne traite pas les fichiers inutiles en ajoutant les lignes suivantes à votre package.json:

"plaisanterie": {
  "roots": [" / resources / assets / js /"]
}

Cela demandera à Jest de ne rechercher que les fichiers dans un répertoire spécifique.

Deuxièmement, babel-jest ne sait pas vraiment comment procéder car Laravel Mix n’expose pas ses paramètres babel. Plongeons-nous dans la source en sélectionnant les paramètres nécessaires dans le fichier .babelrc de notre projet:

À présent, c’est un fichier que babel-jest récupérera automatiquement lors des transformations. Toutefois, cela ne fonctionnera pas, car Webpack 2.0+ pourra traiter les modules ES6, mais pas Node.js. Il se peut qu’il existe d’autres options que nous voudrons peut-être appliquer spécifiquement à nos tests. Ce que nous voulons utiliser, c’est l’option env .babelrc qui fusionnera les configurations pour un environnement spécifique:

Avec la configuration ci-dessus, il est dit à babel-jest de transformer les instructions d'importation en demandes CommonJS.

Si, par hasard, vous avez déjà remplacé votre .babelrc et utilisé la proposition de syntaxe d'importation dynamique, assurez-vous de le remplacer par babel-plugin-dynamic-import-node pour l'environnement de test.

Vous êtes maintenant prêt à utiliser Jest dans votre application Laravel. Vous pouvez suivre leur documentation pour plus de détails. Pour exécuter des tests, exécutez:

test npm

Le reste de cet article aborde certaines des astuces les plus populaires lors de l'utilisation de Jest. N'hésitez pas à ignorer ces sections jusqu'à ce que vous rencontriez des problèmes connexes.

Comment informer Jest de resol.modules

Disons que vous frappez un mur avec des importations comme celle-ci:

importer mes composants de './../../../MyComponent.vue'

et veulent quelque chose de plus élégant. Vous configurez l'instance Webpack sous-jacente dans Laravel Mix pour rechercher des modules partagés dans le répertoire de choix en plus des nœuds_modules habituels:

.webpackConfig ({
  résoudre: {
    modules: [path.resolve (__ dirname, 'ressources / assets / js / modules'), 'node_modules']
  }
})

Ensuite, en supposant que votre composant se trouve directement sous le répertoire modules, vous pouvez maintenant l'importer de manière plus succincte:

importer MyComponents à partir de 'MyComponent.vue'

Pour que Jest soit au courant de ces manigances, ajoutez simplement l’option moduleDirectories à votre configuration package.json:

"plaisanterie": {
  "roots": [" / resources / assets / js /"],
  "moduleDirectories": ["resources / assets / js / modules", "node_modules"]
}

Comment se moquer des actifs statiques?

Bien que cela soit peu probable, vous pouvez rencontrer des fichiers de test qui importent des actifs statiques. Nous pouvons en toute sécurité se moquer de ces atouts comme ceci:

{
  "plaisanterie": {
    "roots": [" / resources / assets / js /"],
    "moduleNameMapper": {
      "\\. (jpg | jpeg | png | gif | eot | otf | svg | ttf | woff | woff2) $": " /resources/assets/js/jest/mocks/fileMock.js",
      "\\. (css | less | scss) $": " /resources/assets/js/jest/mocks/styleMock.js"
    }
  }
}

Et les fichiers simulés eux-mêmes:

ressources / assets / js / jest / mocks / styleMock.js

module.exports = {}

ressources / assets / js / jest / mocks / fileMock.js

module.exports = 'test-file-stub'

Comment tester les composants de fichier unique Vue (expérimental)

Nous allons nous inspirer de cet article étonnant écrit par Cristian Carlesso.

Tout d’abord, créez un transformateur personnalisé vue-jest.js dans le répertoire resources / assets / js / jest / transformers:

Ensuite, éditez votre package.json jest config:

"plaisanterie": {
  "roots": [" / resources / assets / js /"],
  "moduleNameMapper": {
    "^ vue $": "vue / dist / vue.common.js"
  },
  "transformer": {
    "^. + \\. vue $": " /resources/assets/js/jest/transformers/vue-jest.js",
    "^. + \\. js $": "babel-jest"
  },
  "coveragePathIgnorePatterns": [" / resources / assets / js / composants"]
}

Ici, nous demandons à Jest de transformer les fichiers vue et de résoudre Vue en une construction complète au lieu de la construction (uniquement parce que c'est ce que fait Laravel Mix).

Notez que nous ignorons également les composants Vue lors de la couverture de code. C’est à peu près tout ce qu’il faut faire pour que Jest ne le fasse pas correctement. Cependant, si vous savez comment résoudre ce problème, n'hésitez pas à commenter.

C'est tout. Profitez de votre flux de tests unitaires avec Laravel Mix and Jest.