mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
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:
committed by
Facebook GitHub Bot
parent
a2e22404fb
commit
d53cc2b46d
@@ -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',
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
Vendored
+8
-11
@@ -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) =>
|
||||
|
||||
Reference in New Issue
Block a user