@vue/cli-plugin-unit-mocha, TypeScript 및 SFC를 사용한 VueJ 프로젝트의 NYC 커버리지 보고서 생성

@vue/cli-plugin-unit-mocha, TypeScript 및 SFC를 사용한 VueJ 프로젝트의 NYC 커버리지 보고서 생성

현재 @vue/cli-plugin-unit-mocha를 사용하여 유닛 테스트를 실행하는 Vue 프로젝트의 테스트 환경을 셋업하고 있습니다.이 프로젝트에서는 TypeScript 및 .vue Single-File-Components를 사용합니다.유닛 테스트를 실행하고 TypeScript 파일의 코드 커버리지 보고서를 생성하도록 프로젝트를 셋업했습니다만, SFC 의 테스트를 추가하려고 하면 에러가 발생합니다.

커버리지 보고서를 작성하려면 nyc + 이스탄불 인스트루머 로더를 사용합니다.일반 Typescript 파일에 대해서는 설정이 올바르다고 생각합니다만, .vue 파일을 처리해야 할 경우, instrumenter-loader가 에러를 발생시킵니다.

error  in ./src/pages/rapportages/components/reports-grid/reports-grid-container.vue?vue&type=script&lang=ts&
Module build failed (from ./node_modules/istanbul-instrumenter-loader/dist/cjs.js):
TypeError: Cannot read property 'fileCoverage' of undefined

제가 보기에는 .vue 파일이 제대로 변환/변환되지 않은 것 같습니다.

제 소포입니다.json:

{
 ...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service test:unit src/**/__tests__/*.spec.ts --require mocha-setup.js",
    "test:ci": "yarn run test --reporter mocha-teamcity-reporter",
    "test:cover": "cross-env NODE_ENV=coverage nyc vue-cli-service test:unit src/**/__tests__/*.spec.ts --require mocha-setup.js"
  }
...
"nyc": {
    "sourceMap": false,
    "instrument": false,
    "extension": [
      ".ts",
      ".vue"
    ],
    "reporter": [
      "text",
      "lcov"
    ]
  },
}

및 vue.config.discl:

...
const glob = require('glob')

path = require('path');
var nodeExternals = require('webpack-node-externals');
const isCoverage = process.env.NODE_ENV === 'coverage';

module.exports = {
  outputDir: "dist",
  assetsDir: "shared",
  pages,
  configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        'vuex$': "vuex/dist/vuex.esm.js"
      },
      extensions: ['*', '.js', '.vue', '.json']
    },
    stats: {
      warningsFilter: /export .* was not found in/
    },
    devtool: process.env.NODE_ENV === 'development' ? 'source-map' : 'inline-cheap-module-source-map',
    output: {
      // use absolute paths in sourcemaps (important for debugging via IDE)
      devtoolModuleFilenameTemplate: '[absolute-resource-path]',
      devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
    },
    module: {
      rules: [].concat(
        isCoverage ? {
          test: /\.(ts|vue)/,
          include: path.resolve('src'), // instrument only testing sources with Istanbul, after ts-loader runs
          loader: 'istanbul-instrumenter-loader',
          enforce: 'post',
          query: {
            esModules: true
          }
        } : []
      )
    },
    target: 'node',  // webpack should compile node compatible code
    externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
  }
}

테스트 커버리지에 실패한 파일은 다음과 같습니다.

reports-grid-grid.spec.ts를 참조합니다.

import { expect } from 'chai';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import { store } from '@/shared/vuex/root-store';

import ReportsGridContainer from '../reports-grid-container.vue';
import { STORE_KEY } from '../constants';

describe('ReportsGridContainer', () => {
    it('creates store module with the store key defined in the constants file', () => {
        const localVue = createLocalVue();
        localVue.use(Vuex);

        const wrapper = shallowMount(ReportsGridContainer, {
            localVue,
            store
        });
        expect(wrapper.vm.$store.state[STORE_KEY]).to.not.equal(undefined);
    });
});

이스탄불은 .vue 파일로 인해 오류를 발생시킵니다.

어떤 도움이나 길잡이도 감사할 것 같습니다!

언급URL : https://stackoverflow.com/questions/53782097/generating-nyc-coverage-report-for-vuejs-project-with-vue-cli-plugin-unit-mocha