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

Question

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

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

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

该组件本身没有 ononChange方法，但它扩展的类有。我想确保当我单击此开关时，onChange会使用正确的值（即使用true或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没有被调用。我不确定我的测试错误出在哪里。

Answer 1

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

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

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

然后我用它来模拟按下并模拟 onChange ：

Switch.simulate('valueChange');

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