Debugging Jest unit tests

> My expectation would be that I could put a breakpoint in my source code, then run my test in debug and be able to suspend on the breakpoint.

yes, this is exactly the way it should work

>I see that my breakpoint actually gets the checkmark (meaning the debugger knows about it), but the test simply completes without stopping on the breakpoint.

this is likely a sourcemaps issue: source file is resolved from sourcemap, but the line number returned by debugger protocol doesn't match the actual line number. Most probably, the transpiled file version is returned instead of the original one.

I should have clarified that this is Node.js code that isn't transpiled.  Is there an additional step required? 

I'm trying to suspend inside of the code under test, not the Jest test itself.  The Node code isn't transpiled. 

Code tested by Jest is React code, which is a client-side (not Node.js) code that can't be executed without preprocessing

Jest is not only for React code. It's a multipurpose test framework. This is an example of testing Node Express with Jest. http://www.albertgao.xyz/2017/05/24/how-to-test-expressjs-with-jest-and-supertest/

I've found solution for typescript.

In my case I used separate jest-config.js and preprocessor.js. Then I install ts-jest package and update jest transform parameter value to '.(ts|tsx)': 'ts-jest' like described in https://github.com/kulshekhar/ts-jest#usage

And it finally works.

I've been unable to get Webstorm to debug Jest from Webpack with correct line numbers for over a year now. I've resorted to changing imports to requires, which fixes the line numbers, but that's super inconvenient. I'd really like the IntelliJ team to give us a minimum a Webstorm project where Jest works correctly with sourcemaps produced by babel. And please provide it without typescript, which is also a legitimate problem but separate from the core task of simply debugging a Jest test using sourcemaps. If I could get my environment setup correctly, it would save me many hours a week and make me feel much better about my development process with Webstorm.

Thanks.

For what it's worth, somebody must have read my initial comment.  2017.3 debugs Node.js tests just the way I could expect it to.  Can't speak to using source maps, as I've only been coding Node.js of late.  

I don't see an answer here for the issue I am seeing, using IntelliJ 2017.3.  I am building a React project, and trying to debug snapshot-comparison tests.  I am seeing exactly what the initial poster mentioned:  I make a breakpoint in my code, a checkmark appears, but the test runs and does not stop at my breakpoint.  It *does* stop, somewhere, because it thinks it is still running (shows red stop button, etc) but the test result has already been returned.

Elena Pogorelova, you mentioned something about the sourcemap being a probable cause - is there a solution to that issue which I might try?

Thanks!

As it's not clear what the problem is, no solutions can be proposed. I can hardly help unless you share a project that shows up the issue:(

I was initially seeing the problem reported but breakpoints are now working properly for me. The fix in my case was to change my node interpreter (Settings -> Languages and Frameworks -> Node JS and NPM) to node 6.10. I have various versions installed via nvm and node 6.x seem to work for me whereas 7.x don't.

My setup is jest + babel + webpack + flow targeting node 6 (AWS lambda), based closely off https://github.com/shashanktomar/serverless-webpack-babel-boilerplate

I'm using Webstorm 2017.3.2

Exact same problem -- but curiously only one file is not working right. The other files in the project seem ok.

PyCharm 2017.3.3. Jest test within a React framework, but the code under test is not a react component. Built with WebPack + Babel, Node 6.9.1. Also tried Node 6.10 and 9.5, same problem.

Sadly, this problem has cropped back up in 2017.3.4.  Set a breakpoint in some node code, Debug Jest tests, the checkpoint lights up with a checkmark for a brief second, but it doesn't suspend the node process and the test completes before I can debug. 

 @Rdevries please share a project that can be used to recreate the issue

Had similar problem with node 8.2, updating it to 8.9.x solved the issue (Webstorm 2017.3.5)

I run into the same problems.
Searched quiet a lot.

Looked at https://github.com/facebook/jest/issues/6683 and started to play with the parameters.

I ended successfully for this config (in package.json , items in bold made the difference) :

,
"jest": {
  "globals": {
    "ts-jest": {
      "skipBabel": true,
      "enableTsDiagnostics": false
    }
  },
  "transform": {
    "^.+\\.(ts|tsx)?$": "ts-jest"
  },
  "testRegex": "(/__tests__/.*|(\\.|/)(spec.jest))\\.(jsx?|tsx?)$",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
  ]
}

Hope it will help 2 u as well

Just try to add below line to your .babelrc; in my case this resolved the issue

"sourceMap": "inline",

I am also unable to get breakpoints working when running jest tests through the deubber. My Intellij version details are:

IntelliJ IDEA 2018.1.6 (Ultimate Edition)
Build #IU-181.5540.7, built on July 11, 2018
Expiration date: August 15, 2018
JRE: 1.8.0_152-release-1136-b39 amd64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Windows 10 10.0

please start a new forum thread, providing your configuration details (jest configuration file, package.json, etc.)

I found @Dsantic solution to work for me. I created my Vue app using Vue-CLI@3.0.1 on the command line and then adding the project to Webstorm 2018.2, selected all options incl. Typescript. I altered the package.json to this:

{
  "name": "webapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "node $NODE_DEBUG_OPTION ./node_modules/.bin/vue-cli-service serve",
    "build": "node $NODE_DEBUG_OPTION ./node_modules/.bin/vue-cli-service build",
    "lint": "node $NODE_DEBUG_OPTION ./node_modules/.bin/vue-cli-service lint",
    "test:unit": "node $NODE_DEBUG_OPTION ./node_modules/.bin/vue-cli-service test:unit",
    "test:e2e": "node $NODE_DEBUG_OPTION ./node_modules/.bin/vue-cli-service 
  },
...

... so that calling run the debug config on the npm scripts would inject `--inspect`. I then, as Dsantic mentioned added this to `babel.config.js`:

module.exports = {
  "sourceMap": "inline",
...

I didn't find that the solution posed by Doron Miller to work.

Thanks Doron Miller ! That fixed my issue, too.
(Tests setup: TypeScript, Svelte, @testing-library/svelte)

Just one addition was needed: i had "sourceMap: false" in my tsconfig.json 🙈 . Put that to true and finally, it works 😊

Just a note: if you have problems debugging the source files tested by Jest tests, check if you have collectCoverage enabled in your jest.config.js.
If the source file is instrumented for coverage, the generated code can't be correctly mapped to source; it's a well known limitation
If disabling coverage doesn't help, please create a support ticket

In my case the same issue was due to case-sensitivity FS on Windows. JS only, no typescript. The file was named myFile.js and I could import and run it both ways:

import MyClass1 from './myFile'; // worked
import MyClass2 from './MyFile'; // also worked

I changed it to correct casing and it worked. I tried to changed source map, but debbuger worked even if its off:

// .babelrc.js
module.exports  = {
    sourceMaps: false,
};

make sure to set the following in your tsconfig.json:

"sourceMap": true,
"inlineSourceMap": true.

It does not work for me neither. It works in Visual Studio Code but it does not work in Webstorm.

What IDE build do you use? Debugging in 2022.3.3 is broken due to WEB-59866; the fix will be included in 2022.3.4 update that is coming soon. For now, I can only suggest using 2023.1 Beta, it's not affected by this issue

Oh thanks for the info. I use indeed 2022.3.3 . I will check the beta later today.