Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unexpected snapshot written when using react-native v0.56.0

See original GitHub issue

Describe the bug Having upgraded the react-native dependency in an app from 0.55.4 to 0.56.0 caused shallow to produce a different snapshot. With 0.56.0 the snapshot only contains <Component> tags instead of specific <View>, <Text>, etc. tags.

To Reproduce Steps to reproduce the behavior:

Create an app with react-native init
Add enzyme (and some more) as a dev dependency. The resulting package.json is

{
  "name": "MyApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.4.1",
    "react-native": "0.56.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.6",
    "babel-jest": "^23.4.2",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react-native": "4.0.0",
    "enzyme": "^3.4.1",
    "enzyme-adapter-react-16": "^1.2.0",
    "enzyme-to-json": "^3.3.4",
    "eslint": "4.19.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-babel": "^5.1.0",
    "eslint-plugin-flowtype": "^2.50.0",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-prettier": "^2.6.2",
    "eslint-plugin-react": "7.9.1",
    "eslint-plugin-react-native": "3.2.0",
    "flow-bin": "^0.78.0",
    "flow-typed": "^2.5.1",
    "jest": "^23.4.2",
    "prettier": "^1.14.2",
    "react-dom": "^16.4.1",
    "react-test-renderer": "^16.4.2"
  },
  "jest": {
    "preset": "react-native",
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "setupFiles": [
      "<rootDir>/jest/setup.js"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native|lottie-react-native|expo|react-native-maps|react-native-svg|react-native-branch|native-base-shoutem-theme|react-native-easy-grid|react-native-drawer|react-native-vector-icons|react-native-keyboard-aware-scroll-view|react-navigation|react-native-safe-area-view|react-native-iphone-x-helper|native-base|@expo|react-native-scrollable-tab-view|react-native-i18n|react-native-material-textfield|react-navigation-drawer)/)"
    ]
  }
}

Add tests (App.test.js):

import React from 'react';
import { shallow } from 'enzyme';
import App from './App';

it('renders correctly - enzime', () => {
  const wrapper = shallow(<App />);
  expect(wrapper).toMatchSnapshot();
});

The snapshot (when using react-native v0.56.0) has only <Component> tags:

exports[`renders correctly - enzime 1`] = `
<Component
  style={
    Object {
      "alignItems": "center",
      "backgroundColor": "#F5FCFF",
      "flex": 1,
      "justifyContent": "center",
    }
  }
>
  <Component
    style={
      Object {
        "fontSize": 20,
        "margin": 10,
        "textAlign": "center",
      }
    }
    testId="text"
  >
    Hello!
  </Component>
</Component>
`;

Expected behavior The snapshot should be similar to:

exports[`renders correctly - enzyme 1`] = `
<View
  style={
    Object {
      "alignItems": "center",
      "backgroundColor": "#F5FCFF",
      "flex": 1,
      "justifyContent": "center",
    }
  }
>
  <Text
    style={
      Object {
        "fontSize": 20,
        "margin": 10,
        "textAlign": "center",
      }
    }
    testId="text"
  >
    Hello!
  </Text>
</View>
`;

Screenshots none

Desktop (please complete the following information):