6

我目前正在为使用 @vue/cli-plugin-unit-mocha 运行单元测试的 Vue 项目设置测试环境。该项目使用 TypeScript 和 .vue 单文件组件。我已成功设置我的项目以运行单元测试并为 TypeScript 文件生成代码覆盖率报告，但是当我尝试为 SFC 添加测试时出现错误。

要生成覆盖率报告，我使用 nyc + istanbul-instruenter-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
  }
}

测试覆盖率失败的文件如下所示：

报告网格容器.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 文件，Istanbul 抛出错误

任何帮助或指示将不胜感激！

4

0 回答 0