Unexpected ref object provided for ExpoImage (writing a unit test to render a image with expo-image)

[emmadal]

Minimal reproducible example

https://github.com/emmadal/fox/blob/main/components/__tests__/Logo.test.tsx

What platform(s) does this occur on?

No response

Did you reproduce this issue in a development build?

Yes

Summary

Hello, i have some issues with expo-image when i want to write unit test. first i have create a component which render a image with expo-image component, then my component render correctly. the issue is on the unit test, after writting the unit test i get in the console that all my tests are passed but i get this following console error from expo-image:

    console.error
      Warning: Unexpected ref object provided for ExpoImage. Use either a ref-setter function or React.createRef().
          at NativeComponent (/Users/emmadal/Projects/fox/node_modules/expo-modules-core/src/NativeViewManagerAdapter.native.tsx:79:25)
          at ExpoImage (/Users/emmadal/Projects/fox/node_modules/expo-image/src/ExpoImage.tsx:30:17)
          at Image (/Users/emmadal/Projects/fox/node_modules/expo-image/src/Image.tsx:15:20)
          at style (/Users/emmadal/Projects/fox/components/Logo.tsx:7:24)

      10 |
      11 |   it("renders the logo correctly from a local file", () => {
    > 12 |     const { getByTestId } = render(<Logo />);
         |                                   ^
      13 |     const logo = getByTestId("logo");
      14 |     expect(logo).toBeTruthy();
      15 |   });

      at printWarning (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:72:30)
      at error (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:46:7)
      at commitAttachRef (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13458:11)
      at commitLayoutEffectOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13342:9)
      at commitLayoutMountEffects_complete (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14330:9)
      at commitLayoutEffects_begin (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14316:7)
      at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14301:3)
      at commitRootImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16062:5)
      at commitRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15933:5)
      at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15454:3)
      at flushSyncCallbacks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2597:22)
      at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
      at act (node_modules/react/cjs/react.development.js:2521:11)
      at actImplementation (node_modules/@testing-library/react-native/src/act.ts:30:25)
      at renderWithAct (node_modules/@testing-library/react-native/src/render-act.ts:12:11)
      at renderInternal (node_modules/@testing-library/react-native/src/render.tsx:59:33)
      at renderInternal (node_modules/@testing-library/react-native/src/render.tsx:29:10)
      at Object.<anonymous> (components/__tests__/Logo.test.tsx:12:35)

 PASS  components/__tests__/ThemedText.test.tsx

Test Suites: 5 passed, 5 total
Tests:       12 passed, 12 total
Snapshots:   5 passed, 5 total
Time:        1.569 s, estimated 2 s

this is the content of my logo.test.tsx file:

import * as React from "react";
import { render } from "@testing-library/react-native";
import { Logo } from "../Logo";
Logo
describe("ImageComponent", () => {
  it("render component correctly", () => {
    const tree = render(<Logo />).toJSON();
    expect(tree).toMatchSnapshot();
  });

  it("renders the logo correctly from a local file", () => {
    const { getByTestId } = render(<Logo />);
    const logo = getByTestId("logo");
    expect(logo).toBeTruthy();
  });
});

finaly this is my the content of my logo.tsx component

import { ImageStyle, StyleProp, StyleSheet } from "react-native";
import { Image } from "expo-image";

const blurhash =
  "|rF?hV%2WCj[ayj[a|j[az_NaeWBj@ayfRayfQfQM{M|azj[azf6fQfQfQIpWXofj[ayj[j[fQayWCoeoeaya}j[ayfQa{oLj?j[WVj[ayayj[fQoff7azayj[ayj[j[ayofayayayj[fQj[ayayj[ayfjj[j[ayjuayj[";

export function Logo({ style }: { style?: StyleProp<ImageStyle> }) {
  return (
    <Image
      style={[styles.image, style]}
      source={require("@/assets/images/icon.png")}
      placeholder={{ blurhash }}
      contentFit="contain"
      transition={1000}
      testID="logo"
      alt="logo"
      aria-label="logo"
      cachePolicy="memory-disk"
    />
  );
}

const styles = StyleSheet.create({
  image: {
    aspectRatio: 1,
    height: 130,
  },
});

Environment

  expo-env-info 1.2.0 environment info:
    System:
      OS: macOS 14.5
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 20.15.0 - ~/.nvm/versions/node/v20.15.0/bin/node
      npm: 10.7.0 - ~/.nvm/versions/node/v20.15.0/bin/npm
      Watchman: 2024.06.24.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.15.2 - /Users/emmadal/.gem/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 23.5, iOS 17.5, macOS 14.5, tvOS 17.5, visionOS 1.2, watchOS 10.5
    IDEs:
      Android Studio: 2024.1 AI-241.15989.150.2411.11948838
      Xcode: 15.4/15F31d - /usr/bin/xcodebuild
    npmPackages:
      expo: ^51.0.17 => 51.0.17 
      expo-router: ~3.5.17 => 3.5.17 
      react: 18.2.0 => 18.2.0 
      react-dom: 18.2.0 => 18.2.0 
      react-native: 0.74.2 => 0.74.2 
      react-native-web: ~0.19.10 => 0.19.12 
    npmGlobalPackages:
      eas-cli: 10.0.3

Expo Doctor Diagnostics

✔ Check Expo config for common issues
✔ Check package.json for common issues
✔ Check native tooling versions
✔ Check dependencies for packages that should not be installed directly
✔ Check for common project setup issues
✔ Check npm/ yarn versions
✔ Check for issues with metro config
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check for legacy global CLI installed locally
✔ Check that native modules do not use incompatible support packages
✔ Check that packages match versions required by installed Expo SDK
✔ Check that native modules use compatible support package versions for installed Expo SDK

Didn't find any issues with the project!

[javigutierrezfer]

This error has been discussed in this issue

28831

The PR is currently merged, but I don't know if there is a released version with the fix.

[emmadal]

ok thanks @javigutierrezfer

[emmadal]

in the new release v51.0.18 the console.warning has been fixed

[AndyMeagher]

I am on version v51.0.21 and am seeing this, has there been a regression?

[whiletruefranz]

Can report the same issue on v51.0.22

[emmadal]

Can report the same issue on v51.0.22

@whiletruefranz There are a regression I think, because on the v51.0 18, this bugs was fixed. In the next version version the same issue appears again.

[hanyufoodles]

Still having the issue with expo: 51.0.23 expo-image: 1.12.13 jest-expo: 51.0.3

[emmadal]

Still having the issue with expo: 51.0.23 expo-image: 1.12.13 jest-expo: 51.0.3

use the expo SDK v51.0 18 maybe in next version they will fix it

[hanyufoodles]

Still having the issue with expo: 51.0.23 expo-image: 1.12.13 jest-expo: 51.0.3

use the expo SDK v51.0 18 maybe in next version they will fix it

Still the same error with expo: 51.0.18, expo-image: 1.12.13, jest-expo: 51.0.3:

      Warning: Unexpected ref object provided for ExpoImage. Use either a ref-setter function or React.createRef().
      at NativeComponent (node_modules/expo-modules-core/src/NativeViewManagerAdapter.native.tsx:79:25)
      at ExpoImage (node_modules/expo-image/src/ExpoImage.tsx:30:17)

[emmadal]

Still having the issue with expo: 51.0.23 expo-image: 1.12.13 jest-expo: 51.0.3

use the expo SDK v51.0 18 maybe in next version they will fix it

Still the same error with expo: 51.0.18, expo-image: 1.12.13, jest-expo: 51.0.3:

      Warning: Unexpected ref object provided for ExpoImage. Use either a ref-setter function or React.createRef().
      at NativeComponent (node_modules/expo-modules-core/src/NativeViewManagerAdapter.native.tsx:79:25)
      at ExpoImage (node_modules/expo-image/src/ExpoImage.tsx:30:17)

try "expo-image": "~1.12.12", i have downgraded to this version then the issues has been fixed

[hanyufoodles]

Still having the issue with expo: 51.0.23 expo-image: 1.12.13 jest-expo: 51.0.3

use the expo SDK v51.0 18 maybe in next version they will fix it

Still the same error with expo: 51.0.18, expo-image: 1.12.13, jest-expo: 51.0.3:

      Warning: Unexpected ref object provided for ExpoImage. Use either a ref-setter function or React.createRef().
      at NativeComponent (node_modules/expo-modules-core/src/NativeViewManagerAdapter.native.tsx:79:25)
      at ExpoImage (node_modules/expo-image/src/ExpoImage.tsx:30:17)

try "expo-image": "~1.12.12", i have downgraded to this version then the issues has been fixed

The same thing happens with expo: 51.0.18, expo-image: 1.12.12, jest-expo: 51.0.3

[AndyMeagher]

Any update on when this will be fixed?

[icastillejogomez]

same here!

[hanyufoodles]

I don't have this issue anymore with these versions:

expo:  51.0.31
expo-image: 1.12.15
jest-expo: 51.0.3

[ashtonlance]

I have the same issue. I've even added

jest.mock('expo-image', () => {
    const actualExpoImage = jest.requireActual('expo-image');
    const { Image } = jest.requireActual('react-native');

    return { ...actualExpoImage, Image };
});

to my jest.setup.ts

expo: 51.0.31 expo-image: 1.12.15 jest-expo: 51.0.3