如何测试React Native组件

Question

我正在试图弄清楚如何测试React Native（而不是React JS）组件。 即使查看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,
  },
});

我已经能够使用Babel来转换JSX语法以及使用Mockery来模拟React库方法createClass和StyleSheet.create ，但是在一天结束时，我似乎无法创建任何有意义的测试。

Answer 1

你应该模拟React Native包以及设置babel变换器和其他一些设置。 也许你可以检查我的组件的单元测试，React Native Router Flux：

https://github.com/aksonov/react-native-router-flux/tree/master/ tests

Answer 2

要使用Jest运行测试，您应该使用__mocks__文件夹将TestUtils替换为React，使用具有浅渲染器的TestUtils并使用react-shallow-renderer-helpers来查找虚拟树。

我做了样品库单元测试在这里通过它和一篇关于我的方式在这里

Answer 3

最后，我使用Mocha设置了一个使用TravisCI的回购，用于BDD样式的单元测试。 您可以在以下网址查看回购： https ： //github.com/sghiassy/react-native-sglistview

Answer 4

看看ReactNative的UIExplorer示例项目，该项目设置了几个混合XCTest和require（'NativeModules'）.TestModule测试套件。

https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/UIExplorerIntegrationTests/js