Adding aliases modules import for working with JEST

config/paths.js

@@ -38,7 +38,7 @@ module.exports = {
   appIndexJs: resolveApp('src/index.js'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
-  appContracts: resolveApp('gnosis-safe-contracts/build'),
+  appContracts: resolveApp('gnosis-safe-contracts/build/contracts'),
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveApp('src/setupTests.js'),
   appNodeModules: resolveApp('node_modules'),

config/webpack.config.dev.js

@@ -69,6 +69,10 @@ module.exports = {
     // some tools, although we do not recommend using it, see:
     // https://github.com/facebookincubator/create-react-app/issues/290
     extensions: ['.js', '.json', '.jsx'],
+    alias: {
+      '~': paths.appSrc,
+      '#': paths.appContracts,
+    }
   },
   output: {
     // Next line is not used in dev but WebpackDevServer crashes without it:

config/webpack.config.prod.js

@@ -111,6 +111,10 @@ module.exports = {
     // some tools, although we do not recommend using it, see:
     // https://github.com/facebookincubator/create-react-app/issues/290
     extensions: ['.js', '.json', '.jsx'],
+    alias: {
+      '~': paths.appSrc,
+      '#': paths.appContracts,
+    }
   },
 
   module: {

package.json

@@ -88,6 +88,8 @@
       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
     ],
     "moduleNameMapper": {
+      "~(.*)$": "<rootDir>/src/$1",
+      "#(.*)$": "<rootDir>/gnosis-safe-contracts/build/contracts/$1",
       "^react-native$": "react-native-web"
     },
     "moduleFileExtensions": [

src/App.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom'
-import Welcome from 'routes/welcome/components/Layout'
+import Welcome from '~/routes/welcome/components/Layout'
 
 const AppRoutes = () => (
   <Switch>

src/index.js

@@ -1,8 +1,8 @@
+import { MuiThemeProvider } from 'material-ui/styles'
 import React from 'react'
 import ReactDOM from 'react-dom'
+import theme from '~/theme/mui'
 import App from './App'
-import { MuiThemeProvider } from 'material-ui/styles';
-import theme from './theme/mui'
 
 const Root = () => (
   <MuiThemeProvider theme={theme}>

src/routes/welcome/components/Layout.jsx

@@ -1,12 +1,12 @@
 import Button from 'material-ui/Button';
 import React, { Component } from 'react'
 import { Form, Field } from 'react-final-form'
-import Safe from 'contracts/GnosisSafe.json'
-import getWeb3, { promisify } from 'utils/getWeb3'
 import contract from 'truffle-contract'
-import TextField from 'components/forms/TextField'
-import Page from 'components/layout/Page'
-import PageFrame from 'components/layout/PageFrame'
+import TextField from '~/components/forms/TextField'
+import Page from '~/components/layout/Page'
+import PageFrame from '~/components/layout/PageFrame'
+import getWeb3, { promisify } from '~/utils/getWeb3'
+import Safe from '#/GnosisSafe.json'
 import './App.scss'
 
 class App extends Component {