react-native - 如何使用 Jest 和 Enzyme 模拟 React Native Switch 组件的按下

Question

This question already has answers here:

How to simulate an event on a unit test with Jest, Enzyme for React-Native

(3 个回答)


28 天前关闭。




我正在尝试测试 React Native 组件，它基本上是 Switch 的包装器。

它看起来像这样(删除了样式和额外的代码):

  render() {
    return (
      <View>
        <View>
          <View>
            <Switch
              onValueChange={() => this.onChange(!this.state.value)}
              value={this.state.value}
            />
          </View>
        </View>
      </View>
    );
  }

该组件本身没有 onChange 方法，但它扩展的类有。我想确保当我点击这个开关时， onChange 被调用了正确的值(即使用 true 或 false )。

我的测试看起来像这样(我添加了一个模拟的 onChange 方法，以便更容易地测试打印机的 Action ):

  it('calls onChange with proper values when pressed', () => {
    const onChangeHandler = jest.fn();
    const wrapper = shallow(
      <Toggle />
    );

    wrapper.instance().onChange = onChangeHandler;
    wrapper.simulate('press');


    expect(wrapper.instance().onChange).toBeCalledWith(true);
  });

但是，此测试失败，并且不会调用 onChange。我不确定我的测试中的错误在哪里。

最佳答案

我发现我不需要模拟新闻，但我可以模拟 onValueChange 代替(即按下切换时触发的东西)。

首先，我在测试中找到了我的 Switch 组件，使用了我给它的 testID Prop :

const Switch = wrapper.find('[testID="switch"]');

然后我用它来模拟打印机并模拟 onChange 代替:

Switch.simulate('valueChange');

这基本上与测试打印机的结果相同，并且对我有用!

关于react-native - 如何使用 Jest 和 Enzyme 模拟 React Native Switch 组件的按下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52885540/

上一篇：键具有不同名称的 JSON 模式

下一篇：preact - 如何使用 html 和脚本标签使用 preact？

Answer 1

我发现我不需要模拟新闻，但我可以模拟 onValueChange 代替(即按下切换时触发的东西)。

首先，我在测试中找到了我的 Switch 组件，使用了我给它的 testID Prop :

const Switch = wrapper.find('[testID="switch"]');

然后我用它来模拟打印机并模拟 onChange 代替:

Switch.simulate('valueChange');

这基本上与测试打印机的结果相同，并且对我有用!