Невозможно создать покрытие кода для VUE файлов с помощью кармы, веб-пакета и машинописи - PullRequest
1 голос
/ 19 апреля 2020

Я пытаюсь создать покрытие кода для VUE файлов с использованием машинописи в karma и webpack.

Я использую istanbul-instrumenter-loader в качестве пост-процесса после, но продолжаю получать.

Все работает нормально для чистых файлов .ts, но при включении vue файлов я получаю

build failed (from ./node_modules/istanbul-instrumenter-loader/dist/cjs.js):
TypeError: Cannot read property 'fileCoverage' of undefined

При отладке istanbul-instrumenter-loader я заметил, что ee.exit (путь); не определено, потому что VUE файлы инструментируются 3 раза, первые два работают нормально, но третий - тот, который падает.

это моя конфигурация веб-пакета

module.exports = {
node: {
    fs: 'empty'
},
mode: 'development',
devtool: 'inline-source-map',
stats: 'verbose',
resolve: {
    alias: {
        Home: path.resolve( __dirname ),
        Client: path.resolve( __dirname, 'client/' ),
        ClientUtils$: path.resolve( __dirname, 'client/utils/index.utils.client.ts' ),
        Views: path.resolve( __dirname, 'client/views/' ),
        Components: path.resolve( __dirname, 'client/components/' ),
        Constants$: path.resolve( buildPath, 'shared/constants.js' )
    },
    extensions: [
        '.scss',
        '.js',
        '.ts',
        '.vue'
    ]
},
module: {
    rules: [
        {
            test: /\.vue$/,
            use: [
                {
                    loader: 'vue-loader'
                }
            ]
        },
        {
            test: /\.ts?$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: 'cache-loader'
                },
                {
                    loader: 'thread-loader',
                    options: {
                        workers: Math.max(require('os').cpus().length - 1, 1)
                    }
                },
                {
                    loader: 'ts-loader',
                    options: {
                        transpileOnly: true,
                        happyPackMode: true,
                        appendTsSuffixTo: [/\.vue$/]
                    }
                }
            ]
        },
        {
            test: /\.js$/,
            exclude: [/dist/, /node_modules/, /coverage_server/, /coverage_client/],
            loader: 'babel-loader'
        },
        {
            test: /\.ts$/,
            include: [/client/],
            exclude: [
                /node_modules/,
                /\.spec\.ts$/,
                /server/
            ],
            enforce: 'post',
            loader: 'istanbul-instrumenter-loader',
            options: {
                esModules: true
            }
        },
        {
            test: /\.(s*)css$/,
            use: [
                'vue-style-loader',
                'css-loader',
                'sass-loader'
            ]
        }
    ]
},
plugins: [
    new VueLoaderPlugin()
};

и мой karma.conf -

module.exports = function(config) {
let files = [];

if (config.grep) {
    files.push({ pattern: config.grep, type: 'module' });
} else {
    files.push('client/index.client.spec.ts');
}


config.set({
    frameworks: ["mocha", "chai", "sinon"],

    files,

    preprocessors: {
        'client/**/*spec.ts': ['webpack', 'sourcemap']
    },

    webpack: require('./webpack.test.js'),

    reporters: ['spec', 'dots', 'html', 'coverage-istanbul'],

    browsers: ['ChromeHeadless'],

    coverageReporter: {
        dir: './coverage_client',
        includeAllSources: true,
        reporters: [{ type: 'lcov', subdir: '.' }, { type: 'text' }]
    },

    coverageIstanbulReporter: {
        reports: ['text', 'lcov' ],
        dir: './coverage_client',
        fixWebpackSourcePaths: true,
        'report-config': {
            html: { outdir: 'html' }
        }
    },

    htmlReporter: {
        outputDir: 'karma_client_html', // where to put the reports
        templatePath: null, // set if you moved jasmine_template.html
        focusOnFailures: true, // reports show failures on start
        namedFiles: false, // name files instead of creating sub-directories
        pageTitle: null, // page title for reports; browser info by default
        urlFriendlyName: false, // simply replaces spaces with _ for files/dirs
        reportName: 'report_summary_filename', // report summary filename; browser info by default

        // experimental
        preserveDescribeNesting: false, // folded suites stay folded
        foldAll: false // reports start folded (only with preserveDescribeNesting)
    }
});
};

, а мой tsconfig -

    {
  "compilerOptions": {
    "incremental": true,
    "outDir": "./build/",
    "target": "es2018",
    "module": "CommonJS",
    "lib": ["es2018", "dom", "dom.iterable"],
    "allowSyntheticDefaultImports": true,
    "inlineSourceMap": true,
    "sourceMap": false,
    "noImplicitAny": false,
    "strict": true,
    "alwaysStrict": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "types": [ "node", "mocha", "chai" ],

    "baseUrl": ".",
    "paths": {
      "type-graphql": ["./node_modules/type-graphql/dist/browser-shim.ts"],
      "Client/*": ["./client/*"],
      "ClientUtils": ["./client/utils/index.utils.client.js"],
      "Views/*": ["./client/views/"],
      "Components/*": ["./client/components/*"],
      "Constants": ["./shared/constants.ts"]
    }

  },
  "include": [
    "./client/**/*.ts",
    "./client/**/*.vue",
    "./server/**/*.ts",
    "./shared/**/*.ts"
  ],
  "exclude": [
    "**/*.spec.ts",
    "node_modules"
  ],
  "files": ["./vue-shims.d.ts"]
}
...