karma don't see my test files and display this error "karma_error Uncaught TypeError: Cannot...

I'm trying to run my angular test with jasmine+karma. When i run karma start karma.conf.js it compile but i have a karma_error Uncaught TypeError: Cannot set properties of undefined (setting 'jasmineRequire') on browser and my files are not seen. Here's my karma.conf.js :

// Karma configuration
// Generated on Mon Dec 02 2024 15:28:03 GMT+0100 (Central European Standard Time)


module.exports = function(config) {
config.set({

// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',

// frameworks to use
frameworks: ['jasmine', 'requirejs', 'karma-typescript'],

plugins: [
require('jasmine'),
require('karma-jasmine'),
require('karma-requirejs'),
require('karma-typescript'),
require('karma-babel-preprocessor'),
require('karma-chrome-launcher'),
require('@angular-devkit/build-angular')
],
// list of files / patterns to load in the browser
files: [
'test-main.js',
{
pattern: 'src/app/**/*.ts',
type: 'module'
},
],


// list of files / patterns to exclude
exclude: [
''
],


// preprocess matching files before serving them to the browser
preprocessors: {
'**/*.ts': ['babel'],
'**/*.js': ['babel']
},
babelPreprocessor: {
// options go here
options: {
presets: [ "@babel/preset-typescript", "@babel/preset-env"],
sourceMap: "inline"
},
},
karmaTypescriptConfig: {
compilerOptions: {
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: "react",
sourceMap: true,
moduleResolution: "node",
target: "esnext",
module: "esnext"
},
tsconfig: 'tsconfig.json',
exclude: ["node_modules"]
},

// test results reporter to use
// possible values: 'dots', 'progress'
reporters: ['progress', 'karma-typescript'],


// web server port
port: 9876,


// enable / disable colors in the output (reporters and logs)
colors: true,


// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_DEBUG,


// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,


// start these browsers
browsers: ['ChromeHeadless'],
customLaunchers: {
ChromeHeadless: {
base: 'Chrome',
flags: ['--no-sandbox']
}
},

// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,

// Concurrency level
// how many browser instances should be started simultaneously
concurrency: Infinity
})
}



my tsconfig.json :


{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"declaration": false,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ESNext",
"module": "ESNext",
"types": ["karma", "jasmine"],
"lib": [
"ESNext",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}



my tsconfig.spec.json :


{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine",
"node",
"@angular/localize"
],
"target": "ESNext",
"module": "ESNext"
},
"include": [
"src/app/**/*.spec.ts",
"src/**/*.d.ts"
],
"exclude": ["node_modules"]
}



and my package.json :

{
"name": "simulator",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"serve:ssr:simulator": "node dist/simulator/server/server.mjs",
"lint": "ng lint"
},
"private": true,
"dependencies": {
"@angular/animations": "^18.1.0",
"@angular/cdk": "^18.2.5",
"@angular/common": "^18.1.0",
"@angular/compiler": "^18.1.0",
"@angular/core": "^18.1.0",
"@angular/fire": "^18.0.1",
"@angular/forms": "^18.1.0",
"@angular/material": "^18.2.9",
"@angular/platform-browser": "^18.1.0",
"@angular/platform-browser-dynamic": "^18.1.0",
"@angular/platform-server": "^18.1.0",
"@angular/router": "^18.1.0",
"@angular/ssr": "^18.1.1",
"@ng-bootstrap/ng-bootstrap": "^17.0.1",
"@popperjs/core": "^2.11.8",
"bootstrap": "^5.3.2",
"express": "^4.18.2",
"firebase": "^11.0.1",
"lint": "^0.8.19",
"ngx-currency": "^18.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.1.1",
"@angular/cli": "^18.2.12",
"@angular/compiler-cli": "^18.1.0",
"@angular/localize": "^18.1.4",
"@babel/core": "^7.26.0",
"@babel/plugin-proposal-decorators": "^7.25.9",
"@babel/plugin-transform-typescript": "^7.25.9",
"@babel/preset-env": "^7.26.0",
"@babel/preset-typescript": "^7.26.0",
"@types/express": "^4.17.17",
"@types/jasmine": "~5.1.0",
"@types/karma": "^6.3.9",
"@types/node": "^18.18.0",
"angular-eslint": "18.4.1",
"eslint": "^9.15.0",
"jasmine": "^5.4.0",
"jasmine-core": "^5.4.0",
"karma": "~6.4.0",
"karma-babel-preprocessor": "^8.0.2",
"karma-chrome-launcher": "~3.2.0",
"karma-cli": "^2.0.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "^5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"karma-requirejs": "^1.1.0",
"karma-typescript": "^5.5.4",
"ts-node": "^10.9.2",
"typescript": "~5.5.2",
"typescript-eslint": "8.15.0"
}
}


I retried to run karma init to have an initial setup but my test files are not seen by karma. I added babel as preprocessor but I have the error karma_error Uncaught TypeError: Cannot set properties of undefined (setting 'jasmineRequire')

so, I need some help to resolve this issue. Thanks

Continue reading...