title: How to use path alias in a react project with Typescript + Jest
body: <p>I have been using jest for unit testing in my react project (typescript). Now I have enabled path alias in webpack and tsconfig. In order to use path alias with jest, I have followed this <a href="https://medium.com/@martin_hotell/type-safe-es2015-module-import-path-aliasing-with-webpack-typescript-and-jest-fe461347e010" rel="noreferrer">tutorial</a>. But I am getting this error when I run my tests:</p>
  
  <p><a href="https://i.stack.imgur.com/bXr8G.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bXr8G.png" alt="enter image description here"></a></p>
  
  <p>Here is my webpack configuration to enable path alias:</p>
  
  <pre><code>alias: {
    'ui': path.resolve(__dirname, 'src/framework/components/ui')
  }
  </code></pre>
  
  <p>Here is my jest configuration to enable path alias (package.json)</p>
  
  <pre><code>"moduleNameMapper": {
      "ui": "&lt;rootDir&gt;/src/framework/components/ui/"
  }
  </code></pre>
  
  <p>I also tried this version from the tutorial:</p>
  
  <pre><code>"moduleNameMapper": {
     "^ui/(.*)$1": "&lt;rootDir&gt;/src/framework/components/ui/$1"
  }
  </code></pre>
  
  <p>Finally here is my tsconfig.json configuration:</p>
  
  <pre><code>"baseUrl": "src",
  "paths": {
    "ui": ["framework/components/ui"]      
  }
  </code></pre>
  
  <p>When I run my test, jest actually resolves the path alias. But it fails to pick up components exposed as default. For e.g this line:</p>
  
  <pre><code>import Button from './FormComponents/Button';
  </code></pre>
  
  <p>fails because 'Button' is exported as default from its module.</p>
  
  <p>I hope my question makes sense. Thank you in advance for your help.</p>