update: I recently upgraded from karma-webpack 3.0.5 to 4.0.0-rc.2, and encountered some errors. Initially, there was an issue with angular not being defined due to incorrect importing of the home.spec.js file in the tests.bundle.spec. After rectifying this mistake by relying on context for importing instead, my tests started running successfully. I will post a detailed solution once allowed by Stack Overflow.
I suspect that karma is not loading my test bundle file even though webpack generates the bundle.
No console.logs are visible from either tests.bundle.spec.js or home.spec.js. Even with singleRun=false, checking the Chrome console after a refresh shows that the tests.bundle.spec.js file loads but isn't referenced in the html file. Only socket.io.js and karma.js scripts are included in the page.
On debugging through Chrome DevTools, the tests.bundle.spec.js bundle loads but none of the modules inside it run. Setting breakpoints within test scripts and even in the code for tests.bundle.spec.js did not trigger any breakpoints. Karma fails to initialize these modules as expected. Breakpoints within the __webpack_require__ function also remain untapped, indicating that modules aren't required/imported.
The bundling structure and configuration are as follows:
Folder Structure:
-src
--app
---home
----home.js
----home.spec.js
--tests.bundle.spec.js
karma.conf.js
webpack.test.js
karma.conf.js
// Karma Configurations
var webpackConfig = require('./webpack.test.js');
module.exports = function (config) {
process.env.BABEL_ENV = 'karma';
config.set({
basePath: '',
frameworks: ['jasmine'],
// files to load
files: [
{
pattern: './src/tests.bundle.spec.js',
watched: false
}
],
// plugins
plugins: [
'karma-webpack',
'karma-jasmine',
'karma-sourcemap-loader',
'karma-chrome-launcher'
],
preprocessors: {
'./src/tests.bundle.spec.js': ['webpack', 'sourcemap']
},
// Webpack config
webpack: webpackConfig,
webpackServer: {
noInfo: false
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: [
'Chrome'
],
singleRun: false,
concurrency: Infinity
})
}
webpack.test.js
// Webpack Testing Configuration
const webpack = require("webpack");
const path = require('path');
// Plugins and loader rules
module.exports = {
// Mode and source mapping
mode: 'development',
devtool: 'eval-source-map',
entry: {
app: path.resolve(__dirname, './src/index.js')
},
output: {
path: path.resolve(__dirname, './build_app/'),
filename: 'app-[name].js',
chunkFilename: 'app-vendors.[chunkhash].js'
},
module: {
// Loader rules for different file types
rules: [
// JavaScript source files
{
test: /\.js$/,
exclude: /(node_modules)(\.spec\.js$)/,
rules : [
{ loader: 'babel-loader' },
{
loader: 'eslint-loader',
options: {
emitError: true,
emitWarning: true,
failOnError: true,
globals: ['_', 'angular', 'lrenums', 'readJSON']
}
}
]
},
// Templates, LESS, CSS, Images, Fonts etc.
// ...More rules here...
]
},
// Code optimization settings
optimization: {
namedChunks: true,
splitChunks: {
chunks: "all",
minSize: 0,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'all',
minSize: 0
}
}
}
},
// Additional plugins
plugins: [
new CleanWebpackPlugin(['build_app'], { verbose: true, beforeEmit: true }),
new HtmlWebpackPlugin({ template: './src/index.php', filename: 'index.php', inject: 'head' }),
new webpack.ProvidePlugin({ _: 'underscore' })
]
};
tests.bundle.spec.js
// Test Bundle File
const context = require.context('./', true, /.+home\.spec\.js$/);
console.log('==============================');
console.log(context.keys());
context.keys().forEach(function(key) {
context(key);
});
home.spec.js
// Home Specification File
require('angular');
require('angular-mocks');
import './home.js';
describe('home section', function () {
it('should run test', inject(function () {
expect(1).toEqual(1);
});
}
Upon running tests, the result is displayed as
Executed 0 of 0 ERROR (0.001 secs / 0 secs)