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

Question

I'm trying to write my first app using react native framework. I have problem with test onClick function for button.

My App.js code:

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

My App.test.js code:

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

When I run npm test my test fail because refreshData has been called zero times. Looks like simulate function doesn't work, why? I tried call simulate without first() function but it didn't work. I'm not familiar with javascript, maybe I did an obvious mistake? I found that code in documentation and some tutorials which i found in internet. I'm writting simple ios application only for me and for training myself and I'm big fan of TDD. It is the reason that Unit Tests are important for me.

Answer 1

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

onClick={this.refreshData}

Answer 2

I am not sure enzyme support ID and # selectors. Try adding a testID prop and calling it like this:

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

or

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

I am using both and they work fine.

Edit: now your problem is this

const refreshData = jest.fn();

Change to:

const refreshData = jest.spyOn(wrapper.instance(), "refreshData");

Edit2:

Update button code to this:

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

and test code to this:

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

If that does not work, I am clueless.

Answer 3

Yes, it will now work because you haven't bind the function. Try to use arrow function instead like below so that you don't want to do that.

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