Set up map alias for WebPack and Jest

Question

So I have this on my webpack.config.js

resolve : {
    alias : {
        Actions    : path.resolve(__dirname  , 'src/actions/'),
        Components : path.resolve( __dirname , 'src/components/' ),
        Reducers   : path.resolve( __dirname , 'src/reducers/' ),
        Sagas      : path.resolve( __dirname , 'src/sagas/' )
    }
},

All is well, my test app is working all good, I'm able to import my components ok and I'm able to build my app

However

My jest test fails

I get Cannot find module module name from component file error on the console

So i tried setting moduleNameMapper on my jest.config.json file

this is what I currently have

"moduleNameMapper"    : {
                        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$" : "<rootDir>/src/__mocks__/fileMock.js",
                        "\\.(css|less|scss|sass)$" : "<rootDir>/src/__mocks__/styleMock.js",
                        "^Actions$"    : "<rootDir>/src/actions/",
                        "^Reducers$"   : "<rootDir>/src/reducers/",
                        "^Components$" : "<rootDir>/src/components/",
                        "^Sagas$"      : "<rootDir>/src/sagas/"
                    }

Doesn't seem to work, I get the same error as the screenshot above.

Can you help me accomplish what I am trying to do and that is have some sort of map alias that works both on webpack and jest.

Thanks in advance.

Have you tried to use "^Actions" instead of "^Actions$"? The dollar sign at the end typically means that the regex pattern only matches, if the string (your require-string) ends there. — Felix, Jan 06 '18 at 10:59
@Felix I did but it just says "Configuration Error: Could not locate moudle ......" Its a different error compared to the above. — Jplus2, Jan 06 '18 at 11:05
Well... I just came across this [answer](https://stackoverflow.com/a/47253895/1893976). As I can see there and on the offical documenation, jest requires a direct mapping to the specific files, which means you have to use pairs like the following: `"^Actions(.*)$": "/src/actions$1"`. — Felix, Jan 06 '18 at 11:15

Set up map alias for WebPack and Jest

0 Answers0