From 4abca9688e0c51f8455907cc74fdb4d27675a00b Mon Sep 17 00:00:00 2001 From: HarshitMadhav Date: Fri, 17 Apr 2026 03:02:20 +0530 Subject: [PATCH] fix(jest): mock getBoundingClientRect on host components in tests --- .../jest-preset/jest/MockNativeMethods.js | 22 +++++++ .../__tests__/getBoundingClientRect-test.js | 59 +++++++++++++++++++ .../jest/__tests__/mockNativeMethods-test.js | 57 ++++++++++++++++++ .../jest-preset/jest/mockNativeComponent.js | 21 +++++++ 4 files changed, 159 insertions(+) create mode 100644 packages/jest-preset/jest/__tests__/getBoundingClientRect-test.js create mode 100644 packages/jest-preset/jest/__tests__/mockNativeMethods-test.js diff --git a/packages/jest-preset/jest/MockNativeMethods.js b/packages/jest-preset/jest/MockNativeMethods.js index 036d529c0b5e..f3818d25b584 100644 --- a/packages/jest-preset/jest/MockNativeMethods.js +++ b/packages/jest-preset/jest/MockNativeMethods.js @@ -15,6 +15,18 @@ const MockNativeMethods = { setNativeProps: jest.fn(), focus: jest.fn(), blur: jest.fn(), + getBoundingClientRect: jest.fn(function () { + return { + x: 0, + y: 0, + width: 0, + height: 0, + top: 0, + left: 0, + right: 0, + bottom: 0, + }; + }), } as { measure: () => void, measureInWindow: () => void, @@ -22,6 +34,16 @@ const MockNativeMethods = { setNativeProps: () => void, focus: () => void, blur: () => void, + getBoundingClientRect: () => { + x: number, + y: number, + width: number, + height: number, + top: number, + left: number, + right: number, + bottom: number, + }, }; export default MockNativeMethods; diff --git a/packages/jest-preset/jest/__tests__/getBoundingClientRect-test.js b/packages/jest-preset/jest/__tests__/getBoundingClientRect-test.js new file mode 100644 index 000000000000..2c6c0d7bc124 --- /dev/null +++ b/packages/jest-preset/jest/__tests__/getBoundingClientRect-test.js @@ -0,0 +1,59 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow strict-local + * @format + */ + +import * as React from 'react'; +import View from 'react-native/Libraries/Components/View/View'; +import TestRenderer from 'react-test-renderer'; + +describe('getBoundingClientRect on mocked host components', () => { + test('View ref has getBoundingClientRect as a function', async () => { + let viewRef: $FlowFixMe = null; + + await TestRenderer.act(() => { + TestRenderer.create( + { + viewRef = ref; + }} + />, + ); + }); + + expect(viewRef).not.toBeNull(); + expect(typeof viewRef.getBoundingClientRect).toBe('function'); + }); + + test('calling getBoundingClientRect on a View ref does not throw', async () => { + let rect: $FlowFixMe = null; + + await TestRenderer.act(() => { + TestRenderer.create( + { + if (ref) { + rect = ref.getBoundingClientRect(); + } + }} + />, + ); + }); + + expect(rect).toEqual({ + x: 0, + y: 0, + width: 0, + height: 0, + top: 0, + left: 0, + right: 0, + bottom: 0, + }); + }); +}); diff --git a/packages/jest-preset/jest/__tests__/mockNativeMethods-test.js b/packages/jest-preset/jest/__tests__/mockNativeMethods-test.js new file mode 100644 index 000000000000..b646b87ab8a6 --- /dev/null +++ b/packages/jest-preset/jest/__tests__/mockNativeMethods-test.js @@ -0,0 +1,57 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow strict-local + * @format + */ + +import MockNativeMethods from '../MockNativeMethods'; + +describe('MockNativeMethods', () => { + test('provides mock for measure', () => { + expect(jest.isMockFunction(MockNativeMethods.measure)).toBe(true); + }); + + test('provides mock for measureInWindow', () => { + expect(jest.isMockFunction(MockNativeMethods.measureInWindow)).toBe(true); + }); + + test('provides mock for measureLayout', () => { + expect(jest.isMockFunction(MockNativeMethods.measureLayout)).toBe(true); + }); + + test('provides mock for setNativeProps', () => { + expect(jest.isMockFunction(MockNativeMethods.setNativeProps)).toBe(true); + }); + + test('provides mock for focus', () => { + expect(jest.isMockFunction(MockNativeMethods.focus)).toBe(true); + }); + + test('provides mock for blur', () => { + expect(jest.isMockFunction(MockNativeMethods.blur)).toBe(true); + }); + + test('provides mock for getBoundingClientRect', () => { + expect(jest.isMockFunction(MockNativeMethods.getBoundingClientRect)).toBe( + true, + ); + }); + + test('getBoundingClientRect returns a DOMRect-like object with zero values', () => { + const rect = MockNativeMethods.getBoundingClientRect(); + expect(rect).toEqual({ + x: 0, + y: 0, + width: 0, + height: 0, + top: 0, + left: 0, + right: 0, + bottom: 0, + }); + }); +}); diff --git a/packages/jest-preset/jest/mockNativeComponent.js b/packages/jest-preset/jest/mockNativeComponent.js index 01f2e9122399..4d10263814c1 100644 --- a/packages/jest-preset/jest/mockNativeComponent.js +++ b/packages/jest-preset/jest/mockNativeComponent.js @@ -39,6 +39,27 @@ export default function mockNativeComponent( measureInWindow: () => void = jest.fn(); measureLayout: () => void = jest.fn(); setNativeProps: () => void = jest.fn(); + getBoundingClientRect: () => { + x: number, + y: number, + width: number, + height: number, + top: number, + left: number, + right: number, + bottom: number, + } = jest.fn(function () { + return { + x: 0, + y: 0, + width: 0, + height: 0, + top: 0, + left: 0, + right: 0, + bottom: 0, + }; + }); }; if (viewName === 'RCTView') {