vscode jest breakpoint does not open in main editor

Question

I'm running a react-native app, when trying to debug jest tests for some reason I can't seem to get it to actually stop on the code itself. Instead vscode opens a separate editor, with transformed code. So for example:

Running the above does:

When debugging the react-native app itself it all works fine. The relevant files I believe to this are:

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

And the jest config in package.json

"jest": {
  "preset": "react-native",
  "setupFiles": [
    "<rootDir>/jest.setup.js"
  ],
  "globals": {
    "__TEST__": true
  },
  "transform": {
    "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
  },
  "transformIgnorePatterns": [
    "node_modules/(?!react-native|native-base-shoutem-theme|@shoutem/animation|@shoutem/ui|tcomb-form-native|react-navigation|@react-native-community/async-storage|@codler/react-native-keyboard-aware-scroll-view)"
  ],
  "testPathIgnorePatterns": [
    "App-test.js",
    "ui.test.js"
  ]
}

And vscode launch.json

{
  "name": "vscode-jest-tests",
  "type": "node",
  "request": "launch",
  "args": ["--runInBand",],
  "cwd": "${workspaceFolder}",
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "disableOptimisticBPs": true,
  "program": "${workspaceFolder}/node_modules/jest/bin/jest",
},

Using react-native 0.63.4 and node v16.4.0 to which I have just updated to the latest.

I'm sure this used to work in the past however haven't worked on this project for a bit so not sure what update broke it (if it's node, vscode, react-native etc..).

Answer 1

I had same problem. I was able to get my setup working by changing transform config:

  transform: {
    '^.+\\.[jt]sx?$': ['babel-jest', { configFile: require.resolve('./babel.config.js') }]
  },