Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image.getSize throwing exceptions in tests when using the jest-preset #35518

Closed
udeyrishi opened this issue Dec 1, 2022 · 1 comment
Closed

Comments

@udeyrishi
Copy link

Description

Using the Image.getSize method in a test when using the jest-preset throws the following exception:

 ● Foo › something

    TypeError: Cannot read property 'then' of undefined

       6 | const MyComponent = () => {
       7 |     useEffect(() => {
    >  8 |         Image.getSize('uri', (width, height) => {
         |               ^
       9 |             console.log({width, height})
      10 |         })
      11 |     }, [])

      at Function.getSize (node_modules/react-native/Libraries/Image/Image.ios.js:32:36)
      at screens/File.test.tsx:8:15
      at commitHookEffectListMount (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12932:26)
      at commitPassiveMountOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14346:11)
      at commitPassiveMountEffects_complete (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14306:9)
      at commitPassiveMountEffects_begin (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14293:7)
      at commitPassiveMountEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14281:3)
      at flushPassiveEffectsImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16233:3)
      at flushPassiveEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16182:14)
      at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16002:9

  ● Foo › something

    TypeError: success is not a function

      at node_modules/jest-expo/src/preset/setup.js:23:63

Version

0.70.5

Output of npx react-native info

System:
OS: macOS 13.0.1
CPU: (10) arm64 Apple M1 Max
Memory: 471.44 MB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 14.18.2 - ~/.nvm/versions/node/v14.18.2/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 6.14.15 - ~/.nvm/versions/node/v14.18.2/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9123335
Xcode: 14.1/14B47b - /usr/bin/xcodebuild
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.5 => 0.70.5
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

This issue was actually identified in an expo based project, and was logged here. I was notified that the underlying cause is the stock react-native preset. So I'm simply pasting the repro steps from the original issue.

  1. Create a blank expo project via expo-cli --init
  2. Select the tabs template so that the important dependencies are pre-installed
    • This installs jest-expo@47.0.1, which seems to have the issue
  3. Run yarn add @testing-library/jest-native @testing-library/react-native @types/jest jest-transform-stub -D
    • Just needed for writing the quick demo test
  4. Add the test file shared in the "code example" section
  5. Run it via yarn jest

Snack, code example, screenshot, or link to a repository

Pasting the same snippet as the one in the original Expo issue

import { useEffect } from "react"
import { Image } from "react-native"
import { render } from '@testing-library/react-native';

const MyComponent = () => {
    useEffect(() => {
        Image.getSize('uri', (width, height) => {
            console.log({width, height})
        })
    }, [])

    return null
}

describe('Foo', () => {
    it('something', () => {
        render(<MyComponent/>)
    })
})
@jeromecovington
Copy link

I've seen a similar error when testing a component that uses Image.getSize() to set an image to the full viewport width.

jeongshin pushed a commit to jeongshin/react-native that referenced this issue May 7, 2023
Summary:
Fixes facebook#35518

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[INTERNAL] [FIXED] - Add missing methods to Image mock

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests

Pull Request resolved: facebook#36996

Test Plan:
I used the example provided in the issue:

```javascript
import { useEffect } from "react"
import { Image } from "react-native"
import { render } from 'testing-library/react-native';

const MyComponent = () => {
    useEffect(() => {
        Image.getSize('uri', (width, height) => {
            console.log({width, height})
        })
    }, [])

    return null
}

describe('Foo', () => {
    it('something', () => {
        render(<MyComponent/>)
    })
})
```

Before the fix:
<img width="779" alt="Capture d’écran 2023-04-20 à 09 31 48" src="https://user-images.githubusercontent.com/17070498/233293066-e8673755-217f-48b4-a856-b9356ec3624e.png">

And after the fix:
<img width="346" alt="Capture d’écran 2023-04-20 à 09 32 40" src="https://user-images.githubusercontent.com/17070498/233293261-b6d02307-e67a-444f-a2de-e31eae32c0f1.png">

Reviewed By: cortinico

Differential Revision: D45179320

Pulled By: rshest

fbshipit-source-id: 323d04cdf720e23690e44f6c8621289e74b95c17
OlimpiaZurek pushed a commit to OlimpiaZurek/react-native that referenced this issue May 22, 2023
Summary:
Fixes facebook#35518

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[INTERNAL] [FIXED] - Add missing methods to Image mock

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests

Pull Request resolved: facebook#36996

Test Plan:
I used the example provided in the issue:

```javascript
import { useEffect } from "react"
import { Image } from "react-native"
import { render } from 'testing-library/react-native';

const MyComponent = () => {
    useEffect(() => {
        Image.getSize('uri', (width, height) => {
            console.log({width, height})
        })
    }, [])

    return null
}

describe('Foo', () => {
    it('something', () => {
        render(<MyComponent/>)
    })
})
```

Before the fix:
<img width="779" alt="Capture d’écran 2023-04-20 à 09 31 48" src="https://user-images.githubusercontent.com/17070498/233293066-e8673755-217f-48b4-a856-b9356ec3624e.png">

And after the fix:
<img width="346" alt="Capture d’écran 2023-04-20 à 09 32 40" src="https://user-images.githubusercontent.com/17070498/233293261-b6d02307-e67a-444f-a2de-e31eae32c0f1.png">

Reviewed By: cortinico

Differential Revision: D45179320

Pulled By: rshest

fbshipit-source-id: 323d04cdf720e23690e44f6c8621289e74b95c17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants