angular 17 + jasmine + karma: Uncaught ReferenceError: require is not defined

Just like the title says, the require is not defined error keeps popping up and is preventing me from processing my unit test.

Here's my karma.conf.js file:

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
config.set({
basePath: '',
frameworks: [
'jasmine',
'@angular-devkit/build-angular',
'browserify',
],
plugins: [
'karma-jasmine',
'karma-chrome-launcher',
'karma-jasmine-html-reporter',
'karma-coverage',
'karma-junit-reporter',
'karma-browserify',
'@angular-devkit/build-angular/plugins/karma',
'@angular-builders/custom-webpack/dist/karma'
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
// preprocessors: {
// // '**/*.js': ['browserify'], // Apply browserify to your test files
// "**/*.spec.js": ["browserify"]
// },
// webpack: {
// // Add webpack configuration options here
// module: {
// rules: [
// {
// test: /\.js$/,
// use: {
// loader: 'babel-loader',
// options: {
// presets: ['@babel/preset-env']
// }
// }
// }
// ]
// }
// },
// files: [
// {pattern: '**/*.spec.js', included: false},
// ],
coverageReporter: {
dir: require('path').join(__dirname, './coverage'),
type: 'lcov',
subdir: '.',
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true,
check: {
global: {
statements: 80,
branches: 80,
functions: 80,
lines: 80
}
}
},
reporters: ['progress', 'junit', 'kjhtml','coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
customLaunchers: {
ChromeHeadlessNoSandbox: {
base: 'ChromiumHeadless',
flags: ['--no-sandbox']
}
},
junitReporter : {
outputDir : './junit/test-reports'
},
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true,
customWebpackConfig: {
// Point to your custom Webpack config here
path: './webpack.config.js'
}
});
};


And here's my webpack.config.js file:

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

module.exports = {
externalsPresets: { node: true }, // Keep this to avoid node-relevant errors
target: 'node', // Ensure you're targeting the web environment
plugins: [
new NodePolyfillPlugin() // Add the polyfill plugin
],
externals: {
'fs': 'commonjs fs' // Prevents Webpack from bundling `fs`
}
};


I think I have tried the majority of the solutions on the internet, at least from those I can find. None of them works. I have also asked ChatGPT and got no luck.

Like that part of code disabled in the first file is suggested both by ChatGPT and some articles about fixing this issue.

I am thinking whether I should target it to "web" or "node". It is an Angular project, so probably running it in SSR mode in the test should be better? Not sure how to achieve that, though.

Continue reading...