如何測試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