Image.resolveAssetSource(require(path/${image}.png')) does not work on tests as previous version

[idrissakhi]

Description

Describe the bug

const emailMailImage = require('assets/images/email-mail/mail.png');

const emailMailImageDimensions = Image.resolveAssetSource(emailMailImage);

TypeError: Cannot read properties of undefined (reading 'width')Jest

Expected behavior Tests passe on 0.72.X

Steps to Reproduce install react native 0.73.0 and run a test having

        source={emailMailImage}
        resizeMode={'contain'}
        style={[
          styles.emailSentImage,
          {
            width: resizeEmailImageWidth,
            aspectRatio: emailMailImageDimensions.width / emailMailImageDimensions.height,
          },
        ]}
      />
      ```

Versions

npmPackages: @testing-library/react-native: 12.4.1 => 12.4.1 react: 18.2.0 => 18.2.0 react-native: 0.73.0 => 0.73.0 react-test-renderer: 18.2.0 => 18.2.0

Steps to reproduce

Steps to Reproduce install react native 0.73.0 and run a test having

        source={emailMailImage}
        resizeMode={'contain'}
        style={[
          styles.emailSentImage,
          {
            width: resizeEmailImageWidth,
            aspectRatio: emailMailImageDimensions.width / emailMailImageDimensions.height,
          },
        ]}
      />

React Native Version

0.73.0

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.1.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 906.72 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.12.0
    path: ~/.nvm/versions/node/v18.12.0/bin/node
  Yarn:
    version: 1.22.19
    path: /usr/local/bin/yarn
  npm:
    version: 8.19.2
    path: ~/.nvm/versions/node/v18.12.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/sakhiidris/.rvm/gems/ruby-3.0.0/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.0
      - iOS 17.0
      - macOS 14.0
      - tvOS 17.0
      - watchOS 10.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.10811636
  Xcode:
    version: 15.0.1/15A507
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 3.0.0
    path: /Users/sakhiidris/.rvm/rubies/ruby-3.0.0/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.0
    wanted: 0.73.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

TypeError: Cannot read properties of undefined (reading 'width')Jest

Reproducer

c

Screenshots and Videos

No response

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[cortinico]

@idrissakhi could you add a repro?

[delphinebugner]

I have the same using react-native-fast-image, which is also using resolveAssetSource to get the image sources. My snapshots break with empty URI for all images.

It's because in 0.73 this function resolveAssetSource is mocked with empty return :

// in packages/react-native/jest/setup.js
  .mock('../Libraries/Image/Image', () => {
    const Image = mockComponent('../Libraries/Image/Image');
    Image.getSize = jest.fn();
    Image.getSizeWithHeaders = jest.fn();
    Image.prefetch = jest.fn();
    Image.prefetchWithMetadata = jest.fn();
    Image.queryCache = jest.fn();
    Image.resolveAssetSource = jest.fn(); ⬅️⬅️⬅️ 🐞🐞🐞

    return Image;
  })

A quick fix could be:

 Image.resolveAssetSource = jest.fn().mockImplementation(source => source);

New image mock was introduced in 0.73, before we only had : .mock('../Libraries/Image/Image', () => mockComponent('../Libraries/Image/Image'))

[github-actions[bot]]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because the author hasn't provided the requested feedback after 7 days.

[ducminhleeh]

Do we have a plan to delegate this fix to 0.73.x, I still got a same error

[JacobDel]

seems still present in 0.74.3 and 0.74.5. Only 0.74.4 works for me. What is going on?

[delphinebugner]

@JacobDel yes, the fix will be present in the 0.75 only (see https://github.com/facebook/react-native/commit/d53cc2b46dee5ed4d93ee76dea4aea9da42d0158)

You can use this patch like - cc @ducminhleeh:

diff --git a/node_modules/react-native/jest/setup.js b/node_modules/react-native/jest/setup.js
index e98550f..a829f99 100644
--- a/node_modules/react-native/jest/setup.js
+++ b/node_modules/react-native/jest/setup.js
@@ -109,17 +109,8 @@ jest
       Constants: {},
     },
   }))
-  .mock('../Libraries/Image/Image', () => {
-    const Image = mockComponent('../Libraries/Image/Image');
-    Image.getSize = jest.fn();
-    Image.getSizeWithHeaders = jest.fn();
-    Image.prefetch = jest.fn();
-    Image.prefetchWithMetadata = jest.fn();
-    Image.queryCache = jest.fn();
-    Image.resolveAssetSource = jest.fn();
-
-    return Image;
-  })
+  .mock('../Libraries/Image/Image', () => mockComponent('../Libraries/Image/Image'),
+  )
   .mock('../Libraries/Text/Text', () =>
     mockComponent('../Libraries/Text/Text', MockNativeMethods),
   )

It's the one I use on 0.73.7; maybe there is some line number difference in 0.74.X, I hav'nt checked. It should not be hard to adapt, the idea is to replace the Image mock by the default one