title: How to test a button click in React with TypeScript, Jest and Enzyme
body: <p>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</p>
  
  <p>I'm struggling to write the unit test for clicking my button.</p>
  
  <p>Here is the component's code (just the render function):</p>
  
  <pre><code>  render() {
      const { navigation } = this.props;
      return (
        &lt;View style={styles.container}&gt;
          &lt;Button
            raised
            title={strings.painButtonTitle}
            buttonStyle={styles.painButton}
            titleStyle={styles.title}
            onPress={() =&gt; navigation.navigate("QuestionsScreen")}
          /&gt;
        &lt;/View&gt;
      );
    }
  </code></pre>
  
  <p>Now here is the unit test.</p>
  
  <pre><code>  describe("interaction", () =&gt; {
      let wrapper: ShallowWrapper;
      let props: Props;
      beforeEach(() =&gt; {
        props = createTestProps({});
        wrapper = shallow(&lt;HomeScreen {...props} /&gt;);
      });
  
      describe("clicking the Pain Button", () =&gt; {
        it("should navigate to the 'QuestionsScreen'", () =&gt; {
          wrapper.find("Button").simulate("click");
  
          expect(props.navigation.navigate).toHaveBeenCalledTimes(1);
        });
      });
    });
  </code></pre>
  
  <p>This fails and claims the <code>navigation.navigate</code> function - which is mocked using jest.fn() - is never called.</p>
  
  <p>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 <code>"QuestionsScreen"</code>. So I can't do something like <code>onPress={this.navigation.navigate)</code> and then miraculously call <code>"QuestionsScreen"</code>, can I?</p>
  
  <p>How can I get this test to pass?</p>