使用 Jest 和 React Native 测试库测试 DateTimePickerModal答案

【问题标题】：Issue Testing the DateTimePickerModal with Jest & React Native Testing Library使用 Jest 和 React Native 测试库测试 DateTimePickerModal
【发布时间】：2020-06-01 22:13:29
【问题描述】：

我正在尝试使用 Jest 和 React Native Testing Library 为 React Native Modal DateTime Picker 编写单元测试。我已经通过了 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 的第 3 个条件，我收到此错误：

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

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

所以我的问题是：

是否有人有为此第三方组件编写测试的经验？
是否有人可以分享更多关于 TypeError 含义的信息？
有没有更好的方法来为此模式编写单元测试？
我是否缺少能够通过 Jest 与组件正确交互的道具/部件？

【问题讨论】：

您找到解决问题的方法了吗？我的一些测试遇到了类似的情况
我没有。我向开发人员提交了一个问题，他的回答是：``` 老实说，我多年来一直没有积极使用和测试这个库，所以我不确定这里最好的测试策略是什么。这个库在后台使用@react-native-community/datetimepicker。您是否介意检查该库本身是否可测试，或者问题是否仅发生在此组件上？ ``` 这个回复是在 2020 年 2 月初。我们最终不再使用这个包，因为前端单元和自动化测试 (Appium) 都无法与之交互。

标签： reactjs react-native jestjs expo react-native-testing-library

【解决方案1】：

我正在使用 react-native-datepicker 并得到相同的 this._picker.setNativeProps is not a function 错误。我用嘲笑DatePickerIOS 修复了它，因为react-native-datepicker 使用DatePickerIOS 作为IOS 日期选择器。

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

【讨论】：