Debug source map problem

[jakepearson]

I'm trying to switch from ts-jest to esbuild-jest. Totally works as a swap in (thanks!) except when I try to debug a test. When the debugger starts, the breakpoint I set jumps from being in my .ts file to the compiled javascript file. I'm using vscode.

Any ideas on settings I might need to change to get this work correctly?

[dasDaniel]

Seeing the same issue

https://github.com/aelbore/esbuild-jest/blob/master/src/index.ts#L30

I think

  return {
    code: result.js,
    map: {
      ...JSON.parse(result.jsSourceMap),
      sourcesContent: null
    }
  };

should be

  return {
    code: result.code,
    map: {
      ...JSON.parse(result.map),
      sourcesContent: null
    }
  };

this needs to be updated if you're running esbuild@0.8.0 or newer (or downgrade to 0.7.22)

https://github.com/evanw/esbuild/blob/14c2fac4874c8b2bbae88bf3bfb6351b447fd9c3/CHANGELOG.md#080

Changed the transform API result object
For the transform API, the return values js and jsSourceMap have been renamed to code and map respectively. This is because esbuild now supports CSS as a first-class content type, and returning CSS code in a variable called js made no sense.

🩹If you don't want to wait for the package to be updated, roll back esbuild, (and like me, don't have the time to do the PR for a fix), you can copy the script to a local folder (like ./dev) make the change, and then point the transform there instead transform: { "^.+\\.ts$": "./dev/esbuild-jest" },

[aelbore]

@syvlabs thanks much for the PR, I didn't notice you have I already updated the code, again many thanks.
can you try esbuild-jest@0.3.0 with esbuild@latest I added some options same as esbuild, in-case you need it.
Please let me know if you still encounter the error.

[zandaqo]

I'm having something similar in WebStorm's built-in debugger--it doesn't stop on any breakpoints. Has anyone tried this in WebStorm?

[schickling]

I'm facing the same problem using Wallaby.js. Here's a little video demo of the problem I'm facing:

https://www.loom.com/share/4f7fc35bb0144c53b8ab47d1f15f7e72

I suspect this to be a problem in esbuild itself related to sourcemaps. @evanw do you have any idea what the problem might be?

[aelbore]

I'm facing the same problem using Wallaby.js. Here's a little video demo of the problem I'm facing:

https://www.loom.com/share/4f7fc35bb0144c53b8ab47d1f15f7e72

I suspect this to be a problem in esbuild itself related to sourcemaps. @evanw do you have any idea what the problem might be?

thanks @schickling, i will look into this also.

[airhorns]

I believe this is happening because sourcemaps: true passed into esbuild produces the sourcemap that this library passes into Jest, but it doesn't add an inline sourcemap for VSCode to pick up when debugging. I hacked up a local fork of esbuild-jest to produce inline sourcemaps with esbuild by passing sourcemaps: "inline", and VSCode debugging works fine then, but esbuild doesn't produce a sourcemap to pass into jest in that instance. I filed evanw/esbuild#650 which would make it easy to get both sourcemaps we need (the inline one for VSCode and the returned one for Jest), and in the meantime, we could probably have esbuild-jest parse the inline one out and pass that to Jest.

I figured this out by looking at what babel-jest does, which is pass the sourceMaps: "both" option to babel, which generates an inline sourcemap and returns one to the caller. See https://github.com/facebook/jest/blob/master/packages/babel-jest/src/index.ts#L47 and https://babeljs.io/docs/en/options#sourcemaps .

[schickling]

Thanks for your help @airhorns! 🙏

[zandaqo]

What's the current situation with this issue? Should setting sourcemap: 'both' work now with esbuild 0.8.31?