使用 Jest 和 Webpack 别名进行测试

IT技术 javascript reactjs webpack jestjs webpack-2
2021-04-23 01:07:01

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

开玩笑：

  "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 文档

6个回答

这似乎已被修复。

下面是一个工作设置：

版本

"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'),
};
请注意，配置可能位于jest.config.js.
2021-06-03 01:07:01
我的问题似乎moduleNameMapper 只适用于您的源代码，但不适用于您的包代码。如何解析 node_modules 中的某些包，这些包在玩笑中具有@或@@别名？比如包umi。
2021-06-05 01:07:01

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

  "jest": {
    "moduleNameMapper": {
      "^@shared(.*)$": "<rootDir>/shared$1",
      "^@components(.*)$": "<rootDir>/shared/components$1"
    }
  },
我尝试实现这个配置，但仍然有同样的问题。它找不到导入的文件：Cannot find module '@shared/utils/Ordinal.jsx' from 'Test.jsx'.
2021-05-23 01:07:01
我遇到了与 OP 相同的问题，@mayid 的解决方案最终为我解决了这个问题。
2021-05-25 01:07:01
如果你和我一样是个新手，这个配置可以在你的package.json文件中找到
2021-05-29 01:07:01
我不得不用"modulePaths": ["src"]. 那么是的，这个解决方案有效："^Commons$": "./Commons"
2021-06-09 01:07:01

使用："jest": "^26.5.3",并且"webpack": "4.41.5", 我能够将我的 webpack/typescript 别名jest.config.js与此模式正确匹配：

网络包配置：

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: 将它映射到我指定的目录中的这个值。

和 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__/*"]
    }
这个答案值得更多赞成 =)
2021-06-04 01:07:01
如果你确信你做的一切都是正确的，但 TS 仍然抱怨没有找到导入：友好提醒重新启动你的 TS 服务器。
2021-06-15 01:07:01

对于使用人@作为root自己的module，你必须要更具体，因为其他的库可以使用@的节点module。

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

它翻译成“任何匹配的东西都@/应该发送到<rootDir>/src/<rest of the path>

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

"moduleNameMapper": {
  "^@components$": "<rootDir>/shared/components/",
  "^@shared$": "<rootDir>/shared/"
}
不幸的是不是，因为它是一个私人公司存储库。
2021-05-25 01:07:01
你能用最小可行的代码创建一个 git repo，这个问题是可重现的吗？
2021-05-27 01:07:01
结合leo的回答试了一下，还是有同样的错误。
2021-05-30 01:07:01
能不能分享一下完整的代码，最好是github？
2021-06-04 01:07:01
对于范围包，我也收到相同的错误消息。我在gist.github.com/batwicket/da72ffa7d5324d8f7c5eb11f0ba07fad创建了一个非常小的项目。我尝试了别名方法.. 没有运气。我可能错过了一些简单的东西。任何帮助表示赞赏。
2021-06-08 01:07:01
其它你可能感兴趣的问题
上一篇使用 React Router v4 的多个布局 下一篇警告：在 <select> 上使用 'defaultValue' 或 'value' props，而不是在 <option> 上设置 'selected'