1

Webpack、Babel、および Karma を使用してプロジェクトをセットアップしようとしていますが、ソース ファイルのテスト カバレッジを適切に構成するのに問題があります。

Webpack を使用して、babel-loader を使用して JavaScript ファイルをバンドルおよびトランスパイルし、カルマと karma-webpack を使用してテストを実行しています。

問題は、すべてのソース ファイルをカバレッジに含めることができず、テスト ファイルにインポートしたものだけを含めることができないことです。私はbabel-plugin-istanbulを使用してes2015コードを計測しています。

これが私のwebpack構成ファイルです：

const { resolve } = require('path');

module.exports = {
  context: __dirname,
  entry: './main.js',
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist'),
  },
  resolve: {
    root: __dirname,
    extensions: ['', '.js', '.jsx'],
    alias: {
      components: resolve(__dirname, 'src/components'),
    },
  },
  devtool: 'eval-source-map',
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules/,
      },
    ],
  },
};

そして私のカルマ構成ファイル：

const webpackConfig = require('./webpack.config');

process.env.BABEL_ENV = 'test';

module.exports = function karmaConfig(config) {
  config.set({
    basePath: './',
    frameworks: ['mocha', 'chai', 'sinon'],
    files: ['specs/**/*.spec.js'],
    plugins: [
      'karma-webpack',
      'karma-mocha',
      'karma-chai',
      'karma-sinon',
      'karma-spec-reporter',
      'karma-coverage',
      'karma-spec-reporter',
      'karma-phantomjs-launcher',
    ],
    preprocessors: {
      'specs/**/*.spec.js': ['webpack'],
      'src/**/*.+(js|jsx)': ['webpack'],
    },
    reporters: ['spec', 'coverage'],
    coverageReporter: {
      dir: 'coverage',
      reporters: [
        { type: 'lcov', subdir: 'reporter-lcov' },
        { type: 'text-summary' },
      ],
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true,
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: false,
    concurrency: Infinity,
  });
};

そして.babelrc、これが私のファイルです。ここで、babel-plugin-istanbul を構成します。

{
  "presets": ["es2015", "react"],
  "env": {
    "test": {
      "plugins": [
        ["istanbul", { "exclude": ["**/*.spec.js"] }]
      ]
    }
  }
}

何か不足していますか？

前もって感謝します！

4

0 に答える 0