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