I am writing an app using react native and I want to be able to test my code using the jest framework and use the visual studio code editor debugger to set breakpoints. The problem I am currently having is no matter how I run the debugger, whether it is through spawning a new instance or attaching it, I can't seem to get the source maps to work from babel. I have tried a variation of configurations within the .babelrc file but none seem to work.
VScode version - 1.6.0(latest)
My directory structure resembles this
-package.json
-node_modules
-.babelrc
-dist
-app
-myModule.js
-test
-myModule.spec.js
then in my .babelrc I have the following
{
"presets" : ["react-native"],
"sourceMaps" : true,
"outDir" : "./dist"
}
I have tried setting the sourceMaps
prop to both true
and inline
and both did not work with current launch.json
configuration.
Here is my launch.json
for running the Jest tester
{
"name" : "Launch via jest",
"type": "node",
"request": "launch",
"program" : "${workspaceRoot}/node_modules/jest/bin/jest.js",
"cwd": "${workspaceRoot}",
"args": [
"--runInBand"
],
"runtimeArgs": [
"--harmony"
],
"sourceMaps": true,
"outDir" : "${workspaceRoot}/dist"
}
Both --harmony
and --runInBand
are necessary to get the debugger working properly since Jest will spawn a child process which conflicts with the ports.
I also have additional Jest configuration within my package.json
"jest": {
"preset": "jest-react-native"
}
Now whenever I run the debugger, It runs and it stops at the babel output's breakpoints instead of the original source which doesn't help much. I should also mention that the test itself is compiled by babel which I am unsure if it matters.
Any pointers or different configurations are all welcomed.