缓慢的业力单元测试答案

【问题标题】：Slow Karma Unit Tests缓慢的业力单元测试
【发布时间】：2018-06-09 12:02:23
【问题描述】：

我使用 Jasmine 和 Karma 为小型应用程序编写了单元测试。而 Karma 在这些测试中运行缓慢。

这是我的业力配置：

var unitTestReportOutputDir = 'unit-test-report';

module.exports = function (config) {
config.set({
    basePath: '',
    frameworks: ['jasmine'],
    reporters: ['dots'],
    port: 9876,
    colors: false,        
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    autoWatchBatchDelay: 300,
    exclude: ['./test/data/*.js'],
    files: [
        'tests.webpack.js'],

    preprocessors: {
        'tests.webpack.js': ['webpack']
    },
    webpack: require('./webpack.config.js'),

    webpackMiddleware: {
        noInfo: true
    },
    htmlReporter: {
        outputDir: unitTestReportOutputDir, // where to put the reports
        focusOnFailures: true, // reports show failures on start
        namedFiles: true, // name files instead of creating sub-directories
        pageTitle: 'Unit Test Report', // page title for reports; browser info by default
        urlFriendlyName: false, // simply replaces spaces with _ for files/dirs
        reportName: 'test-summary', // report summary filename; browser info by default
        // experimental
        preserveDescribeNesting: false, // folded suites stay folded
        foldAll: false, // reports start folded (only with preserveDescribeNesting)
    }
});

}

这是我的 webpack.config.js：

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');
var UglifyJsPlugin = require('uglify-js-plugin');
const path = require('path');

module.exports = {

devtool: 'inline-source-map',
entry: ['./src/index.js'],
output: {path: path.resolve(__dirname, "builds"), filename: 'bundle.js'},
module: {
    rules: [
        {
            test: /\.jsx?$/,
            use: [
                {
                    loader: 'babel-loader'
                }
            ]
        },
        {
            test: /\.sass$/,
            exclude: '/node_modules/',
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                loader: "css-loader!sass-loader"
            })
        }
    ]
},
resolve: {
    extensions: ['.js', '.jsx', '.sass']
},
plugins: [
    new ExtractTextPlugin({
        filename: "stylesheets/style.css",
        disable: false,
        allChunks: true
    }),
    new webpack.ProvidePlugin({
        "$": "jquery",
        "jQuery": "jquery",
        "window.jQuery": "jquery"
    }),
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('production')
        }
    }),
    new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
            warnings: false
        }
    })
]

};

你们在运行单元测试时通常会做什么来加快 Karma 的速度？

我把代码放在：https://github.com/zainulfranciscus/karma-test 每当我更新测试时，业力开始需要 1 分 15 秒，运行测试需要 33 秒。有35个单元测试

谢谢。

【问题讨论】：

你运行了多少个测试，速度有多慢？
你可能想要有 2 个 webpack 配置——分别用于生产和测试（实际上你会有 3 个包括一些共同的东西）——你真的不需要缩小所有文件和为每个测试运行生成源映射
@xmike 我将创建 2 个 webpack 配置，看看是否有任何改进。
@Leon 让我测量运行测试所需的时间并回复您。我也会很快分享来自 github 的源代码。谢谢
@Leon 有 35 个单元测试。业力需要 1 分 15 秒才能开始。每当我更新测试时，运行测试需要 33 秒

标签： reactjs unit-testing webpack karma-runner karma-jasmine

【解决方案1】：

在此处查看karma-parallel 插件： https://www.npmjs.com/package/karma-parallel

与karma-sharding 插件相比，更受欢迎且与karma-webpack 兼容。

【讨论】：

【解决方案2】：

你看过karma-sharding吗？该插件解决了某些浏览器的一些内存使用问题，以及大量或内存密集型规范。

它不会并行运行您的测试，但从版本 4.0.0 开始，它支持并行浏览器执行（即，将跨您的 karma.conf.js 中列出的浏览器分片测试）

【讨论】：

你好，我会安装那个插件，看看它是否能提高执行时间。
结果如何？