Junit report not showing test cases - junit

Question

I'm using karma with jasmine and followed online guide by installing using
npm install --save-dev karma
and other necessities.
This is my karma config file.
module.exports = function(config) {
config.set({
frameworks: ['jasmine'],
plugins: [
require('karma-jasmine'),
require('karma-junit-reporter'),
"karma-chrome-launcher",
"karma-jasmine-html-reporter",
],
files: [
{ pattern: 'src/app/app.component.spec.ts', included: false,type :'js' },
// 'src/**/*.spec.ts',
// 'src/**/*.js'
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
// list of files / patterns to exclude
exclude: [
],
junitReporter: {
outputDir: '.',
outputFile: 'unit-test-result.xml',
useBrowserName: false
},
reporters: ['progress', 'kjhtml', 'junit'],
port: 9876,
colors: true,
logLevel: config.LOG_DEBUG,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity
})
}
Some unit test cases are written in src/app/app.component.spec.ts file.
Junit Reporter is not writing the test cases in "unit-test-result.xml" file.
When I run "ng test" command the output comes as below
https://stackoverflowteams.com/c/neha/images/s/71deb22e-bb5f-44a2-84f2-5b4247db87c3.png
Now when I run "Karma Start" command , output comes as below
https://stackoverflowteams.com/c/neha/images/s/019ecb01-71ee-4c67-bbbf-02a2f1a1d581.png
No error shown in debug log, it shows statement as below
Chrome 109.0.0.0 (Windows 10): Executed 0 of 0 SUCCESS (0 secs / 0 secs)
and my "unit-test-result.xml" file generated with no test cases in it.
https://stackoverflowteams.com/c/neha/images/s/fe7a2dc7-7cd7-44c6-b7f3-c0eedf066e7c.png
Expected Output : I want my unit-test-result.xml to show 4 unit test cases.
my package.json is as below
{
"name": "angulat-test",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test --watch=false"
},
"private": true,
"dependencies": {
"#angular-devkit/build-angular": "^15.1.2",
"#angular/animations": "^15.1.0",
"#angular/common": "^15.1.0",
"#angular/compiler": "^15.1.0",
"#angular/core": "^15.1.0",
"#angular/forms": "^15.1.0",
"#angular/platform-browser": "^15.1.0",
"#angular/platform-browser-dynamic": "^15.1.0",
"#angular/router": "^15.1.0",
"karma-junit-reporter": "^2.0.1",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.12.0"
},
"devDependencies": {
"#angular/cli": "~15.1.2",
"#angular/compiler-cli": "^15.1.0",
"#types/jasmine": "~4.3.0",
"#types/node": "^18.11.18",
"jasmine-core": "~4.5.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"karma-typescript-preprocessor": "^0.4.0",
"typescript": "~4.9.4"
}
}
My tsconfig.spec.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine",
"node"
]
},
"include": [
"src/app/app.component.spec.ts"
]
}
I am new to angular, any help would be highly appreciated.
Let me know if any more information is required.