如何在带有TypeScript，Jest和Enzyme的React中测试按钮单击 [英] How to test a button click in React with TypeScript, Jest and Enzyme

问题描述

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

I'm building a React Native app with TypeScript. I'm doing my component tests using Jest and Enzyme. I'm also using React Navigation

我正在努力编写用于单击按钮的单元测试.

I'm struggling to write the unit test for clicking my button.

这是组件的代码(仅是渲染功能):

Here is the component's code (just the render function):

  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()模拟).

This fails and claims the navigation.navigate function - which is mocked using jest.fn() - is never called.

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

I assume it has something to do with providing an error function to the button. The problem is, I can't not do that, since I need to call with the argument "QuestionsScreen". So I can't do something like onPress={this.navigation.navigate) and then miraculously call "QuestionsScreen", can I?

我如何通过此考试?

推荐答案

simulate的常见问题"部分表示:尽管名称暗示这将模拟实际事件，但.simulate()实际上会根据您提供的事件将组件的prop作为目标.例如，.simulate('click')实际上会得到onClick道具并调用它."

The "Common Gotchas" section for simulate says that "even though the name would imply this simulates an actual event, .simulate() will in fact target the component's prop based on the event you give it. For example, .simulate('click') will actually get the onClick prop and call it."

可以在Enzyme源代码因此，行wrapper.find("Button").simulate("click");最终试图调用Button的onClick道具，该道具不存在，因此实际上什么也没做.

So the line wrapper.find("Button").simulate("click"); ends up trying to call the onClick prop of the Button which doesn't exist so it essentially does nothing.

这篇帖子建议直接调用道具，然后避免使用simulate.

This post from an Airbnb dev recommends invoking props directly and avoiding simulate.

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

Here is a modified test that invokes the onPress prop directly:

it("should navigate to the 'QuestionsScreen'", () => {
  wrapper.find(Button).props().onPress({} as any);

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

这篇关于如何在带有TypeScript，Jest和Enzyme的React中测试按钮单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！