Estoy buscando poder usar alias de webpack para resolver importaciones cuando uso jest y, de manera óptima, hacer referencia a webpack.aliases para evitar la duplicación.
Conf. en broma:
"jest": { "modulePaths": ["src"], "moduleDirectories": ["node_modules"], "moduleNameMapper": { "^@shared$": "<rootDir>/shared/", "^@components$": "<rootDir>/shared/components/" } },Alias de paquetes web:
exports.aliases = { '@shared': path.resolve(paths.APP_DIR, 'shared'), '@components': path.resolve(paths.APP_DIR, 'shared/components'), };Importaciones:
import Ordinal from '@shared/utils/Ordinal.jsx'; import Avatar from '@components/common/Avatar.jsx'; Por alguna razón, @ causa problemas, por lo que cuando se elimina (tanto en alias como en importación), puede encontrar components shared pero aún no se pueden resolver.
FAIL src/shared/components/test/Test.spec.jsx ● Test suite failed to run Cannot find module '@shared/utils/Ordinal.jsx' from 'Test.jsx'He intentado usar jest-webpack-alias , babel-plugin-module-resolver y los documentos de Jest/Webpack
Esto parece haber sido arreglado.
A continuación se muestra una configuración de trabajo:
Versiones
"jest": "~20.0.4"
"webpack": "^3.5.6"
paquete.json
"jest": { "moduleNameMapper": { "^@root(.*)$": "<rootDir>/src$1", "^@components(.*)$": "<rootDir>/src/components$1", } }paquete web.shared.js
const paths = { APP_DIR: path.resolve(__dirname, '..', 'src'), }; exports.resolveRoot = [paths.APP_DIR, 'node_modules']; exports.aliases = { '@root': path.resolve(paths.APP_DIR, ''), '@components': path.resolve(paths.APP_DIR, 'components'), };Ya que tuve el mismo problema antes volví a leer, y esta vez con más detenimiento la documentación. La configuración correcta debe ser:
"jest": { "moduleNameMapper": { "^@shared(.*)$": "<rootDir>/shared$1", "^@components(.*)$": "<rootDir>/shared/components$1" } },Usando: "jest": "^26.5.3", y "webpack": "4.41.5", pude hacer coincidir correctamente mis alias de paquete web/mecanografiado en jest.config.js con este patrón:
Configuración del paquete web:
module.exports = { // the rest of your config resolve: { alias: { 'components': path.resolve(__dirname, 'js/app/components'), 'modules': path.resolve(__dirname, 'js/app/modules'), 'types': path.resolve(__dirname, 'js/types'), 'hooks': path.resolve(__dirname, 'js/app/hooks'), 'reducers': path.resolve(__dirname, 'js/app/reducers'), '__test-utils__': path.resolve(__dirname, 'js/app/__test-utils__') } }, }Jest.config.js:
moduleNameMapper: { '^types/(.*)$': '<rootDir>/js/types/$1', '^components/(.*)$': '<rootDir>/js/app/components/$1', '^modules/(.*)$': '<rootDir>/js/app/modules/$1', '^hooks/(.*)$': '<rootDir>/js/app/hooks/$1', '^reducers/(.*)$': '<rootDir>/js/app/reducers/$1', '^__test-utils__/(.)$': '<rootDir>/js/app/__test-utils__/$1' }Aquí hay una explicación de los símbolos:
(.*)$ : captura lo que venga después de la coincidencia exacta (el directorio)$1 : asígnelo a este valor en el directorio que especifique.y tsconfig.json:
"paths": { "config": ["config/dev", "config/production"], "components/*": ["js/app/components/*"], "modules/*": ["js/app/modules/*"], "types/*": ["js/types/*"], "hooks/*": ["js/app/hooks/*"], "reducers/*": ["js/app/reducers/*"], "__test-utils__/*": ["js/app/__test-utils__/*"] }