title: Why does PhpStorm not step into my Vue component code when debugging Jest unit tests?
body: <p>I have a <a href="https://vuejs.org/" rel="nofollow noreferrer">Vue</a> web application for which I've written unit tests using <a href="https://jestjs.io/" rel="nofollow noreferrer">Jest</a> (v23.6.0).</p>
  
  <p>When I debug a unit test in <a href="https://www.jetbrains.com/phpstorm/" rel="nofollow noreferrer">PhpStorm</a> (v2018.3.1), it breaks on breakpoints placed in my unit test code. However, when I place breakpoints in the Vue component under test, PhpStorm ignores them. </p>
  
  <p>Also, when I try to step into my Vue component test from a breakpoint placed in a unit test, PhpStorm ignores and treats my "step into" instruction as if it were a "step over".</p>
  
  <p>I should add that my project uses <a href="https://babeljs.io/" rel="nofollow noreferrer">Babel</a> (v7.0.0-beta.3) for ES6 support. Thinking the issue might derive from differences in line numbers following transpilation, I've added the following to my <code>.babelrc</code> file:</p>
  
  <pre><code>"sourceMaps": true,
  "retainLines": true
  </code></pre>
  
  <p>Unfortunately this did not solve the issue.</p>
  
  <p>Why is PhpStorm ignoring my breakpoints and how can I fix it?</p>