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

[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

[ljharb]

You'd need a react native adapter to reliably use enzyme with React Native (see #1436).

enzyme also doesn't support snapshots (but .debug() output should work well for that).

Can you share the output of .debug(), before and after the update?

[rgal75]

The test using .debug():

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

With react-native 0.55.4 the snapshot is

exports[`renders correctly 1`] = `
"<Component style={{...}}>
  <Text style={{...}} accessible={true} allowFontScaling={true} ellipsizeMode=\\"tail\\">
    Hello!
  </Text>
</Component>"
`;

with react-native 0.56.0 it is

exports[`renders correctly`] = `
"<Component style={{...}}>
  <Component testId=\\"text\\" style={{...}}>
    Hello!
  </Component>
</Component>"
`;

[ljharb]

I'm confused; if it's changing as react-native changes, that's an issue with react-native (and one a react-native adapter could handle). What's changing as enzyme changes?

[corintho]

Could this be related to #1539 ? The reflection from reconciler is out of sync with the dom generated from react-native?

[ljharb]

@corintho it's entirely possible. Either way, using enzyme with react-native without a react-native-specific adapter is always going to have quirks.

[ljharb]

Closing for now; happy to reopen if needed.

[rajapanidepu]

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

[ljharb]

@rajapanidepu there's no fix I'm aware of; without a react-native adapter, enzyme doesn't currently support react-native. If someone were to create one - whether in this repo, or separately - then that would be the path for addressing any issues.

[AndrewHenderson]

@rgal75 I'm experiencing this same issue with react-test-renderer/shallow.

I began experiencing this after upgrading to MacOS Mojave for Xcode 10 for iOS 12 support. I was then forced to upgrade React and React Native for compatibility with Xcode 10.

Apologies for posting in Enzyme repo, but this is the only ticket I've found regarding this issue. I'm hoping they are related.

Below is my package.json with new changes on the right side. Changes to the Dev Dependencies is the result of me hacking away at broken Jest tests after upgrading main dependencies.

And this is my .babelrc with new changes on the right side, as well:

[tjjjwxzq]

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.

[ljharb]

@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.

[tjjjwxzq]

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

[rajivshah3]

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

[jamesmcn1]

Still an issue for me :( - RN 0.57.0

[linnett]

Also same issue for me RN 0.57.8