Skip to content

Conversation

mdjastrzebski
Copy link
Contributor

@mdjastrzebski mdjastrzebski commented Jul 15, 2025

Summary:

Resolves #52764

When checking React Native Testing Library support for RN 0.81 I've noticed that all snapshot tests that rendered <View /> rendered it <View_withRef>.

This change break both RN Testing Library simulation layer (could be fixed if needed), and will also affect any users using snapshot testing to test their components.

I've traced this change to #51023 which removed:

- View.displayName = 'View';

This PR restores displayName in order to preserver the snapshot stability.

Note most other built-in components declare displayName:

Changelog:

Test Plan:

@meta-cla meta-cla bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jul 15, 2025
@facebook-github-bot facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Jul 15, 2025
@react-native-bot
Copy link
Collaborator

react-native-bot commented Jul 15, 2025


Warnings
⚠️ ❗ JavaScript API change detected - This PR commits an update to ReactNativeApi.d.ts, indicating a change to React Native's public JavaScript API. Please include a clear changelog message. This change will be subject to extra review.

This change was flagged as: BREAKING

Generated by 🚫 dangerJS against cd7ab70

@mdjastrzebski
Copy link
Contributor Author

re danger not about "BREAKING": this PR restores the state from before #51023, which will only be publish with RN 0.81, therefore should not be considered breaking

@yungsters
Copy link
Contributor

How did you determine #51023 to be the root cause?

I would expect #52018 to have caused this, because it migrates View to Component Syntax. I suspect this because the name _withRef suffix comes from hermes-parser compiling Component Syntax into forwardRef calls with that suffix.

The ideal fix for this is to configure hermes-parser to set options.reactRuntimeTarget: '19' so that it does not produce forwardRef calls at all (because ref is now a prop). The reactRuntimeTarget option was added in [email protected].

I wonder if we need to set it here in @react-native/babel-preset: https://github.com/facebook/react-native/blob/main/packages/react-native-babel-preset/src/configs/main.js#L42C51-L42C65

@yungsters
Copy link
Contributor

Are you able to check whether #52625 resolves the issue for you?

@mdjastrzebski
Copy link
Contributor Author

mdjastrzebski commented Jul 16, 2025

@yungsters I've checked the #52625 but it still renders View as View_withRef.

Re root cause:

  • I've noticed that chore: convert View to React 19 #51023 removed View.displayName = 'View'.
  • After restoring setting displayName it in local node_modules of RNTL repo, it returned rendering to View (instead of View_withRef).
  • Note: the rest of chore: convert View to React 19 #51023 seems ok, the only problem is the missing displayName. Which is normally set on other RN components like Text or TextInput.

@mdjastrzebski mdjastrzebski force-pushed the fix/restore-view-display-name branch from 6197ecb to 0267d51 Compare July 16, 2025 09:55
@yungsters
Copy link
Contributor

As mentioned in my previous comment, #51023 did not cause this. A component implemented as a named function will use that name in snapshot tests.

The View_withRef name comes from how hermes-parser compiles Component Syntax, which was introduced to View by #52018.

Can you tell me how to reproduce this? The root cause is that hermes-parser is not being correctly configured in your test environment, because it is missing the reactRuntimeTarget: '19' configuration.

@mdjastrzebski
Copy link
Contributor Author

mdjastrzebski commented Jul 17, 2025

As mentioned in my previous reply, setting reactRuntimeTarget: '19' in the @react-native/babel-preset does not solve the <View_withRef /> issue.

I've prepared a minimal repro showcasing that:

As additional context I will mention that non of the other components (Text, TextInput, Switch, etc) are affected by the _withRef naming change. It's only View that being affected with that.

@yungsters please advise.

@mdjastrzebski mdjastrzebski force-pushed the fix/restore-view-display-name branch from 97bb21a to cd7ab70 Compare July 22, 2025 15:52
@mdjastrzebski
Copy link
Contributor Author

Closing as essentially same fix (restoring displayName) was applied in #52688.
CC: @yungsters

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[nightly and 0.81-rc] View renders as <View_withTag /> in snapshot tests

4 participants