1

我正在尝试使用 Karma 和 Jasmin 进行我的第一个 JS 单元测试。我正在测试一个反应应用程序。

我用“karma init”生成了业力配置并对其进行了修改，karma.config.js见下文karma.config.js中需要webpack.config，但是完全忽略了babel loader，为什么？我注意到它被忽略了，因为它导致未定义变量等错误......当直接在 karma.config.js（复制/粘贴）中添加 webpack.config.js 的部分时，它可以工作，但这不是我的想要因为我正在复制我的加载程序和别名等代码......如何解决这个问题？另请参阅下面的 webpack.config.js

业力.config.js：

module.exports = function (config) {
    config.set({
        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: 'src/js/',
        frameworks: ['jasmine'],
        files: [
            'tests/*.test.js',
        ],
        preprocessors: {
            '**/tests/*.test.js': ['webpack', 'sourcemap'],
        },

        webpack: require("../webpack.conf.js"),
        webpackMiddleware: {
            stats: "errors-only"
        },
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['PhantomJS'],
        phantomJsLauncher: {exitOnResourceError: true},
        singleRun: false,
        concurrency: Infinity
    })
};

webpack.config.js：

module.exports = function (env) { 
    if (env !== undefined) {
        let analyse = !!env.analyse;
        console.log("Analyse?: " + analyse);
        if (analyse) {
            plugins.push(new BundleAnalyzerPlugin({analyzerMode: 'static'})); 
        }
    }

    return {
        entry: {
            entry: ['./src/entry.js', './src/js/utils.js'],
        },
        devtool: devTool,
        devServer: devServer,
        output: {
            path: __dirname + '/dist',
            filename: '[name]-[hash].cache.js', // it contains the name ".cache", that is used in the webserver config.
            sourceMapFilename: '[name]-[hash].cache.js.map',
        },
        module: {
            rules: [
                { // The Babel loader:
                    test: /(\.jsx|\.js)$/, 
                    exclude: /(node_modules|bower_components)/,
                    use: [{
                        loader: 'babel-loader',
                        options: {
                            presets: ['babel-preset-es2015', 'babel-preset-react'].map(require.resolve),
                            plugins: ['babel-plugin-transform-react-jsx-img-import'].map(require.resolve) // It will convert the used images to to "require" statements such that it's used by a loader below.
                        }
                    }]
                },
                { 
                    test: /\.s?css$/,
                    use: ['style-loader', 'css-loader', 'sass-loader']
                },
                { 
                    test: /\.(png|gif|jpe?g)$/,
                    use: [{
                        loader: 'file-loader',
                        options: {
                            name: 'resources/images/[name]-[hash]-cache.[ext]'
                        }
                    }]
                },
                { 
                    test: /\.(otf|svg|eot|ttf|woff2?)(\?.*$|$)/,
                    use: [{
                        loader: 'file-loader',
                        options: {
                            name: 'resources/fonts/[name]-[hash]-cache.[ext]'
                        }
                    }]
                },
            ]
        },
        plugins: plugins,
        externals: ['axios'],
        resolve: {
            alias: {
                // Ref: https://webpack.js.org/configuration/resolve/
                Context: path.resolve(__dirname, 'src/js/context'),
                Utils: path.resolve(__dirname, 'src/js/utils'),
                ....etc...
            },
        }
    };
};
4

1 回答 1

1

在 karma.config.js 中：

webpack: require("../webpack.conf.js")

你给“webpack”一个函数而不是一个对象。您应该立即调用它（带或不带env参数）require("../webpack.conf.js")()

于 2017-07-07T15:22:15.407 回答