使用Jest和Webpack别名进行测试

JavaScript Webpack

DavaidTony宝儿

2020-03-24

我希望能够在使用笑话时使用webpack别名来解析导入，并且最好参考webpack.aliases以避免重复。

开玩笑的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-alias，babel-plugin-module-resolver和Jest / Webpack docs

第3554篇《使用Jest和Webpack别名进行测试》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
乐LEY 2020.03.24

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

"moduleNameMapper": {
  "^@components$": "<rootDir>/shared/components/",
  "^@shared$": "<rootDir>/shared/"
}
古一 2020.03.24

由于我在再次阅读之前遇到了相同的问题，因此这次要更仔细地阅读文档。正确的配置应为：

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android