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

[rajivshah3]

• 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 (enzymejs/enzyme#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.

[rajivshah3]

It seems like Button and Switch don't have this issue. Is it possible that e708010 or 3e534b9 caused this?

[ljharb]

Yes; you’d have to explicitly set a displayName property on the forwardRef to get it to show up.

[rajivshah3]

Aha, thanks @ljharb ! It looks like they tried to do that but ran into a problem, so they removed it (
ddf2c2f#diff-a562e4a7ac9e900c6d2bc644453e9152). I think it wasn’t working because forwardRef seems to not like arrow functions:
facebook/react#13703 (comment). I might be able to do a PR to fix this

[jamesmcn1]

@rajivshah3 did your fix get released in a new RN version yet?

[jamesmcn1]

Seems to have fixed all my tests when I just upgraded RN from 0.57.0 ---> 0.57.8

Thanks guys :)

[rajivshah3]

Yep, it was included in 0.57.5

…

On Jan 22, 2019, at 7:45 AM, James McNamara ***@***.***> wrote: Seems to have fixed all my tests when I just upgraded from 0.57.0 ---> 0.57.8 Thanks guys :) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[linnett]

Still seeing this issue in 0.57.8. <Image> showing as <Component> in my debug. Any ideas?

[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):

react-native/Libraries/Image/Image.ios.js

Line 126 in 842b9c1

Image = React.forwardRef(Image);

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 7a914fc

[linnett]

Good shout @rajivshah3 - PR: #23287