时间戳

首页 > 解决方案 > 如何使用 Jest 和 Enzyme 模拟 React Native Switch 组件的按下

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

问题描述

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

它看起来像这样（删除了样式和额外代码）：

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

这个组件没有 ononChange方法本身，但是它扩展的类有。我想确保当我单击此 Switch 时，onChange使用正确的值（即使用trueor 或false）调用 。

我的测试看起来像这样（我onChange向它添加了一个模拟方法，以便更容易测试新闻的动作）：

  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未被调用。我不确定我的测试中的错误在哪里。

标签： react-nativejestjsenzyme

解决方案

我发现我不需要模拟按下，但我可以模拟onValueChange（即按下切换时触发的东西）。

首先，我在测试中找到我的Switch组件，使用testID我给它的道具：

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

然后我用它来模拟印刷机并模拟 onChange：

Switch.simulate('valueChange');

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

推荐阅读