react-native中的onClick函数测试按钮

Question

我正在尝试使用react native框架编写我的第一个应用程序。 我有按钮测试onClick功能的问题。

我的App.js代码：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button } from 'react-native';

export default class App extends React.Component {
  refreshData() {
    console.log("download data from server placeholder");
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>Shake your phone to open the developer menu.</Text>
        <Button
          id="refreshButton"
          onPress={this.refreshData}
          title="Refresh"
          color="#000000"
          accesibilityLabel="Refresh AQI data"
          testID="refreshButton"
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

我的App.test.js代码：

import React from 'react';
import App from './App';

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

import renderer from 'react-test-renderer';
import { shallow, mount, render } from 'enzyme';

it('should render without throwing an error', function() {
  const wrapper = shallow(<App />);
  const refreshData = jest.fn();
  expect(wrapper.find('#refreshButton')).toHaveLength(1); // pass
  wrapper.find('#refreshButton').first().simulate('click');
  expect(refreshData).toHaveBeenCalledTimes(1); // fail
});

当我运行npm测试时，我的测试失败，因为refreshData被调用了零次。 看起来模拟功能不起作用，为什么？ 我试过没有first（）函数调用simulate，但它没有用。 我不熟悉javascript，也许我犯了一个明显的错误？ 我在网络上找到了文档中的代码和一些教程。 我正在为我编写简单的ios应用程序并进行自我训练，而且我是TDD的忠实粉丝。 这就是单元测试对我来说很重要的原因。

Answer 1

使用以下内容更改onPress = {this.refreshData}部分：

onClick={this.refreshData}

Answer 2

我不确定酶支持ID和＃选择器。 尝试添加一个testID prop并像这样调用它：

wrapper.dive().find("[testID='yourTestID']").simulate("press");

要么

wrapper.dive().find("[testID='yourTestID']").onPress();

我正在使用它们并且它们工作正常。

编辑：现在你的问题是这个

const refreshData = jest.fn（）;

改成：

const refreshData = jest.spyOn（wrapper.instance（），“refreshData”）;

EDIT2：

将按钮代码更新为：

<Button
          id="refreshButton"
          onPress={this.refreshData}
          title="Refresh"
          color="#000000"
          accesibilityLabel="Refresh AQI data"
          testID="refreshButton"
        />

并测试代码：

it('should render without throwing an error', function() {
  const wrapper = shallow(<App />);
  let refreshData = jest.spyOn(wrapper.instance(), "refreshData");
  expect(wrapper.find('#refreshButton')).toHaveLength(1);
  wrapper.find("[testID='refreshButton']").onPress();
  expect(refreshData).toHaveBeenCalledTimes(1);
});

如果这不起作用，我无能为力。

Answer 3

是的，它现在可以工作，因为你没有绑定该功能。 尝试使用箭头功能，如下所示，这样你就不想这样做了。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button } from 'react-native';

export default class App extends React.Component {
  refreshData = () => {
    console.log("download data from server placeholder");
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>Shake your phone to open the developer menu.</Text>
        <Button
          id="refreshButton"`enter code here`
          onPress={this.refreshData}
          title="Refresh"
          color="#000000"
          accesibilityLabel="Refresh AQI data"
          testID="refreshButton"
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});