如何使用 Jest、Enzyme for React-Native 在单元测试中模拟事件

问题描述

我想弄清楚如何在 React-Native 应用程序中使用 Jest 测试onPress"事件，以便确保调用正确的函数.

I'm trying to figure out how to test an "onPress" event with Jest in a React-Native app so I can make sure the right function is called.

我浏览了文档和谷歌，但在 React-Native 中找不到解决方案.

I went through the documentation and Google but couldn't find a solution for it in React-Native.

这是我发现的，它应该适用于带有 enzyme 的 React-Native:

This is what I found that is supposed to work for React-Native with enzyme:

const mockFunc = jest.fn();
const component = mount(<MyComponent onPress={mockFunc} />);
component.simulate('press');
expect(mockFunc).toHaveBeenCalled();

但这行不通.似乎 mount 不起作用，我得到了这个输出:

But this doesn't work. Seems like mount doesn't work and I get this output:

参考错误:文档未定义

我尝试使用 shallow 代替，但是当我查看函数的输出时 TouchableOpacity 没有被渲染......你已经猜到了，它没有也不行.不知道该怎么做.

I tried with shallow instead but the TouchableOpacity is not getting rendered when I look at the output of the function... and you've guessed it, it doesn't work either. Not sure what to do.

有没有人找到在 React-Native 上测试事件的方法?

Does anyone found a way to test events on React-Native?

谢谢

推荐答案

Enzyme 不支持 React-Native，因为它的呈现方式不同并且不使用 DOM.这就是您收到错误 ReferenceError: document is not defined 的原因.您可以查看这个问题了解更多信息.React 团队目前正在努力在 react-test-renderer 中公开一个 .find() 方法来模拟对组件的操作.那么它应该适用于 React/React-native 而不需要 DOM 环境.

Enzyme does not support React-Native, because it's rendered differently and doesn't use the DOM. That's why you're getting the error ReferenceError: document is not defined. You can see this issue for more information. The React team is currently working to expose a .find() method in react-test-renderer to simulate actions on components. Then it should work for both React/React-native without needing a DOM environment.

你可以做一个 hack(这就是我们在我们公司所做的)，即渲染一个自定义组件，扩展 TouchableOpacity 并映射 onClick 以调用 按下.像这样:

There's a hack you can do (and that's what we did in our company) that is rendering a custom component that extends TouchableOpacity and map onClick to call onPress. Something like this:

const mockPressable = (name) => {
  const RealComponent = require.requireActual(name);

  class Component extends RealComponent {

    render() {
      return React.createElement(
        RealComponent.displayName || RealComponent.name,
        { ...this.props, onClick: this.props.onPress },
        this.props.children
      );
    }

  }

  return Component;
};


jest.mock('TouchableOpacity', () => mockPressable('TouchableOpacity'));

在您的测试代码中，您调用 component.simulate('click').

And in your test code, you call component.simulate('click').

这是一种黑客行为，我不确定这样做的后果是什么，但它适用于我们的用例.

It's a hack and I'm not sure what are the consequences of doing this but it has worked for our use cases.

这篇关于如何使用 Jest、Enzyme for React-Native 在单元测试中模拟事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！