Getting 404 when running Karma Jasmine tests with code coverage

Question

When running ng test --browsers ChromeHeadless --code-coverage on my Angular project, it aborts with a 404: /_karma_webpack_/main.js error and shows "Unknown values" under the coverage summary.

I'm new to TDD and I'm having trouble understanding what the issue is. I've pasted my karma configuration and the error log below.

karma.conf.js:

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-junit-reporter'),
      require('karma-coverage'),
      require('karma-sonarqube-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    jasmineHtmlReporter: {
      suppressAll: true // removes the duplicated traces
    },
    coverageReporter: {
    subdir: '.',
     dir: 'report/coverage',
     reporters: [
        { type: 'lcov'},
        { type: 'text-summary'}
      ]
    },
    junitReporter: {
      outputDir: 'report/junit',
      outputFile: 'junit-report.xml'
    },
    sonarqubeReporter: {
      basePath: 'src/app',
      outputFolder: 'report/junit',
      filePattern: '**/*.spec.ts',
      encoding: 'utf-8',
      legacyMode: false,
      reportName: 'sonar-report.xml'
    },
    reporters: ['progress', 'kjhtml', 'junit', 'sonarqube'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    customLaunchers: {
      ChromeHeadless: {
        base: 'Chrome',
        flags: [
          '--headless',
          '--no-sandbox',
          '--disable-gpu',
          '--remote-debugging-port=9222'
        ]
      }
    },
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true,
  });
};

Error log:

30 06 2023 13:12:38.914:INFO [karma-server]: Karma v6.4.2 server started at http://localhost:9876/
30 06 2023 13:12:38.915:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
30 06 2023 13:12:38.932:INFO [launcher]: Starting browser Chrome
30 06 2023 13:12:41.596:INFO [Chrome Headless 114.0.5735.199 (Windows 10)]: Connected on socket 2aM0rG6OXdudE58mAAAB with id 97727621
30 06 2023 13:12:41.788:WARN [web-server]: 404: /_karma_webpack_/main.js
Chrome Headless 114.0.5735.199 (Windows 10): Executed 0 of 0 SUCCESS (0.032 secs / 0 secs)
TOTAL: 0 SUCCESS

=============================== Coverage summary ===============================
Statements   : Unknown% ( 0/0 )
Branches     : Unknown% ( 0/0 )
Functions    : Unknown% ( 0/0 )
Lines        : Unknown% ( 0/0 )

I've tried to set some files properties in karma.conf.js as other Stack Overflow answers have suggested, but nothing I've tried has worked yet.

Answer 1

I think that the Karma test runner is unable to locate the main.js file in the _karma_webpack_ directory, which is resulting in a 404 error.

Verify the file configuration in karma.conf.js and ensure that the files array in your Karma configuration includes the correct paths to your test files, including the main.js file.

Example:

files: [
  { pattern: './src/test.ts', watched: false },
  { pattern: './src/_karma_webpack_/main.js', watched: true },
],

Check the angular.json configuration and make sure that the main property is correctly set in the architect > build section of your angular.json file. It should point to the entry point of your application, src/main.ts.

Verify the preprocessors configuration in karma.conf.js and ensure that the preprocessors section in your Karma configuration includes the correct paths to preprocess the files.

Example:

preprocessors: {
  './src/_karma_webpack_/main.js': ['coverage']
},

Check for any other errors or warnings and review the console output for any other error or warning messages that might provide more information about the issue. Sometimes I think there could be other misconfigurations or dependencies causing conflicts.

Apply any necessary adjustments to your Karma configuration based on your project structure and file locations. After making the changes, rerun the tests using ng test --browsers ChromeHeadless --code-coverage and see if the issue is still there.

Answer 2

I compared my configurations to yours and I found this difference in the dir config:

dir: 'report/coverage'

Do this:

dir: require('path').join(__dirname, './report/coverage'),