테스트 적용 범위를 jest를 사용하여 Vue-cli 3의 모든 vue 파일을 표시하는 방법

테스트 적용 범위를 jest를 사용하여 Vue-cli 3의 모든 vue 파일을 표시하는 방법

나는 시험 커버리지를 보여주기 위해 제스트와 함께 Vue CLI 3를 설정하는데 어려움을 겪고 있다.나는 그것을 작동시키기 위해 가능한 모든 것을 했지만 여전히 아무런 보도도 하지 않고 있다.

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

꾸러미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를 올바르게 구성하는 방법

제이스트는 자체적인 취재 시설을 갖추고 있으니 제거하십시오.nyc꾸러미로json:

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

Jest의 커버리지를 활성화하려면 jest.config.js(문서당):

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

달리기yarn test:unit다음과 같은 콘솔 출력을 생성해야 함:

깃허브 데모

또한 Jest 콘솔 출력에는 실행 가능한 JavaScript가 포함된 파일만 나열됨(methodsVue SFC의 경우).기본 Vue CLI 생성 템플릿을 사용하는 경우HelloWorld.vue포함하지 않음methods리스트에 올리지 않도록.위의 스크린샷에서 사용하지 않는 방법을 에 추가했다.HelloWorld.vue제이스의 폭로된 대사 보고를 증명하기 위해서요

@tony19의 대답은 완벽하게 타당하지만, 반드시 사용자 정의 농담 구성에 어떤 것도 추가할 필요는 없다.Vue CLI 서비스를 사용하여 빌드된 프로젝트의 경우 다음 스크립트만 추가하십시오.package.jsonVue 구성 요소에 대한 적용 범위는 다음과 같다.

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

리포터 변경 및 이 스크립트에만 고유한 Jest 구성과 같이 추가할 수 있는 추가 옵션이 있다.전체 옵션 목록을 가져오려면 터미널에서 다음 명령을 실행하십시오.

 npx vue-cli-service test:unit help

그리고, 이 옵션들 중에서, 당신은collectCoverage그리고collectCoverageFrom사용자 정의 구성 파일을 보유하는 대신 스크립트에 모든 것을 보관하는 데 도움이 될 수 있다.

Vue CLI 플러그인을 사용하지 않는 경우@vue/cli-plugin-unit-jestVue 구성 요소에 대한 테스트 적용 범위 보고서를 생성하십시오.다음과 유사한 방법으로 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

참조URL: https://stackoverflow.com/questions/53249858/how-to-make-test-coverage-show-all-vue-files-in-vue-cli-3-using-jest