0

Getting this error with running jest test. Have tried a lot to disable prop types rule:

Warning: Failed prop type: Invalid prop `source` supplied to `Image`, expected one of type [number].
        in Image (at Welcome.js:134)
        in Welcome (created by Connect(Welcome))
        in Connect(Welcome) (at Welcome.test.js:25)
        in Provider (at Welcome.test.js:24)

      132 |             {!global.isFirstTime &&
      133 |                 <TouchableOpacity style={styles.backIcon} onPress={() => props.navigation.goBack()}>
    > 134 |                     <Image source={Images.back} />
          |                    ^
      135 |                 </TouchableOpacity>
      136 |             }
      137 |

Already added the rule in .eslintrc.json

"rules": {
    "react/prop-types": 0
}

Also adding jest config moduleNameMapper

moduleNameMapper: {
        '\\.(css|less)$': 'identity-obj-proxy',
        '^(.+)\\.(jpg|jpeg|gif|png|mp4|mkv|avi|webm|swf|wav|mid)$': 'jest-static-stubs/$2'
    },

So when the test runs Images.back contains: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==

  1. "react": "16.13.1",
  2. "react-native": "0.63.5 ",
  3. "eslint": "^8.39.0",
  4. "jest": "26.6.3",

Thanks.

thevikas
  • 1,618
  • 1
  • 14
  • 31
  • Does this answer your question? [Jest: Failed prop type: Invalid prop \`source\` supplied to \`Image\`, expected one of type \[number\]](https://stackoverflow.com/questions/71761668/jest-failed-prop-type-invalid-prop-source-supplied-to-image-expected-one) – Aous Mohammad Apr 26 '23 at 07:46
  • 1
    That answer did not help me. As I have verified the file is found and mapped as data: uri by the jest test. – thevikas Apr 26 '23 at 08:17
  • as I see Images.back is base64file and not a link, so I think you are passing the source image to the Image react-native as a file without adding a uri or link, try to added it like this: `` – Aous Mohammad Apr 26 '23 at 08:28
  • yes you are right. this is not my code, but it works perfectly in the mobile. it even passes the test, but jest keep coming with this warning. Maybe to solve this is to just disable this validation. `back: require('../assets/images/back.png'),` – thevikas Apr 26 '23 at 08:37

1 Answers1

0

Please try:

<Image source={{uri: Images.back}} style={{height:50, width:50}} />
Hiren Vaghela
  • 916
  • 1
  • 9
  • 22
  • Have done that already. This works in the test and solves my problem. But does not show any images in the runtime. So not my solution. – thevikas Apr 26 '23 at 14:22
  • Please check onError on Image component. or make force update after get image source. – Hiren Vaghela Apr 26 '23 at 14:24