From c28a601d80e242ccccc586797e29dd8fe2bdf4bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rub=C3=A9n=20Norte?= Date: Fri, 1 Aug 2025 10:33:01 -0700 Subject: [PATCH] Add tests for refs in Text (#52980) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/52980 Changelog: [internal] Adds Fantom tests for the behavior of `refs` in `Text` components. Reviewed By: rshest Differential Revision: D79436148 fbshipit-source-id: 6d357740303f4868d176af7b4559891af77b79f8 --- .../Libraries/Text/__tests__/Text-itest.js | 70 +++++++++++++++++++ 1 file changed, 70 insertions(+) diff --git a/packages/react-native/Libraries/Text/__tests__/Text-itest.js b/packages/react-native/Libraries/Text/__tests__/Text-itest.js index c023262e17e..c6f94ea3e0d 100644 --- a/packages/react-native/Libraries/Text/__tests__/Text-itest.js +++ b/packages/react-native/Libraries/Text/__tests__/Text-itest.js @@ -10,9 +10,15 @@ import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment'; +import type {HostInstance} from 'react-native'; + +import ensureInstance from '../../../src/private/__tests__/utilities/ensureInstance'; import * as Fantom from '@react-native/fantom'; import * as React from 'react'; +import {createRef} from 'react'; import {Text} from 'react-native'; +import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement'; +import ReadOnlyText from 'react-native/src/private/webapis/dom/nodes/ReadOnlyText'; describe('', () => { describe('props', () => { @@ -60,4 +66,68 @@ describe('', () => { }); }); }); + + describe('ref', () => { + it('is a element node', () => { + const elementRef = createRef(); + + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render(Some text); + }); + + const element = ensureInstance(elementRef.current, ReactNativeElement); + expect(element.tagName).toBe('RN:Paragraph'); + }); + + it('has a single text child node when not nested', () => { + const elementRef = createRef(); + + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render(Some text); + }); + + const element = ensureInstance(elementRef.current, ReactNativeElement); + expect(element.childNodes.length).toBe(1); + + const textChild = ensureInstance(element.childNodes[0], ReadOnlyText); + expect(textChild.textContent).toBe('Some text'); + }); + + it('has text and element child nodes when nested', () => { + const elementRef = createRef(); + + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render( + + Some text also in bold + , + ); + }); + + const element = ensureInstance(elementRef.current, ReactNativeElement); + expect(element.childNodes.length).toBe(2); + + const firstChild = ensureInstance(element.childNodes[0], ReadOnlyText); + expect(firstChild.textContent).toBe('Some text '); + + const secondChild = ensureInstance( + element.childNodes[1], + ReactNativeElement, + ); + expect(secondChild.tagName).toBe('RN:Text'); + expect(secondChild.childNodes.length).toBe(1); + + const secondChildText = ensureInstance( + secondChild.childNodes[0], + ReadOnlyText, + ); + expect(secondChildText.textContent).toBe('also in bold'); + }); + }); });