Fix/image methods mock in jest setup (#43497)

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 https://github.com/facebook/react-native/pull/36996)
- It causes issues like https://github.com/facebook/react-native/issues/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: https://github.com/facebook/react-native/pull/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: https://github.com/facebook/react-native/pull/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: https://github.com/facebook/react-native/pull/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
This commit is contained in:
Delphine Bugner
2024-03-18 06:53:39 -07:00
committed by Facebook GitHub Bot
parent a2e22404fb
commit d53cc2b46d
2 changed files with 68 additions and 11 deletions
@@ -13,6 +13,8 @@
import type {ElementRef} from 'react';
import NativeImageLoaderAndroid from '../NativeImageLoaderAndroid';
import NativeImageLoaderIOS from '../NativeImageLoaderIOS';
import {act, create} from 'react-test-renderer';
const render = require('../../../jest/renderer');
@@ -291,4 +293,62 @@ describe('<Image />', () => {
expect(secondInstance).toBe(null);
expect(imageInstancesFromCallback.size).toBe(0);
});
it('should resolve asset source even when Image module is mocked', async () => {
jest.mock('../Image');
const resolvedSource = Image.resolveAssetSource({uri: 'foo-bar.jpg'});
expect(resolvedSource).toEqual({uri: 'foo-bar.jpg'});
});
it('should compute image size even when Image module is mocked', async () => {
jest.mock('../Image');
const mockOnGetSizeSuccess = jest.fn((width, height) => undefined);
const mockSuccessCallback = (width: number, height: number) =>
mockOnGetSizeSuccess(width, height);
await Image.getSize('foo-bar.jpg', mockSuccessCallback);
await jest.runAllTicks();
expect(mockOnGetSizeSuccess).toHaveBeenCalledWith(320, 240);
await Image.getSizeWithHeaders(
'foo-bar.jpg',
{header: 'foo'},
mockSuccessCallback,
);
expect(mockOnGetSizeSuccess).toHaveBeenCalledWith(333, 222);
});
it('should call native prefetch methods when calling JS prefetch methods', async () => {
jest.mock('../Image');
await Image.prefetch('foo-bar.jpg');
expect(NativeImageLoaderIOS.prefetchImage).toHaveBeenCalledWith(
'foo-bar.jpg',
);
expect(NativeImageLoaderAndroid.prefetchImage).toHaveBeenCalledWith(
'foo-bar.jpg',
);
await Image.prefetchWithMetadata('foo-bar.jpg', 'foo-queryRootName');
expect(NativeImageLoaderIOS.prefetchImageWithMetadata).toHaveBeenCalledWith(
'foo-bar.jpg',
'foo-queryRootName',
0,
);
expect(NativeImageLoaderAndroid.prefetchImage).toHaveBeenCalledWith(
'foo-bar.jpg',
);
});
it('should call native queryCache method when JS queryCache method is called', async () => {
jest.mock('../Image');
await Image.queryCache(['foo-bar.jpg']);
expect(NativeImageLoaderIOS.queryCache).toHaveBeenCalledWith([
'foo-bar.jpg',
]);
expect(NativeImageLoaderIOS.queryCache).toHaveBeenCalledWith([
'foo-bar.jpg',
]);
});
});
+8 -11
View File
@@ -112,17 +112,9 @@ 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),
)
@@ -261,7 +253,12 @@ jest
},
ImageLoader: {
getSize: jest.fn(url => Promise.resolve([320, 240])),
getSizeWithHeaders: jest.fn((url, headers) =>
Promise.resolve({height: 222, width: 333}),
),
prefetchImage: jest.fn(),
prefetchImageWithMetadata: jest.fn(),
queryCache: jest.fn(),
},
ImageViewManager: {
getSize: jest.fn((uri, success) =>