如何测试 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

看看 ReactNative 的 UIExplorer 示例项目，它设置了几个混合 XCTest & require('NativeModules').TestModule 测试套件。

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

Answer 2

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

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

Answer 3

要使用 Jest 进行运行测试，您应该使用 __mocks__ 文件夹将 ReactNative 替换为 React，将 TestUtils 与浅层渲染器一起使用，也许 react-shallow-renderer-helpers 来查找虚拟树。

我制作了包含单元测试的示例存储库here and article about my way through it here

Answer 4

最后，我使用 Mocha 为 BDD 风格的单元测试设置了一个带有 TravisCI 的 repo。您可以在以下位置查看回购协议：https://github.com/sghiassy/react-native-sglistview

如何测试 React Native 组件

How to test React Native components

unit-testing

react-native