Skip to content

Unexpected snapshot written when using react-native v0.56.0 #1743

@rgal75

Description

@rgal75

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:

  1. Create an app with react-native init
  2. 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)/)"
    ]
  }
}
  1. 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();
});
  1. 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):

  • OS: MacOS v10.13.6
  • Node v8.11.3
  • NPM v6.1.0

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions