Создание отчета о покрытии nyc для проекта VueJS с помощью @ vue / cli-plugin-unit-mocha, TypeScript и SFC - PullRequest
Новая
       38

Создание отчета о покрытии nyc для проекта VueJS с помощью @ vue / cli-plugin-unit-mocha, TypeScript и SFC

0 голосов
/ 14 декабря 2018

В настоящее время я работаю над настройкой среды тестирования для проекта Vue, который использует @ vue / cli-plugin-unit-mocha для запуска модульных тестов.В проекте используются TypeScript и .vue Single-File-Components.Я успешно настроил свой проект для запуска модульных тестов и создания отчетов о покрытии кода для файлов TypeScript, но когда я пытаюсь добавить тесты для SFC, я получаю сообщение об ошибке.

Для генерации отчетов о покрытии я использую nyc + istanbul-instrumenter-loader.Я думаю, что моя конфигурация правильна для обычных файлов Typescript, но когда она имеет дело с файлами .vue istanbul-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 не имеетбыл правильно преобразован / перенесен.

Это мой package.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.js: 

...
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-container.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

Любая помощь или указаниябудет принята с благодарностью!

...