Jest moduleNameMapper 查找文件：“resolver”：未定义

Question

component我在路径下的文件夹中有一个文本文件（除其他外） ：src/components/text

\n

import Text from "components/text";但是，当使用webpack 别名时，Jest 找不到该文件。

\n

我尝试添加到package.json：

\n

\n"jest": {\n    "globals": {\n      "NODE_ENV": "test"\n    },\n    "transform": {\n      "\\\\.[jt]sx?$": "babel-jest"\n    },\n    "verbose": false,\n    "rootDir": ".",\n    "collectCoverageFrom": [\n      "**/*.{js,jsx,ts,tsx}",\n      "!**/*.d.ts"\n    ],\n    "moduleFileExtensions": [\n      "js",\n      "jsx",\n      "ts",\n      "tsx"\n    ],\n    "moduleNameMapper": {\n      "\\\\.(css|less|scss|sass|svg)$": "identity-obj-proxy",\n      "^components/(.*)$": "<rootDir>/src/components/$1",\n      "^assets/(.*)$": "<rootDir>/src/assets/$1",\n      "^utils/(.*)$": "<rootDir>/src/utils/$1",\n      "^styles/(.*)$": "<rootDir>/src/styles/$1"\n      "/^locales\\/(.*)$/": "<rootDir>/src/locales/$1",\n    },\n    "testMatch": [\n      "**/*.{spec,test}.{js,jsx,ts,tsx}"\n    ],\n    "modulePathIgnorePatterns": [\n      "./dist"\n    ],\n    "transformIgnorePatterns": [\n      "/node_modules/(?!(@opt-ui|@equinor))"\n    ],\n    "coverageDirectory": "<rootDir>/tests/coverage/"\n  }\n

\n

但我收到错误：

\n

Test suite failed to run\n\n    Configuration error:\n    \n    Could not locate module components/text mapped as:\n    /Users/olahalvorsen/cssu-dashboard-client/src/components$1.\n    \n    Please check your configuration for these entries:\n    {\n      "moduleNameMapper": {\n        "/^components\\/(.*)$/": "/Users/olahalvorsen/cssu-dashboard-client/src/components$1"\n      },\n      "resolver": undefined\n    }\n

\n

所以，"^components/(.*)$": "<rootDir>/src/components/$1"在 moduleNameMapper 中解决了上面的第一个问题:)

\n

但现在我又遇到了另一个错误：

\n

FAIL  src/pages/errorpage/tests/error.test.jsx\n  \xe2\x97\x8f Test suite failed to run\n\n    Cannot find module \'locales\' from \'src/utils/helpers/helpers.js\'\n\n    Require stack:\n      src/utils/helpers/helpers.js\n      src/components/text/index.jsx\n      src/pages/errorpage/error.jsx\n      src/pages/errorpage/tests/error.test.jsx\n\n      29 | import { nb, enGB } from "date-fns/locale";\n      30 | \n    > 31 | import translations from "locales";\n         | ^\n      32 | \n      33 | export const capitalize = string => {\n      34 |   if (typeof string === "string") {\n\n\n

\n

我更新了上面的package.json。locales 的相对目录是src/locales. 这不应该起作用吗：

\n

  "moduleNameMapper": {\n      "^locales/(.*)$": "<rootDir>/src/locales$1",\n

\n

我尝试使用： "/^locales\\/(.*)$/": "<rootDir>/src/locales/$1"

\n

编辑，找到解决方案：

\n

解决方案是使用："^locales(.*)$": "<rootDir>/src/locales/$1"

\n

Answer 1

根据日志，我猜您的配置/^components\/(.*)$/: "<rootDir>/src/components$1"与您给定的代码不同^components(.*)$。

假设以上是正确的，那么您可能需要更改为以下内容才能使其正常工作：

{
  "moduleNameMapper": {
    "/^components\/(.*)$/": "<rootDir>/src/components/$1" // You missed out `/` before the rest value `$1`
  },
}