时间戳

首页 > 解决方案 > 无法解决 Jest 中的 webpack 别名

reactjs - 无法解决 Jest 中的 webpack 别名

问题描述

我已经看到了其他线程。提供的解决方案对我不起作用。这就是我在这里写作的原因。我有一个带有别名的工作 webpack/ts/react 应用程序。在 Jest 中没有解析别名。

如何解决这个问题？

我可以在 jest 文件中编写绝对路径，但有时函数会使用别名调用其他函数。因此问题。Jest 崩溃并发出警告，例如：

无法从“src/containers/dashboard/utils.ts”中找到模块“src/utils/date”

Require stack:
  src/containers/dashboard/utils.ts
  src/tests/dashboard.test.ts

以下是别名：

// webpack
    resolve: {
      extensions: [".ts", ".tsx", ".js", "jsx", ".json"],
      alias: {
        api: path.resolve(__dirname, "src/api/"),
        assets: path.resolve(__dirname, "src/assets/"),
        components: path.resolve(__dirname, "src/components/"),
        containers: path.resolve(__dirname, "src/containers/"),
        data: path.resolve(__dirname, "src/data/"),
        i18n: path.resolve(__dirname, "src/i18n/"),
        models: path.resolve(__dirname, "src/models/"),
        pages: path.resolve(__dirname, "src/pages/"),
        routes: path.resolve(__dirname, "src/routes/"),
        src: path.resolve(__dirname, "src/"),
        stores: path.resolve(__dirname, "src/stores/"),
        utils: path.resolve(__dirname, "src/utils/"),
      },
    },
    
 // ts.config
  "paths": {
      "api/*": ["src/api/*"],
      "assets/*": ["src/assets/*"],
      "components/*": ["src/components/*"],
      "containers/*": ["src/containers/*"],
      "data/*": ["src/data/*"],
      "i18n/*": ["src/i18n/*"],
      "models/*": ["src/models/*"],
      "pages/*": ["src/pages/*"],
      "routes/*": ["src/routes/*"],
      "src/*": ["src/*"],
      "stores/*": ["stores/*"],
      "utils/*": ["src/utils/*"]
    },

// package.json
"jest": {
    "moduleNameMapper": {
      "^utils(.*)$": "<rootDir>/src/utils/$1",
      "^tests(.*)$": "<rootDir>/src/tests/$1",
      "^containers(.*)$": "<rootDir>/src/containers/$1"
    }
  }

我还尝试在 jest.config.js 中编写 jest 配置，但没有任何成功。

我的版本是：

  "webpack": "^5.24.2",
  "jest": "^26.6.3",
  "react": "^17.0.1",

标签： reactjswebpackjestjs

解决方案

推荐阅读