babel/karma-babel-preprocessor

Source map example does not seem to work

fatso83 opened this issue · 8 comments

fatso83 commented

When I use the example for source maps, it does not seem to work. That is, there is no difference, except for filename translation. I write es2015 tests, and use babel to transpile them to es5, and a reported error on line 286 is really found in line 279 in the source, but the stack trace still says 286.

Full config of babel:

        preprocessors : {
            /* Better stack traces for failing tests */
            'generated/typescript-all.js' : ['sourcemap'],

            /* ES2015 syntax in tests */
            "test/**/*.js" : ["babel"]
        },

    "babelPreprocessor" : {
            // options go here
            options        : {
                sourceMap : 'inline'
            },
            filename       : function (file) {
                return file.originalPath.replace(/\.js$/, '.es5.js');
            },
            sourceFileName : function (file) {
                return file.originalPath;
            }
        },
shuhei commented

a reported error on line 286 is really found in line 279 in the source, but the stack trace still says 286.

Let me confirm a bit before starting some research. Are you talking about an error on a test file?

fatso83 commented

In the sense that a failed test is an error, then yes, I am talking about an error in a test file. The tests files are being transpiled by Karma, and any errors being thrown from the on-the-fly transpiled tests will report errors from the line in the transpiled source (ES5), not the original test source (ES2015).

I was thinking that this sourcemap plugin would fix this by reporting the lines in the original corresponding to the transpiled source. Am I wrong to think this would do so?

shuhei commented

@fatso83 Thanks for your reply. Now I could confirm that the sourcemap generated with the config on README worked on the DEBUG window on browser but didn't on the CLI.

I'll take a look at the sourcemap plugin.

shuhei commented

It seems that karma-sourcemap-loader loads existing sourcemaps, the sourcemap generated by TypeScript in your case, but does nothing to sourcemaps generated by karma preprocessors.

I'll take a look at karma-source-map-support.

shuhei commented

@fatso83 With karma-source-map-support, I could show the original stack trace on CLI.

npm install -D karma-source-map-support

and add 'source-map-support' to frameworks.

But it prevents the browser debugger from generating clickable links due to its limitation. You can create multiple karma configs if you want to support both of CLI and browser debugger.

I'll update the README later. Thanks for reporting!

  • 👍1
koshuang commented

Is this fixed? It does not work for me to use karma-source-map-support. Finally it works if I use both karma-source-map-support and karma-sourcemap-loader. This is my configuration:

    preprocessors: {
      'app/**/!(*spec).js': ['babel'],
      'test/**/*.js': ['babel', 'sourcemap']
    },

    babelPreprocessor: {
      options: {
        presets: ['es2015'],
        sourceMap: 'inline'
      },
      filename: function(file) {
        return file.originalPath.replace(/\.js$/, '.es5.js');
      },
      sourceFileName: function(file) {
        return file.originalPath;
      }
    },

P.S. The versions I am using are:

 babel -> 6.1.8
 karma-babel-preprocessor -> 6.0.1
 karma-source-map-support -> 1.1.0
 karma-sourcemap-loader -> 0.3.6
  • 👍2
joeyparrish commented

@koshuang, it works for me, but only if I explicitly add source-map-support to my frameworks list. I know this thread is old, but I hope that helps you or others. I initially missed this detail in @shuhei's last comment and was puzzled when it didn't work.

  • 👍2
ehsan-yaqubi commented

Update 2022; I just tested all these yet again,
and that with different plugin combinations
(but all with karma-babel-preprocessor version ^8.0.1).

karma-sourcemap-loader (^0.3.8) log example:

If I don't have karma-source-map-support installed, the logs look like:

Error: Expected undefined to be truthy.
    at <Jasmine>
    at UserContext.<anonymous> (c:/my-project/tests/AppTest.spec.js:14:31 <- tests/AppTest.spec.es5.js:11:27)
   ...

Note that "AppTest.spec.js:14:31" includes my correct line number (and correct column as well).

karma-source-map-support (^1.4.0) log example:

Now if I uninstall "karma-sourcemap-loader", and instead install "karma-source-map-support", then add "source-map-support" to frameworks.

Error: Expected undefined to be truthy.
    at <Jasmine>
    at UserContext.<anonymous> (tests/C:/my-project/tests/AppTest.spec.js:14:31)
   ...

Both karma-source-map-support and karma-sourcemap-loader

But if we have both said plugins installed and enabled:

Error: Expected undefined to be truthy.
    at <Jasmine>
    at UserContext.<anonymous> (file:C:/my-project/tests/AppTest.spec.js:14:31)
   ...

Did you notice? yes, seems not much changed above, compared to having karma-source-map-support only.

Conclusion

Surprisingly, nowadays karma-sourcemap-loader seems to be all we need, so let's do:

  • First, uninstall karma-source-map-support (maybe forget it even exists),
  • And remove "source-map-support" from frameworks in karma.conf.js file (if was added),
  • At last, just ensure karma-sourcemap-loader is installed, and used in karma.conf.js file, for example:
preprocessors: {
    '**/*.?(m)js': ['babel', 'sourcemap']
},

babelPreprocessor: {
    options: {
        presets: ['@babel/preset-env'],
        sourceMap: 'inline'
    },
    filename: function (file) {
        return file.originalPath.replace(/\.js$/, '.es5.js');
    },
    sourceFileName: function (file) {
        return file.originalPath;
    }
},
  • 👍1