Как протестировать исходные компоненты React

Я пытаюсь выяснить, как тестировать компоненты React Native (не React JS). Даже глядя на исходный код React, его трудно понять, как его проверить.

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, но в конце дня я не могу создать любые значимые тесты.

Ответы

Ответ 1

В конце концов, я настраиваю репо с TravisCI, используя Mocha для модульных тестов стиля BDD. Вы можете увидеть репо по адресу: https://github.com/sghiassy/react-native-sglistview

Ответ 2

Вы должны высмеять пакет React Native, а также установить Babel-трансформатор и некоторые другие настройки. Возможно, вы можете проверить модульные тесты для моего компонента, React Native Router Flux:

https://github.com/aksonov/react-native-router-flux/tree/master/ тесты

Ответ 3

Чтобы запустить тесты с помощью Jest, вы должны заменить ReactNative с помощью React с помощью папки __mocks__, используйте TestUtils с мелким визуализатором и, возможно, react-shallow-renderer-helpers для поиска виртуального дерева.

Я сделал образец хранилища с модульными тестами здесь и статью о моем пути через него здесь