Question

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

我使用＆＃34; karma init＆＃34;生成了karma配置。并修改它，见下面的karma.config.js karma.config.js中需要webpack.config，但是babel加载器完全被忽略了，为什么？我注意到它被忽略了，因为它导致了未定义变量的错误等等...... 在karma.config.js（复制/粘贴）中直接添加webpack.config.js的部分时，它可以工作，但这不是我想要的，因为我正在复制代码，比如我的加载器和别名等等。解决这个问题？请参阅下面的webpack.config.js

karma.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...
            },
        }
    };
};

Answer 1

在karma.config.js中：

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

你给＃34; webpack＆＃34;一个函数而不是一个对象。你应该立即调用它（有或没有env参数）require("../webpack.conf.js")()

在karma.conf.js中忽略了babel webpack配置？

1 个答案: