babel webpack configuration ignored in karma.conf.js? - reactjs

Question

I am trying to make my first JS unit test with Karma and Jasmin. I am testing a react app.
I generated the karma config with "karma init" and modified it, see below for the karma.config.js
The webpack.config is required in the karma.config.js, but the babel loader is completely ignored, why?
I noticed it's ignored as it resulted in errors of undefined variable, etc...
When adding parts of the webpack.config.js directly in the karma.config.js (copy/paste), it works, but that is not what I want as I am duplicating code like my loaders and aliases, etc... How to solve this? See below also the webpack.config.js
The 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
})
};
The 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

in karma.config.js:
webpack: require("../webpack.conf.js")
you're giving "webpack" a function instead of an object. you should immediately invoke it (with or without an env param) require("../webpack.conf.js")()