使用Jest和Webpack别名进行测试

tjvv9vkg  于 2023-05-23  发布在  Webpack
关注(0)|答案(9)|浏览(540)

我希望在使用jest时能够使用webpack别名来解析导入,最好是引用webpack.aliases以避免重复。
Jest conf:

"jest": {
    "modulePaths": ["src"],
    "moduleDirectories": ["node_modules"],
    "moduleNameMapper": {
      "^@shared$": "<rootDir>/shared/",
      "^@components$": "<rootDir>/shared/components/"
    }
  },

Webpack别名:

exports.aliases = {
    '@shared': path.resolve(paths.APP_DIR, 'shared'),
    '@components': path.resolve(paths.APP_DIR, 'shared/components'),
};

进口:

import Ordinal from '@shared/utils/Ordinal.jsx';
import Avatar from '@components/common/Avatar.jsx';

由于某些原因,@会导致问题,因此当删除时(在别名和导入中),它可以找到shared,但components仍然无法解决。

FAIL  src/shared/components/test/Test.spec.jsx
  ● Test suite failed to run

    Cannot find module '@shared/utils/Ordinal.jsx' from 'Test.jsx'

我尝试使用jest-webpack-aliasbabel-plugin-module-resolverJest/Webpack docs

k4emjkb1

k4emjkb11#

这似乎已被修复。
下面是一个工作设置:

版本

"jest": "~20.0.4"
"webpack": "^3.5.6"

包.json

"jest": {
  "moduleNameMapper": {
    "^@root(.*)$": "<rootDir>/src$1",
    "^@components(.*)$": "<rootDir>/src/components$1",
  } 
}

webpack.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'),
};
j5fpnvbx

j5fpnvbx2#

由于我遇到了同样的问题,我才再次阅读,这一次更仔细的文件。正确的配置应为:

"jest": {
    "moduleNameMapper": {
      "^@shared(.*)$": "<rootDir>/shared$1",
      "^@components(.*)$": "<rootDir>/shared/components$1"
    }
  },
8ftvxx2r

8ftvxx2r3#

使用:"jest": "^26.5.3","webpack": "4.41.5",,我能够正确地匹配我在jest.config.js中的webpack/typescript别名:
Webpack配置:

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' 
  }

以下是对这些符号的解释:

  • (.*)$:捕获精确匹配之后的任何内容(目录)
  • $1:将其Map到我指定的目录中的这个值。

和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__/*"]
    }
gtlvzcf8

gtlvzcf84#

对于任何使用@作为其模块的root的人,您必须更加具体,因为其他库可以在节点模块中使用@

"jest": {
    moduleNameMapper: {
      "^@/(.*)$": "<rootDir>/src/$1"
    },
 }

它的意思是“任何与@/匹配的内容都应该发送到<rootDir>/src/<rest of the path>

sqxo8psd

sqxo8psd5#

FWIW,尝试切换别名顺序,保持更具体的向上和不太具体的向下,例如。

"moduleNameMapper": {
  "^@components$": "<rootDir>/shared/components/",
  "^@shared$": "<rootDir>/shared/"
}
fruv7luv

fruv7luv6#

没有一个建议的答案对我有用。
可以用下面的模式解决它:
Jest版本25+

moduleNameMapper: {
    '^Screens(.*)': '<rootDir>/src/screens/$1',
    '^Components(.*)': '<rootDir>/src/components/$1',
    '^Assets(.*)': '<rootDir>/src/assets/$1',
    '^Services/(.*)': '<rootDir>/src/services/$1',
  },
0mkxixxg

0mkxixxg7#

这是一个真实的的疯狂,但当我试图像这样Mappackage.json中的模块时:

"jest": {
  "moduleNameMapper": {
    '@root/(.*)': '<rootDir>/../$1'
  }
}

它不工作。
但是当我在jest.config.js中做同样的事情时,它可以工作:

module.exports = {
   moduleNameMapper: {
     '@root/(.*)': '<rootDir>/../$1'
   }
}
b5buobof

b5buobof8#

这个解决方案对我来说很好:

moduleNameMapper: {
    '^Screens(.*)': '<rootDir>/src/screens/$1',
    '^Components(.*)': '<rootDir>/src/components/$1',
    '^Assets(.*)': '<rootDir>/src/assets/$1',
    '^Services/(.*)': '<rootDir>/src/services/$1',
  },
js81xvg6

js81xvg69#

假设您的webpack别名位于webpack.yml中的“resolved_paths”块中。
要在jest中添加相同的别名,如果您的jest配置位于package.json中,请使用moduleDirectories:

"jest":{
  "moduleDirectories":[
     ".",
      "<rootDir>/shared/components/",
      "<rootDir>/shared/",
      "node_modules"
  ]
}

相关问题