[英]How to test React Native components
I'm trying to figure out how to test React Native (not React JS) components. 我正在试图弄清楚如何测试React Native(而不是React JS)组件。 Even looking at React Native's starter code, its difficult to see how to test it.
即使查看React Native的入门代码,也很难看出如何测试它。
var AwesomeProject = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
I've been able to use Babel to transpile the JSX syntax as well as use Mockery to mock the React library methods createClass
and StyleSheet.create
, but at the end of the day, I can't seem to create any meaningful tests. 我已经能够使用Babel来转换JSX语法以及使用Mockery来模拟React库方法
createClass
和StyleSheet.create
,但是在一天结束时,我似乎无法创建任何有意义的测试。
You should mock up React Native package as well as set babel transformer and some other settings. 你应该模拟React Native包以及设置babel变换器和其他一些设置。 Maybe you could check unit tests for my component, React Native Router Flux:
也许你可以检查我的组件的单元测试,React Native Router Flux:
https://github.com/aksonov/react-native-router-flux/tree/master/ tests https://github.com/aksonov/react-native-router-flux/tree/master/ tests
To run tests with Jest you should replace ReactNative with React using __mocks__
folder, use TestUtils
with shallow renderer and maybe react-shallow-renderer-helpers to lookup virtual tree. 要使用Jest运行测试,您应该使用
__mocks__
文件夹将TestUtils
替换为React,使用具有浅渲染器的TestUtils
并使用react-shallow-renderer-helpers来查找虚拟树。
I've made sample repository with unit tests here and article about my way through it here 我做了样品库单元测试在这里通过它和一篇关于我的方式在这里
In the end I setup a repo with TravisCI using Mocha for BDD style unit tests. 最后,我使用Mocha设置了一个使用TravisCI的回购,用于BDD样式的单元测试。 You can see the repo at: https://github.com/sghiassy/react-native-sglistview
您可以在以下网址查看回购: https : //github.com/sghiassy/react-native-sglistview
Take a look at ReactNative's UIExplorer example project, which is set up with several hybrid XCTest & require('NativeModules').TestModule test suites. 看看ReactNative的UIExplorer示例项目,该项目设置了几个混合XCTest和require('NativeModules').TestModule测试套件。
https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/UIExplorerIntegrationTests/js https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/UIExplorerIntegrationTests/js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.