title: How to configure source maps when using Jest within Visual Studio Code debugger
body: <p>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.</p>
  
  <p>VScode version - 1.6.0(latest)</p>
  
  <p>My directory structure resembles this</p>
  
  <pre><code>-package.json
  -node_modules
  -.babelrc
  -dist
  -app
   -myModule.js
   -test
     -myModule.spec.js
  </code></pre>
  
  <p>then in my .babelrc I have the following</p>
  
  <pre><code>{
      "presets" : ["react-native"],
      "sourceMaps" : true,
      "outDir" : "./dist"
  }
  </code></pre>
  
  <p>I have tried setting the <code>sourceMaps</code> prop to both <code>true</code> and <code>inline</code> and both did not work with current <code>launch.json</code> configuration.</p>
  
  <p>Here is my <code>launch.json</code> for running the Jest tester</p>
  
  <pre><code>{
  
              "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"
  }
  </code></pre>
  
  <p>Both <code>--harmony</code> and <code>--runInBand</code> are necessary to get the debugger working properly since Jest will spawn a child process which conflicts with the ports.</p>
  
  <p>I also have additional Jest configuration within my package.json</p>
  
  <pre><code>"jest": {
      "preset": "jest-react-native"
    }
  </code></pre>
  
  <p>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. </p>
  
  <p>Any pointers or different configurations are all welcomed.</p>