Question

我正在用TypeScript构建一个React Native应用程序。我正在使用Jest和Enzyme进行组件测试。我也在使用React Navigation

我正在努力编写单击按钮的单元测试。

这是组件的代码（仅是渲染功能）：

  render() {
    const { navigation } = this.props;
    return (
      <View style={styles.container}>
        <Button
          raised
          title={strings.painButtonTitle}
          buttonStyle={styles.painButton}
          titleStyle={styles.title}
          onPress={() => navigation.navigate("QuestionsScreen")}
        />
      </View>
    );
  }

现在是单元测试。

  describe("interaction", () => {
    let wrapper: ShallowWrapper;
    let props: Props;
    beforeEach(() => {
      props = createTestProps({});
      wrapper = shallow(<HomeScreen {...props} />);
    });

    describe("clicking the Pain Button", () => {
      it("should navigate to the 'QuestionsScreen'", () => {
        wrapper.find("Button").simulate("click");

        expect(props.navigation.navigate).toHaveBeenCalledTimes(1);
      });
    });
  });

此操作失败并声称从未调用过navigation.navigate函数（使用jest.fn（）模拟）。

我认为这与为按钮提供错误功能有关。问题是，我不能这样做，因为我需要使用参数"QuestionsScreen"进行调用。所以我不能做类似onPress={this.navigation.navigate)的事情，然后奇迹般地打电话给"QuestionsScreen"，可以吗？

我如何通过此考试？

Answer 1

"Common Gotchas" section for simulate说：“尽管名称暗示这将模拟实际事件，但.simulate（）实际上会根据您提供的事件将组件的prop作为目标。例如，.simulate（' click'）实际上会获得onClick道具并调用它。”

可以在Enzyme源代码here和here中看到这种行为。

因此，行wrapper.find("Button").simulate("click");最终试图调用onClick的{{1}}道具，该道具不存在，因此实际上什么也没做。

来自Airbnb开发人员的

This post建议直接调用道具，而避免使用Button。

这是经过修改的测试，可以直接调用simulate道具：

onPress

Answer 2

我对你也有类似的问题。我尝试了simulate("click")，但是失败了，因为该组件没有onClick属性。

我的方法是将测试用例更改为wrapper.find("form").simulate("submit")，因为我的导航功能是在表单的Submit属性中定义的。

如何在带有TypeScript，Jest和Enzyme的React中测试按钮单击

2 个答案: