在 React Native 中对触摸事件进行单元测试

Question

我正在尝试使用 this 指南来测试本机代码。 react native 被 reactjs 覆盖，以使用 jestjs 启用浅层渲染和测试。

尽管我能够测试浅渲染组件（检查其存在和子组件），但我无法测试触摸事件。

handleTouch() {
 this.setState({ showDescription: !this.state.showDescription });
}


render() {
const description = this.state.showDescription ? (<Text style={styles.description}>{this.props.entry.description}</Text>) : null;
return (
  <TouchableNativeFeedback onPress={() => this.handleTouch()}>
    <View style={styles.rowContainer}>
      <View style={styles.row}>
      </View>
      {description}
    </View>
  </TouchableNativeFeedback>
 )
}

我正在尝试测试触摸 TouchableNativeFeedback、description 标签是否呈现。 reactjs TestUtils 提供了 Simulate 但它没有用。

这是我的规格设置：

beforeEach(function() {
    profileView = TestUtils.renderIntoDocument(<ProfileEntryView entry={entry}/>);
    var touchableNativeFeedback = TestUtils.findRenderedComponentWithType(profileView, TouchableNativeFeedback);
    TestUtils.Simulate.onTouchEnd(touchableNativeFeedback);
});

我将如何使用 reactjs TestUtils 测试 UI 交互以实现 react-native？

Answer 1

因为 ReactTestUtils 模拟没有 onTouchEnd 或 onPress 事件。所以你需要添加到模拟对象 <strong>mocks</strong>/react-native.js:

const NativeComponent = (type) => {
    return React.createClass({
        render() {
            var properties = {className: type};
            if (typeof this.props.onPress !== 'undefined') {
                properties.onClick = this.props.onPress;
            }
            Object.assign(properties, this.props);
            return (
                <div {...properties}>{this.props.children}</div>
            );
      }
};
...
ReactNative.TouchableNativeFeedback = NativeComponent("TouchableNativeFeedback");

并将您的测试代码更新为：

var touchableNativeFeedback = TestUtils.findRenderedDOMComponentWithClass(profileView, 'TouchableNativeFeedback');
TestUtils.Simulate.click(touchableNativeFeedback);

正在寻找更多代码 from this page。

在 React Native 中对触摸事件进行单元测试

Unit testing touch events in react native

tdd

ecmascript-6

jestjs

react-native