Cannot show file path on error test

[lvthanh101]

Hi all,
Could anyone tell me how to show detail file path (and line code) when test case failed?

As you can see, error summary doesn't show file path for failed test case.

[4kochi]

Can you please try another browser. The error message depends on the browser. I just want to make sure if it is a browser issue or an issue of the reporter.

Thanks

[lvthanh101]

hi @4kochi

I saw log in chrome developer console, it still has no file path.
Note: my webpack is already configured to generate sourcemap for all code.

Thanks

[lvthanh101]

hi @4kochi
Do you know how to work around for this issue?

Thanks

[esayler]

@lvthanh101

I had this same problem but I'm using webpack as a preprocessor. I'm not sure about a non-webpack focused solution, but I found a solution that'll work if you are using a build tool like webpack.

You'll need the karma-sourcemap-loader plugin/preprocessor.

Then, you include 'sourcemap' preprocessor after 'webpack' in the preprocessors object and then do devtool: 'inline-source-map' in your weback config of your karma.conf.js you can get what you're looking for.

here's my example karma.conf.js:

var webpackConfig = require('./webpack.config.js')

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['mocha', 'chai', 'sinon'],
    files: [
      { pattern: 'test/**/*.spec.jsx', watched: false, serverd: true, included: true },
      { pattern: 'test/**/*.spec.js', watched: false, serverd: true, included: true },
    ],
    exclude: [],
    preprocessors: {
      'test/**/*.spec.jsx': ['webpack', 'sourcemap'],
      'test/**/*.spec.js': ['webpack', 'sourcemap'],
    },
    webpack: {
      devtool: 'inline-source-map',
      module: webpackConfig.module,
      plugins: webpackConfig.plugins,
      externals: webpackConfig.externals,
      resolve: webpackConfig.resolve,
      performance: false,
    },
    webpackServer: {
      stats: 'errors-only',
    },
    reporters: ['progress', 'mocha'],
    mochaReporter: {
      colors: {
        warning: 'black',
        error: 'red',
      },
      showDiff: true,
    },
    client: {
      captureConsole: false,
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    autoWatchBatchDelay: 1000,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity,
  })
}

Here's my example test file:

import chai from 'chai'
var expect = chai.expect
chai.should()

describe('Example Class', () => {
  describe('some stuff', () => {
    it('should do something', () => {
      true.should.not.be.ok
    })
  })
})

Example test output:

As you can see above there's now a sourcemap indicating the file of containing the failing test and the line of the failing assertion at the end of the failing test:

    at Context.<anonymous> (webpack:///test/ExampleTests.spec.js:12:25 <- test/ExampleTests.spec.js:13229:25)

[lvthanh101]

Hi @esayler

Thanks for your response. However, my karma config already has 'sourcemap' in preprocessor and devtool is 'inline-source-map'. So I cannot still solve this problem.