enzyme: Unexpected snapshot written when using react-native v0.56.0

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

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 9
  • Comments: 15 (6 by maintainers)

Most upvoted comments

@ljharb @rgal75 I am facing the same issue while using babel 7. What is the suggested fix here?

@ljharb I see. Thanks for the quick response! 😃

@tjjjwxzq @AndrewHenderson @rgal75 I think this might actually be an issue with React Native itself: https://github.com/facebook/react-native/issues/21937

@tjjjwxzq it’s unlikely we’ll be able to devote any roadmap time to developing a react-native adapter, since airbnb no longer uses RN. However, if a community member submitted a PR, I’d be more than happy to help review, and update the branch when possible, to get it into a shippable state.

We’re facing the exact same issue where calling wrapper.debug() shows that enzyme is rendering a Text as a Component instead.

Encountered this initially when trying to upgrade from RN 0.55 to 0.57. We thought it was due to the enzyme-adapter-react-16 only officially supporting up to react ^16.4.0.0, while RN 0.57 is already using react 16.5.x, so we tried a less ambitious upgrade to RN 0.56 (since that uses react 16.4.0) but the same issue occurs.

Do we have to hold off on upgrading RN entirely until enzyme comes up with a proper RN adapter? And is there even a roadmap for that? We will probably hold off upgrading for now but we really want to upgrade our RN version by the end of this year and we’re not sure whether this issue will be properly resolved by then. Maybe we will have to end up switching to react-test-renderer, but at this point I’m not sure if the same issue would still occur and that would also require a huge overhaul in our existing test suite.