Question

我正在尝试使用Jest和React Native Modal DateTime Picker为React Native Testing Library编写单元测试。我已经传递了3种（我相信是）标准的RN道具：

accessible: true,
accessibilityLabel: testLabel,
testID: testLabel,

这是我的测试：

fireEvent(dobField, 'handleCalendarPress');
const calendarPicker = wrapper.getByTestId('BDD--ThirdPartyComp--DateTimePickerModal');
fireEvent(calendarPicker, 'onConfirm', ageOver18);

dobField是我创建的自定义输入字段，当它被“按下”时，可以通过添加的testID找到模态。但是，将事件触发到onConfirm的第三个条件，我收到此错误：

Error: Uncaught [TypeError: this._picker.current.setNativeProps is not a function]

我已经阅读了有关“直接操作”的RN文档（link），其中涉及设置/使用native props。但是，似乎应该在modal / lib本身上实现它，而不是从我这边实现？

所以我的问题是：

有没有人有为该第三方组件编写测试的经验？
是否有人可以共享有关TypeError含义的更多信息？
是否有更好的方法为这种模式编写单元测试？
是否缺少通过Jest与组件正确交互的道具/零件？

Answer 1

我正在使用react-native-datepicker并收到相同的this._picker.setNativeProps is not a function错误。由于DatePickerIOS使用react-native-datepicker作为IOS日期选择器，因此我通过模拟DatePickerIOS进行了修复。

jest.mock('react-native/Libraries/Components/DatePicker/DatePickerIOS.ios.js', () => {
  const React = require('React');
  return class MockPicker extends React.Component {
  render() {
    return React.createElement('DatePicker', {date: '21.07.2020'});
  }
 };
});

使用Jest和React本机测试库测试DateTimePickerModal

1 个答案: