I am looking to be able to use webpack aliases to resolve imports when using jest, and optimally, reference the webpack.aliases
to avoid duplication.
Jest conf:
"jest": {
"modulePaths": ["src"],
"moduleDirectories": ["node_modules"],
"moduleNameMapper": {
"^@shared$": "<rootDir>/shared/",
"^@components$": "<rootDir>/shared/components/"
}
},
Webpack aliases:
exports.aliases = {
'@shared': path.resolve(paths.APP_DIR, 'shared'),
'@components': path.resolve(paths.APP_DIR, 'shared/components'),
};
Imports:
import Ordinal from '@shared/utils/Ordinal.jsx';
import Avatar from '@components/common/Avatar.jsx';
For some reason the @
causes issues, so when removed (in both alias and import), it can find shared
but components
still cannot be resolved.
FAIL src/shared/components/test/Test.spec.jsx
● Test suite failed to run
Cannot find module '@shared/utils/Ordinal.jsx' from 'Test.jsx'
I have tried using jest-webpack-alias, babel-plugin-module-resolver and the Jest/Webpack docs
Since I had the same problem before I read again, and this time more carefully the documentation. Correct config should be:
"jest": {
"moduleNameMapper": {
"^@shared(.*)$": "<rootDir>/shared$1",
"^@components(.*)$": "<rootDir>/shared/components$1"
}
},