Estoy usando jest con react-native para ejecutar casos de prueba unitaria. Y cada vez que se encuentra con Image lanza la siguiente advertencia
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 | />Traté de reemplazar el código para
<Image src={{uri: require('images/cloud.png')}} />como se sugiere en https://stackoverflow.com/a/36460928/3855179 pero comenzó a mostrar la siguiente advertencia y la aplicación se interrumpe
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¿Alguna idea de cómo se puede manejar esto?
Sería útil ver la estructura de archivos junto con el archivo de configuración de jest.
Pero mi mejor suposición es que jest no puede encontrar el archivo en la ubicación designada.
Pocas cosas que se pueden probar:
(1) intente cambiar la ubicación del archivo para que sea un poco más explícito así:
por ejemplo, si la imagen está en el mismo directorio -- source={require('./images/cloud.png')}
por ejemplo, si un directorio está arriba, source={require('../images/cloud.png')}
(2) intente simular la imagen en el archivo de prueba de esta manera:
jest.mock("images/cloud.png")(3) Especifique una ubicación en el archivo de configuración de jest (o en el archivo package.json si tiene una clave de jest allí) para todos los tipos de imágenes, de esta manera jest usará eso como fuente de imagen cada vez que encuentre una imagen:
p.ej -
moduleNameMapper: { "\\.(jpg|jpeg|png|svg)$": "<rootDir>/images/dummy-image.js", }Más doco en moduleNameWrapper aquí - https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring
En mi caso, estaba tratando de usar una imagen que tiene un espacio en su nombre, como <rootDir>/stupidly_named images.png . Parece que React Native está contento con estos nombres, pero no Jest. Rellenar el espacio ( <rootDir>/stupidly_named_images.png ) solucionó el error. Y no estoy usando ningún moduleNameWrapper :
"react-native": "0.68.2" "jest": "^28.1.0" "@testing-library/react-native": "^9.1.0"