用酶模拟 Picker 的 onvaluechange 事件答案

【问题标题】：simulate onvaluechange event for Picker with enzyme用酶模拟 Picker 的 onvaluechange 事件
【发布时间】：2018-02-20 09:01:34
【问题描述】：

我正在尝试测试我使用 Jest 和 Enzyme 实现的 Picker 的 onValueChange，但我不确定我的做法是否正确。

我的组件：

const ManufacturersPicker = ({
   Manufacturers,
   ManufacturersPickerOnValueChange,
   selectedManufacturerId,
}) => {
  const ManufacturersPickerItems = [];
  ManufacturersPickerItems.push(Manufacturers.map(item => (
  <Picker.Item
    label={item.manufacturer}
    value={item.manufactureId}
  />)));

  return (
    <Picker
        selectedValue={selectedManufacturerId}
        onValueChange={(itemValue, itemIndex) => 
        ManufacturersPickerOnValueChange(itemValue, itemIndex)}
        mode="dialog"
    >
        {ManufacturersPickerItems}
    </Picker>
  );
};

我的测试如下

const manufacturersPickerOnValueChange = jest.fn();
const valueChangeEvent = {target: {value: 1, index: 0}};
const tree = shallow(<ManufacturersPicker
        Manufacturers={manufacturers}
        ManufacturersPickerOnValueChange={manufacturersPickerOnValueChange}
        selectedManufacturerId={1}/>);
tree.find('Picker').simulate('onValueChange', valueChangeEvent);
expect(manufacturersPickerOnValueChange).toHaveBeenCalledTimes(1);
expect(manufacturersPickerOnValueChange).toHaveBeenCalledWith(1,0);

我不断收到错误消息，表明未调用 jest 函数

expect(jest.fn()).toHaveBeenCalledTimes(1)
Expected mock function to have been called one time, but it was called zero times.

我不确定是我传递的事件是错误的还是找到了错误的元素。

【问题讨论】：

我的建议对你有用吗？
是的。是否有关于传递哪些值来模拟方法的参考？
我是这样使用它的：.simulate('ValueChange', 'newValue')。您可以只给出将从 Picker 中选取的新值，而不是传递该目标对象。我猜你的情况是 .simulate('ValueChange', '1')
对不起，我更感兴趣的是您如何知道将“ValueChange”而不是“onValueChange”传递给函数。是否有第一个参数的参考？
哦，现在我明白你的意思了。我没有看到任何关于如何使用模拟的参考，但它真的很容易。假设您有一个以“onPress”为道具的组件。然后你可以用 .simulate('Press') 来模拟它。所以无论你试图模拟什么，只要去掉'on'前缀，它就可以工作了。

标签： react-native enzyme jestjs

【解决方案1】：

改变这一行：

tree.find('Picker').simulate('onValueChange', valueChangeEvent);

对此：

tree.find('Picker').simulate('ValueChange', valueChangeEvent);

【讨论】：