如何使用 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>
    );
  }

这个组件没有onChange 方法本身，但是它扩展的类有。我想确保当我点击此 Switch 时，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');

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