Skip to content

Commit

Permalink
Fix/image methods mock in jest setup (#43497)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
Delphine Bugner authored and facebook-github-bot committed Mar 18, 2024
1 parent a2e2240 commit d53cc2b
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 11 deletions.
60 changes: 60 additions & 0 deletions packages/react-native/Libraries/Image/__tests__/Image-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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',
]);
});
});
19 changes: 8 additions & 11 deletions packages/react-native/jest/setup.js
Original file line number Diff line number Diff line change
Expand Up @@ -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),
)
Expand Down Expand Up @@ -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) =>
Expand Down

0 comments on commit d53cc2b

Please sign in to comment.