Jest/Enzyme snapshots show 'Component' instead of the native component

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
      Memory: 189.02 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.11.4 - /usr/local/bin/node
      Yarn: 1.10.1 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.config/yarn/global/node_modules/.bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        Build Tools: 27.0.3, 28.0.1, 28.0.3
        API Levels: 27, 28
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.1/10O23u - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728 
      react-native: 0.57.3 => 0.57.3 

Description

In React Native 0.57, the snapshots taken by Jest and Enzyme show Component instead of the actual native component (e.g. View, Text). See diff. This is not only an issue when used with Jest, but also with Enzyme (https://github.com/airbnb/enzyme/issues/1743).

Reproducible Demo

This can be reproduced by simply upgrading react-native as shown here.

A full example is located at https://github.com/rajivshah3/rn-broken-snapshot. The master branch is the latest version of React Native with a working snapshot test, the 0.55 branch is v0.55 of React Native, and broken-example is an example of a project that is trying to upgrade from v0.55 to the latest version.

[linnett]

Good shout @rajivshah3 - PR: https://github.com/facebook/react-native/pull/23287

[rajivshah3]

@linnett it looks like the same issue. They moved to React.forwardRef but didn’t specify the displayName property (see the React docs for info about this): https://github.com/facebook/react-native/blob/842b9c106a3258d923cf81b21b4253ffd45ac7f7/Libraries/Image/Image.ios.js#L126

If you want to do a PR for this, I think specifying displayName under the line shown above should fix it. So it would look like:

Image = React.forwardRef(Image);
Image.displayName = 'Image';

That’s essentially what I did to fix View and Text in https://github.com/facebook/react-native/commit/7a914fcef4ae035221e1f984c104ba20430d6fad