I have a React Native application that I've recently upgraded to 0.56.0
. I can build the app in Xcode with no problems, but I'm having testing issues. It seems that Enzyme is not rendering my component's names. This is happening across all of my components, so I think it is configuration, but can't figure it out.
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import PropTypes from 'prop-types';
import styles from './styles';
export default class EmptyMessage extends Component {
static propTypes = {
children: PropTypes.string.isRequired,
};
render() {
return (
<View style={styles.container}>
<Text style={styles.label}>{this.props.children}</Text>
</View>
);
}
}
import React from 'react';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { shallow } from 'enzyme';
import EmptyMessage from '../../components/EmptyMessage';
Enzyme.configure({ adapter: new Adapter() });
let props, wrapper;
const createTestProps = (props) => {
return {
...props,
};
};
const createWrapper = (props) => {
return shallow(<EmptyMessage {...props}>Testing</EmptyMessage>);
};
beforeEach(() => {
props = createTestProps();
wrapper = createWrapper(props);
});
describe('EmptyMessage rendering', () => {
it('should render a <View /> component', () => {
console.log(wrapper.debug());
expect(wrapper.find('View')).toHaveLength(1);
});
it('should render text', () => {
expect(wrapper.find('Text').contains('Testing')).toBeTruthy();
});
});
<Component style={{...}}>
<Component style={{...}}>
Testing
</Component>
</Component>
As you can see, the Component
s should be a wrapping <View>
and then a child <Text>
but I can't seem to figure out why it's not.
react-native info
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
Memory: 1.41 GB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 9.3.0 - ~/.nodenv/versions/9.3.0/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nodenv/versions/9.3.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
Android SDK:
Build Tools: 23.0.1, 25.0.3, 26.0.1, 26.0.3, 27.0.0, 27.0.3, 28.0.0
API Levels: 23, 25, 26, 27, 28
IDEs:
Android Studio: 3.1 AI-173.4819257
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0
npmGlobalPackages:
react-native-cli: 2.0.1
"jest": {
"preset": "react-native",
"coverageDirectory": "coverage/",
"setupFiles": [
"<rootDir>/jest/setup.js"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
"^.+\\.js?$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!react-native|tcomb-form-native)",
"!node_modules/react-runtime"
]
}
"devDependencies": {
"@babel/core": "7.1.2",
"apisauce": "^0.14.3",
"axios-mock-adapter": "^1.15.0",
"babel-eslint": "^9.0.0",
"babel-jest": "^23.6.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react-native": "5.0.2",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint-config-prettier": "^3.0.1",
"eslint-plugin-prettier": "^2.6.2",
"eslint-plugin-react": "^7.11.1",
"husky": "^0.14.3",
"jest": "^23.2.0",
"jest-junit": "^3.6.0",
"lodash": "^4.17.5",
"prettier": "^1.14.3",
"pretty-quick": "^1.4.1",
"react-dom": "^16.4.0",
"react-test-renderer": "16.2.0",
"reactotron-react-native": "2.1.0",
"reactotron-redux": "2.1.0",
"redux-devtools": "^3.4.1",
"redux-mock-store": "^1.5.1"
},
"resolutions": {
"@babel/core": "7.0.0-beta.47",
"babel-core": "^7.0.0-bridge.0"
},
So, looks like Enzyme just doesn't play well with RN after 0.55.4
. Also, Enzyme wasn't created for RN, just React. Here's a good thread to follow on the Enzyme repo . If someone creates an adapter for RN, it could work, but since Airbnb is sunsetting RN for their company , I don't see them making any changes to the repo. Though, there is a dev that was on the team that is willing to review and help with any PRs that are put up. 👍🏼
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.