Installation

Version sémantique

Vue Test Utils suit Semantic Versioning dans tous ses projets officiels pour les fonctionnalités et le comportement documentés. Pour les comportementsnon documentés ou les internes exposés, les changements sont décrits dans les notes de version.

Utilisation des outils de Vue Test Utils avec Jest (recommandé)

Jest est un outils de test développé par Facebook, visant à fournir une solution de test unitaire avec tout le nécessaire fourni. Vous pouvez en savoir plus sur Jest en consultant sa documentation officielle.

Apprenez comment utiliser Jest pour tester les composants à fichier unique avec Vue School

Installation avec Vue CLI (recommandé)

Si vous utilisez le CLI de Vue pour construire votre projet, vous pouvez utiliser le plugin cli-plugin-unit-jest pour effectuer des tests Jest.

$ vue add unit-jest

Le plugin récupère toutes les dépendances nécessaires (y compris jest), crée un fichier jest.config.js avec des valeurs par défaut raisonnables, et génère une suite de test type.

Après cela, tout ce que vous avez à faire est d'installer Vue Test Utils.

$ npm install --save-dev @vue/test-utils

Installation Manuelle

Après avoir configuré Jest, la première chose à faire est d'installer Vue Test Utils et vue-jest pour traiter les mono-fichiers.

$ npm install --save-dev @vue/test-utils vue-jest

Ensuite, vous devez dire à Jest de transformer les fichiers .vue en utilisant .vue-jest. Vous pouvez le faire en ajoutant la configuration suivante dans le package.json ou dans un fichier de configuration de Jest :

{
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      // dire à Jest de gérer les fichiers `*.vue`
      "vue"
    ],
    "transform": {
      // traiter les fichiers `*.vue` avec `vue-jest`
      ".*\\.(vue)$": "vue-jest"
    }
  }
}

Utilisation avec Babel

Si vous voulez utiliser babel et importer des composants Vue en fichier unique avec l'extension .vue dans vos tests, vous devrez installer babel et transformer les fichiers .js avec babel-jest .

npm install --save-dev babel-jest @babel/core @babel/preset-env babel-core@^7.0.0-bridge.0

Ensuite, vous devez dire à Jest de transformer les fichiers .js en utilisant babel-jest. Vous pouvez le faire en ajoutant la configuration suivante dans package.json ou dans un [fichier de configuration Jest] autonome (https://jestjs.io/docs/en/configuration) :

{
  "jest": {
    "transform": {
      // process `*.js` files with `babel-jest`
      ".*\\.(js)$": "babel-jest"
    }
  }
}

Ensuite vous devez créer la configuration de babel en utilisant les fichiers de configuration babel.config.json ou .babelrc.json :

{
  "presets": ["@babel/preset-env"]
}

Vous pouvez également ajouter ces options à package.json :

{
  "babel": {
    "presets": ["@babel/preset-env"]
  }
}

Gestion des alias de webpack

Si vous utilisez un alias de résolution dans la configuration du webpack, par exemple l'alias @ vers /src, vous devez ajouter une configuration correspondante pour Jest également, en utilisant l'option moduleNameMapper :

{
  "jest": {
    // suportent le même@ -> cartographie des alias src dans le code source
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    }
  }
}

Couverture du code

Jest peut être utilisé pour générer des rapports de couverture dans plusieurs formats. Voici un exemple simple pour commencer :

Développez votre configuration de jest avec l'option collectCoverage, puis ajoutez le tableau collectCoverageFrom pour définir les fichiers pour lesquels les informations de couverture doivent être collectées.

{
  "jest": {
    "collectCoverage": true,
    "collectCoverageFrom": ["**/*.{js,vue}", "!**/node_modules/**"]
  }
}

Cela permettera d'établir des rapports de couverture avec les declarants de couverture par défaut. Vous trouverez une documentation supplémentaire dans la documentation de configuration de Jest, où vous trouverez des options pour les seuils de couverture, les répertoires de sortie ciles, etc.

Utilisation d'autres testeurs

Fonctionnement de Vue Test Utils avec Karma

Karma est un programme de test qui lance des navigateurs, effectue des tests et nous les rapporte.

En plus de Karma, vous pouvez utiliser le cadre Mocha pour écrire les tests, et la bibliothèque Chai pour les assertions des tests. Vous pouvez également consulter Sinon pour créer des spies et des stubs

Vous trouverez ci-dessous une configuration de base de Karma pour Vue Test Utils :

// karma.conf.js
var webpackConfig = require('./webpack.config.js')

module.exports = function (config) {
  config.set({
    frameworks: ['mocha'],
    files: ['test/**/*.spec.js'],
    webpack: webpackConfig,
    reporters: ['spec'],
    browsers: ['Chrome'],
    preprocessors: {
      '**/*.spec.js': ['webpack', 'sourcemap']
    }
  })
}

Fonctionnement de Vue Test Utils avec mocha-webpack

Une autre stratégie pour tests les SFC consiste à compiler tous nos tests via webpack et à les exécuter ensuite dans un testeur. L'avantage de cette approche est qu'elle nous donne un support complet pour toutes les fonctionnalités de webpack et du vue-loader, donc nous n'avons pas à faire de compromis dans notre code source.

Nous avons trouvé mochapack qui nous offre une expérience très simplifiée pour cette tâche particulière.

La première chose à faire est d'installer des dépendances de test :

npm install --save-dev @vue/test-utils mocha mochapack

Après avoir installer Vue Test Utils et mochapack, vous devez définir un script de test dans votre package.json :

// package.json
{
  "scripts": {
    "test": "mochapack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js"
  }
}

Fonctionnement de Vue Test Utils sans étape de construction

Alors qu'il est courant de construire des applications Vue en utilisant des outils tels que webpack pour regrouper l'application, vue-loader pour exploiter les composants de fichiers uniques, il est possible d'uiliser beaucoup moins les Vue Test Utils . Les exigences minimales pour les Vue Test Utils, en dehors de la bibliothèque elle-même, sont les suivantes :

• Vue
• vue-template-compiler
• a DOM (be it jsdom in a Node environment, or the DOM in a real browser)

Notez que jsdom (ou toute autre implémentation de DOM) doit être requis avant les Vue Test Utils, car il s'attend à ce qu'un DOM (vrai DOM, ou JSDOM) existe.