From d53cc2b46dee5ed4d93ee76dea4aea9da42d0158 Mon Sep 17 00:00:00 2001 From: Delphine Bugner Date: Mon, 18 Mar 2024 06:53:39 -0700 Subject: [PATCH] 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 --- .../Libraries/Image/__tests__/Image-test.js | 60 +++++++++++++++++++ packages/react-native/jest/setup.js | 19 +++--- 2 files changed, 68 insertions(+), 11 deletions(-) diff --git a/packages/react-native/Libraries/Image/__tests__/Image-test.js b/packages/react-native/Libraries/Image/__tests__/Image-test.js index 46124adc88e..6cdedf05178 100644 --- a/packages/react-native/Libraries/Image/__tests__/Image-test.js +++ b/packages/react-native/Libraries/Image/__tests__/Image-test.js @@ -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('', () => { 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', + ]); + }); }); diff --git a/packages/react-native/jest/setup.js b/packages/react-native/jest/setup.js index 86cab65f6db..096623e349d 100644 --- a/packages/react-native/jest/setup.js +++ b/packages/react-native/jest/setup.js @@ -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) =>