Jest测试运行 - 找不到模块错误

Question

我一直在开发一个React Typescript仓库，但遇到了一个烦人的问题，就是Jest无法解析与根目录相关的导入。

 Cannot find module '~lib/dates' from 'utils.ts'

这是组件/工具中导入的样子。

import { abc } from '~lib/dates';   // this fails to run

如果我将此更改为相对路径，Jest测试将按预期工作。

import { abc } from '../../lib/dates';   // this runs as expected

同样的路径对于其他一些目录也有效，我有点困惑。

import { xyz } from '~components/home/constants';   // jest resolves it
import { abc } from '~lib/dates';                     // ERR

我尝试将moduleNameWrapper包含在jestConfig中，以查看是否可以正确解析导入，但这并没有帮助。

package.json

"jest": {
   ...

   "moduleNameWrapper": {
      "^~(.*)$": "<rootDir>/src/$1"
    }
}

我肯定可以更新VS代码设置，使自动导入相对于文件而不是根目录解析，但这已经困扰我一段时间了。如果有人能够提供任何指针以最好地解决此问题，那将是很棒的。

我在一个具有以下目录结构的monorepo中

repo
  server
  client
    src
       components
       lib
       utils
    package.json

- Sushanth --

---

你的代码库结构是什么样子的？ - tmhao2005

你在使用哪个转译器？Babel还是Tsc？ - tmhao2005

我正在使用一个带有Babel作为转译器的单一仓库。稍后会更新帖子并附上目录结构。 - Sushanth --

Answer 1

你的实现看起来没问题。但是选项 moduleNameWrapper 是错误的选项，应该是 moduleNameMapper。

我也有一个和你一样使用 babel 作为转换器的示例，由于我添加了 moduleNameMapper ，所以它能够正常工作。以下是我的示例：

Jest 配置：

https://github.com/tmhao2005/lerna-demo/blob/master/packages/share/jest.config.js

以下是用于测试的文件：

https://github.com/tmhao2005/lerna-demo/blob/master/packages/helper/src/index.ts https://github.com/tmhao2005/lerna-demo/blob/master/packages/helper/src/index.test.ts

- tmhao2005

---

我当时在想什么呢？完全忽视了API，从来没有想到过。更新了选项名称后尝试了一下，果然可以工作。非常感谢！ - Sushanth --

被接受的答案，其 GitHub 链接已不存在。太好了。 - Kerron

Answer 2

忘记~字符；

首先定义根目录为jest（即src/）；

然后从该根目录导入您的内容；（例如：import { abc } from 'lib/dates'）

顺便说一下，您始终可以像这样从默认根目录导入您的内容，而无需进行任何配置：import { abc } from 'src/lib/dates'

如果您正在使用create-react-app，请进一步阅读jest绝对导入

- Mechanic

---

根目录已在存储库中定义为./src，在这种情况下是客户端目录。这不是关于导入的问题，而是如何解决自动导入以与IDE配合工作。逐个检查所有文件并更新导入是一件麻烦的事情。此外，我们在没有使用create-react-app的情况下创建了该存储库。 - Sushanth --

@Sushanth-- 如果jest的根目录定义正确，那么你可以直接跳到第2步。 - Mechanic

事实是，如果这是一个个人项目，我不介意去做。但是由于团队中还有其他成员，这不能仅仅是个人偏好。我相当确定这样做会起作用，但这并不是我真正想要的答案。 另外一个重要的问题是，更新大约400个不同的文件真的很麻烦。 - Sushanth --

@Sushanth-- 嗯，手动替换它们确实不切实际。顺便说一下，如果你没有找到你要找的答案，可以尝试使用编辑器的搜索和替换功能，将 '~ 替换为 src/ 在导入 URL 中，如果根目录设置正确，这个改变不会破坏任何东西。 - Mechanic