Question

我正在尝试测试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方法，以使其更易于测试印刷机的动作）：

  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');

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

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

1 个答案: