title: How to setup tsconfig paths in jest.config.js. Angular 8. jest-preset-angular
body: <p>I have absolute paths set up in my tsconfig that work as expected during serve however do not work for jest.</p>
  
  <p>An example path looks like this:</p>
  
  <pre><code>"paths": {
      "@shared": "src/app/shared/index.ts"
  }
  </code></pre>
  
  <p>Then in a component I can use</p>
  
  <pre><code>import { MySharedComponent, MyOtherSharedComponent } from '@shared';
  </code></pre>
  
  <p>I am currently trying to move to Jest for testing. In my jest.config.js I have a moduleNameMapper section:</p>
  
  <pre><code>moduleNameMapper: {
      '@shared/(.*)': 'src/app/shared/$1'
  }
  </code></pre>
  
  <p>This results in</p>
  
  <pre><code>cannot find module @Shared
  </code></pre>
  
  <p>If I change my tsconfig path to this:</p>
  
  <pre><code>"paths": {
      "@shared/*": "src/app/shared/*"
  }
  </code></pre>
  
  <p>these no longer work</p>
  
  <pre><code>import { MySharedComponent, MyOtherSharedComponent } from '@shared';
  </code></pre>
  
  <p>and have to be updated to this</p>
  
  <pre><code>import { MySharedComponent } from '@shared/my-shared.component';
  import { MyOtherSharedComponent } from '@shared/my-other-shared.component';
  </code></pre>
  
  <p>the tests work fine and the project runs ok however it is a large project and I have hundreds of imports that use this format</p>
  
  <pre><code>import { MySharedComponent, MyOtherSharedComponent } from '@shared';
  </code></pre>
  
  <p>Is there a way to get moduleNameMapper to work with this path</p>
  
  <pre><code>"@shared": "src/app/shared/index.ts"
  </code></pre>