React项目Jest单元测试报错：TypeError: Path must be a string. Received undefined

嘿，我之前也碰到过这个Jest的路径错误，结合你的配置和错误栈来看，大概率是Jest在解析路径时找不到必要的配置项，导致path.relative接收到了undefined参数。给你几个亲测有效的解决方案：

方案1：给jest.config.json加上rootDir配置 #

Jest需要明确知道项目的根目录，不然解析路径时很容易出问题。修改你的配置文件，加上rootDir字段：

{
  "rootDir": ".",
  "snapshotSerializers": [
    "enzyme-to-json/serializer"
  ],
  "transformIgnorePatterns": [
    "node_modules/(?!(react-native|my-project|redux-persist)/)"
  ]
}

这里"rootDir": "."是把当前目录设为根目录，你也可以根据自己项目结构改成具体路径，比如"./src"。

方案2：升级enzyme-to-json版本 #

如果你的Jest版本比较新，但enzyme-to-json版本太老，可能会出现路径处理的兼容问题。建议把它更到最新稳定版：

npm update enzyme-to-json --save-dev
# 用yarn的话就是
yarn upgrade enzyme-to-json --dev

升级完再重新跑测试命令试试。

方案3：添加transform配置确保JS/JSX文件被正确转换 #

有时候缺了transform配置，Jest没法正确解析文件路径，也会触发这个错误。可以在配置里加上Babel转换的设置：

{
  "rootDir": ".",
  "snapshotSerializers": [
    "enzyme-to-json/serializer"
  ],
  "transformIgnorePatterns": [
    "node_modules/(?!(react-native|my-project|redux-persist)/)"
  ],
  "transform": {
    "^.+\\.(js|jsx)$": "babel-jest"
  }
}

要是你还没装babel-jest和相关Babel依赖，先安上：

npm install babel-jest @babel/core @babel/preset-env @babel/preset-react --save-dev

别忘了还要有.babelrc或者babel.config.json配置文件，确保Babel能正确转换React代码。

方案4：检查路径别名配置（如果有的话） #

要是你项目里用了路径别名（比如moduleNameMapper），一定要确认这些配置的路径都是有效的字符串，别出现undefined的情况。举个例子：

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

试完上面的方案，再重新执行jest --config=jest.config.json --watch，应该就能解决这个路径错误啦。

内容的提问来源于stack exchange，提问作者CrazySynthax