Javascript 在react native中测试按钮onClick功能

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

My 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',
  },
});

从“React”导入React；
从“react native”导入{样式表、文本、视图}；
从“react native”导入{Button}；
导出默认类App扩展React.Component{
刷新数据（）{
log（“从服务器占位符下载数据”）；
}
render（）{
返回(
摇动手机以打开开发者菜单。
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});

我的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
});

从“React”导入React；
从“./App”导入应用程序；
从“酶”进口酶；
从'enzyme-Adapter-react-16'导入适配器；
configure（{adapter:newadapter（）}）；
从“反应测试渲染器”导入渲染器；
从“酶”导入{shall，mount，render}；
它（'应该在不引发错误的情况下呈现'，函数（）{
常量包装器=浅（）；
const refreshData=jest.fn（）；
expect（wrapper.find（'#refreshButton'））.toHaveLength（1）；//pass
wrapper.find（“#刷新按钮”）.first（）.simulate（'click'）；
expect（refreshData）.toHaveBeenCalledTimes（1）；//失败
});

---

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

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

onClick={this.refreshData}

---

我不确定酶支持ID和#选择器。尝试添加testID道具，并将其命名为：

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

或

我使用这两种方法，效果很好

编辑：现在你的问题是

const refreshData=jest.fn（）

改为：

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

编辑2：

将按钮代码更新为：

<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);
});

和测试代码：

<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);
});

it（'应该在不引发错误的情况下呈现'，函数（）{
常量包装器=浅（）；
让refreshData=jest.spyOn（wrapper.instance（），“refreshData”）；
expect（wrapper.find（'#refreshButton'））.toHaveLength（1）；
find（“[testID='refreshButton']”）。onPress（）；
期望（刷新数据）。已收集时间（1）；
});

---

如果这不起作用，我就不知所措了

是的，它现在可以工作了，因为您还没有绑定函数。尝试使用箭头功能，而不是像下面这样，这样你就不想这样做

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',
  },
});

从“React”导入React；
从“react native”导入{样式表、文本、视图}；
从“react native”导入{Button}；
导出默认类App扩展React.Component{
刷新数据=（）=>{
log（“从服务器占位符下载数据”）；
}
render（）{
返回(
摇动手机以打开开发者菜单。
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});

更改为onPress={（）=>this.refreshData（）}会有什么不同吗？不幸的是不会。我对onPress方法没有问题，因为它在模拟器中工作。我只对测试有问题。这不起作用，因为react native需要onPress方法。它不适用于我。当我使用simulate（'press'）时，我有同样的失败，onPress（）不是一个函数。怪异。将refreshData（）更改为refreshData=（）=>。这是一个绑定问题，它不起作用。我的代码可以工作，但测试不能。。。当我将代码更改为该代码时，您建议我使用console.log。已调用I thing函数，但我对asserion有问题。请参阅我编辑的答案。您将间谍声明为错误。我修改了代码，现在我遇到了以下问题：我仍然对测试有问题：“预期模拟函数被调用一次，但它被调用了零次。”我在console.log中看到我的函数被调用，但一个插件不起作用，因为我的模拟函数似乎有问题。