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:
- Create an app with
react-native init
- Add
enzyme
(and some more) as a dev dependency. The resultingpackage.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):
- 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)
@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 aText
as aComponent
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 toreact ^16.4.0.0
, while RN 0.57 is already usingreact 16.5.x
, so we tried a less ambitious upgrade to RN 0.56 (since that usesreact 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.