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

(jest/setup): Add missing methods to Image mock #36996

Closed

Conversation

AntoineDoubovetzky
Copy link
Contributor

Summary:

Fixes #35518

Changelog:

Test Plan:

I used the example provided in the 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/>)
    })
})

Before the fix:
Capture d’écran 2023-04-20 à 09 31 48

And after the fix:
Capture d’écran 2023-04-20 à 09 32 40

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Apr 20, 2023
@facebook-github-bot
Copy link
Contributor

@rshest has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label Apr 24, 2023
@facebook-github-bot
Copy link
Contributor

@rshest merged this pull request in 4da2013.

jeongshin pushed a commit to jeongshin/react-native that referenced this pull request 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 pull request 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
facebook-github-bot pushed a commit that referenced this pull request Mar 18, 2024
Summary:
### Context

- Since RN 0.73, in the jest.setup file, methods of the Image module (Image.getSize, Image.resolveAssetSource...) are mocked on the **JS side** (introduced in #36996)
- It causes issues like #41907 : `Image.resolveAssetSource` returns nothing in test env with the new JS mock, when some test relies on it.
- On my project, it broke the snapshots : the URL of images disappeared. I use `react-native-fast-image` which uses `Image.resolveAssetSource` to compute URLs.
- I first opened a PR to fix exclusively Image.resolveAssetSource: #41957. I will close it to focus on this new one.
- As suggested by ryancat and idrissakhi, it should be better to return to the previous mock, where no method is mocked on the JS side, and we can trust the actual JS to work in test.

This is what this PR intends to do.

### Content

Along fixing the Image module mock in jest.setup, this PR :

- adds unit test on each one of the methods, ensuring they have a consistent behavior even when the module is mocked.
- adds 3 missing native mocks for `NativeImageLoader`: `prefetchImageWithMetadata`, `getSizeWithHeaders` & `queryCache`. After this PR, no method from NativeImageLoader remains unmocked.

## Changelog:

[GENERAL][FIXED] - fix jest setup for Image methods (resolveAssetSource, getSize, prefetch, queryCache)

Pull Request resolved: #43497

Test Plan:
See exhaustive unit tests in PR.

You can re-use the mock with all the methods mocked and see how the new unit tests fail.

I also patched those changes on my project: my snapshot did have their URL back (see demonstrative screenshots in my original PR: #41957 - NB; fixed mock was different but result was the same -> those screenshots cover only two cases, but anyway they illustrate well the case!)

Reviewed By: ryancat

Differential Revision: D54959063

Pulled By: tdn120

fbshipit-source-id: 837266bd6991eb8292d9f6af1774e897ac7a8890
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Image.getSize throwing exceptions in tests when using the jest-preset
2 participants