Cannot show file path on error test

[lvthanh101]

Cannot show file path on error test

[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.