-
-
Notifications
You must be signed in to change notification settings - Fork 2k
Closed
Labels
Description
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
AndrewHenderson, ponomarevv, mikelovesrobots, felipepalazzo, gusgard and 4 more