Comment faire pour que la couverture du test affiche tous les fichiers vue dans Vue-cli 3 en utilisant jest

Question

J'ai du mal à essayer de configurer Vue CLI 3 avec Jest pour afficher la couverture du test. J'ai fait tout mon possible pour que cela fonctionne, mais il ne montre toujours aucune couverture:

Ran all test suites.
----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |        0 |        0 |        0 |                   |
----------|----------|----------|----------|----------|-------------------|

=============================== Coverage summary ===============================
Statements   : Unknown% ( 0/0 )
Branches     : Unknown% ( 0/0 )
Functions    : Unknown% ( 0/0 )
Lines        : Unknown% ( 0/0 )

Ci-dessous un extrait de ma configuration:

jest.config.js:

module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  transformIgnorePatterns: ['<rootDir>/node_modules/'],
  testURL: 'http://localhost/'
}

package.json:

....
"scripts": {
  "test:unit": "nyc vue-cli-service test:unit"
},
"nyc": {
  "check-coverage": true,
  "per-file": true,
  "lines": 90,
  "statements": 90,
  "functions": 90,
  "branches": 90,
  "include": [
    "src/**/*.{js,vue}"
  ],
  "exclude": [
    "src/*.js"
  ],
  "reporter": [
    "lcov",
    "text",
    "text-summary"
  ],
  "extension": [
    ".js",  
    ".vue"
  ],
  "verbose": true,
  "cache": true,
  "all": true
}

Comment configurer correctement Vue CLI 3 et Jest pour afficher la couverture du test?

Answer 1

Jest a ses propres fonctionnalités de couverture, donc supprimez nyc de package.json:

"scripts": {
  // "test:unit": "nyc vue-cli-service test:unit" // DELETE
  "test:unit": "vue-cli-service test:unit"
},
// "nyc": {...} // DELETE

Pour activer la couverture de Jest, définissez collectCoverage et collectCoverageFrom dans jest.config.js (selon le vue-test-utils documents ):

collectCoverage: true,
collectCoverageFrom: [
  'src/**/*.{js,vue}',
  '!src/main.js', // No need to cover bootstrap file
],

Fonctionnement yarn test:unit devrait produire une sortie console comme celle-ci:

démo GitHub

Notez également que la sortie de la console Jest ne répertorie que les fichiers contenant du JavaScript exécutable (methods pour Vue SFC). Si vous travaillez avec la valeur par défaut Vue Modèle généré par CLI, HelloWorld.vue ne contient pas de methods, il ne sera donc pas répertorié. Dans la capture d'écran ci-dessus, j'ai ajouté une méthode inutilisée à HelloWorld.vue pour montrer le rapport sur les lignes découvertes de Jest.

Answer 2

Bien que la réponse de @ tony19 soit parfaitement valide, vous n'avez pas nécessairement besoin d'ajouter quoi que ce soit dans votre configuration de plaisanterie personnalisée. Pour un projet construit avec le service CLI Vue CLI, il suffit d'ajouter le script suivant dans le package.json a bien fonctionné et la couverture s'affiche pour les composants Vue:

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

Il existe des options supplémentaires que vous pouvez ajouter, telles que la modification du ou des reporter (s) et une configuration Jest distincte uniquement pour ce script. Pour obtenir la liste complète des options, vous pouvez exécuter la commande suivante dans votre terminal:

 npx vue-cli-service test:unit help

Et, parmi ces options, vous trouverez collectCoverage et collectCoverageFrom qui peuvent vous aider à tout conserver dans le script, plutôt que d'avoir un fichier de configuration personnalisé.

Answer 3

Si vous n'utilisez pas Vue Plugin CLI @vue/cli-plugin-unit-jest, vous pouvez toujours générer un rapport de couverture de test pour les composants Vue. Vous pouvez configurer Jest de la manière suivante:

jest.config.js

module.exports = {
  moduleFileExtensions: ['js', 'json', 'vue'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.vue$': 'vue-jest'
  },
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{js,vue}', '!src/main.js']
}

Ensuite, vous pouvez générer le rapport de couverture en exécutant simplement npx jest.

Les rapports de couverture ressembleront à ci-dessous:

(1) Terminal

(2) HTML