Как сделать так, чтобы тестовое покрытие показывало все файлы vue в Vue-cli 3, используя jest

Question

У меня проблемы с настройкой Vue CLI 3 с Jest для отображения тестового покрытия. Я сделал все возможное, чтобы это работало, но оно все еще не показывается:

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 )

Ниже приведен отрывок из моей конфигурации:

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
}

Как правильно настроить Vue CLI 3 и Jest для отображения тестового покрытия?

Answer 1

Несмотря на то, что ответ @ tony19 является абсолютно верным, вам не обязательно добавлять что-либо в вашу пользовательскую конфигурацию Jest. Для проекта, созданного с помощью службы Vue CLI, просто добавление следующего сценария в package.json работало нормально, и покрытие показывается для компонентов Vue:

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

Есть дополнительные опции, которые вы можете добавить, например, изменение репортера (ов) и наличие особой конфигурации jest только для этого скрипта. Чтобы получить полный список опций, вы можете запустить в своем терминале следующую команду:

 npx vue-cli-service test:unit help

И среди этих опций вы найдете collectCoverage и collectCoverageFrom, которые могут помочь вам сохранить все в сценарии, а не иметь пользовательский файл конфигурации.

Answer 2

Если вы не используете плагин Vue CLI @vue/cli-plugin-unit-jest, вы все равно можете сгенерировать отчет о тестовом покрытии для компонентов Vue.Вы можете настроить Jest следующим образом:

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']
}

Затем вы можете сгенерировать отчет о покрытии, просто набрав npx jest.

Отчеты о покрытии будут выглядеть следующим образом:

(1) Терминал

(2) HTML

Answer 3

Jest имеет собственные средства покрытия, поэтому удалите nyc из package.json:

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

Чтобы включить покрытие Jest, установите collectCoverage и collectCoverageFrom в jest.config.js (согласно документам vue-test-utils ):

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

Запуск yarn test:unit должен выдать вывод консоли следующим образом:

GitHub demo

Также обратите внимание, что в выводе консоли Jest перечислены только файлы, содержащие исполняемый JavaScript (methods для Vue SFC). Если вы работаете с шаблоном, сгенерированным Vue CLI по умолчанию, HelloWorld.vue не содержит methods, поэтому его не будет в списке. На снимке экрана выше, я добавил неиспользуемый метод в HelloWorld.vue, чтобы продемонстрировать отчет о раскрытых строках Jest.