如何在 React Native 中使用酶测试 openDrawer？答案

【问题标题】：How I can test the openDrawer with enzyme in React Native?如何在 React Native 中使用酶测试 openDrawer？
【发布时间】：2019-04-26 21:13:19
【问题描述】：

我在进行本机反应的测试时遇到了一些问题。我正在使用酶，我试图点击一个打开抽屉的按钮。我也在使用反应导航，但是当我尝试这个问题时：

TypeError: navigation.openDrawer 不是函数

  const props = {
    navigation: {
      openDrawer: jest.fn(),
    },
  };

  const wrapper = shallow(<HeaderButton {...props} />);

  it('DrawerMenu is Called', () => {
    expect(
      wrapper
        .find('AnimatedComponent')
        .props()
        .onPress(),
    ).toHaveBeenCalled();
  });

const HeaderButton = (navigation: NavigationParams) => (
  <TouchableRipple
    onPress={() => navigation.openDrawer()}
  >
    <Icon
      name="menu"
      size={Platform.OS === 'ios' ? 20 : 24}
      color="white"
      style={{ marginHorizontal: 16 }}
    />
  </TouchableRipple>
);

[代码链接：https://gist.github.com/salomaoluiz/dd710b3506b95b3f0f13410a02ef41cf]

谢谢。

【问题讨论】：

标签： react-native jestjs react-navigation enzyme

【解决方案1】：

问题是HeaderButton 应该采用props（具有navigation 作为属性），而不是直接采用navigation。

这应该有效： const HeaderButton = ({ navigation }) => (

或者，如果您愿意：

const HeaderButton = (props) => (
  <TouchableRipple
    onPress={props.navigation.openDrawer}
  >

【讨论】：