开玩笑：道具类型失败：提供给“图像”的道具“来源”无效，应为 [数字] 类型之一

Question

我正在使用 jest 和 react-native 来运行单元测试用例。 每当遇到Image它都会抛出以下警告

 Warning: Failed prop type: Invalid prop `source` supplied to `Image`, expected one of type [number].
          at Component (~/.../node_modules/react-native/jest/mockComponent.js:28:18)
          at SummaryTile (~/.../src/components/home/SomeComponent.tsx:18:3)

      23 |   >
      24 |     {backgroundImg || (
    > 25 |       <Image
         |       ^
      26 |         source={require('images/cloud.png')}
      27 |       />

我试图将代码替换为

<Image src={{uri: require('images/cloud.png')}} />

正如https://stackoverflow.com/a/36460928/3855179中所建议的，但它开始抛出以下警告并且应用程序中断

Warning: Failed prop type: Invalid prop `source` supplied to `Image`, expected one of type [string, number].
    at Image (http://expo_url:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:76209:43)

Jest Version: 26.6.3
React Native version: 0.64.3
Node Version: 16.14.2

知道如何处理吗？

Answer 1

查看您的文件结构以及 jest 配置文件会很有帮助。

但我最好的猜测是 - jest 无法在指定位置找到文件。

可以尝试的几件事：

(1) 尝试将文件位置更改为更明确一点，如下所示：

例如 - 如果图像在同一目录中 -- source={require('./images/cloud.png')}

例如 - 如果一个目录向上 - source={require('../images/cloud.png')}

---

(2) 尝试像这样模拟测试文件中的图像：

jest.mock("images/cloud.png")

---

(3) 在 jest 配置文件（或 package.json 文件，如果你有 jest 键）中为所有图像类型指定一个位置，这样 jest 将在遇到图像时将其用作图像源：

例如 -

 moduleNameMapper: {
      "\\.(jpg|jpeg|png|svg)$": "<rootDir>/images/dummy-image.js",
    }

更多关于 moduleNameWrapper 的文档 - https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring

Answer 2

就我而言，我试图使用名称中有空格的图像，例如<rootDir>/stupidly_named images.png 。 看起来，React Native 对这些命名很满意，但 Jest 不满意。 填写空格 ( <rootDir>/stupidly_named_images.png ) 修复了错误。 而且我没有使用任何moduleNameWrapper ：

"react-native": "0.68.2"
"jest": "^28.1.0"
"@testing-library/react-native": "^9.1.0"