title: React-native jest test failing: TypeError: Cannot read property 'default' of undefined
body: <p>I have the following code which I want to write a snapshot test. </p>
  
  <pre><code>import React from 'react';
  import { AsyncStorage, View, Button, Text, StyleSheet } from 'react-native';
  import t from 'tcomb-form-native';
  
  const Login = t.struct({
      email: t.String,
      password: t.String,
  });
  const Form = t.form.Form;
  class SignInScreen extends React.Component {
  
  
      render() {
          return (
              &lt;View style={styles.container}&gt;
                  &lt;Form ref={c =&gt; this._form = c} type={Login}/&gt;
                  &lt;Button title="Submit" onPress={this.handleSubmit}/&gt;
                  &lt;Button title="Sign Up" onPress={this.handleSignUp}/&gt;
              &lt;/View&gt;
          );
      }
  }
  
  export default SignInScreen;
  
  const styles = StyleSheet.create({
      container: {
          justifyContent: 'center',
          marginTop: 15,
          padding: 20,
          backgroundColor: '#ffffff',
      }
  });
  </code></pre>
  
  <p>I run <code>jest</code> in the command line, it works well test passes until I define onPress() methods. </p>
  
  <pre><code>validateCredentials = (email, password) =&gt; {
      return true;
  };
  
  handleSubmit = async () =&gt; {
      const value = this._form.getValue();
      if(value != null) {
          /*
              TODO: Make a query to backend to validate credentials
           */
          if (this.validateCredentials(value['email'], value['password'])) {
              await AsyncStorage.setItem('userToken', 'abc');
              this.props.navigation.navigate('App');
          } else {
              alert('Invalid email or password');
          }
      }
  }
  
  handleSignUp =  () =&gt; {
      this.props.navigation.navigate('SignUp');
  }
  </code></pre>
  
  <p>Then it failing with error message that I don't really understand. </p>
  
  <pre><code> FAIL  __tests__/SignInScreen-test.js
    ✕ SignInScreen snapshot test (24ms)
  
    ● SignInScreen snapshot test
  
  TypeError: Cannot read property 'default' of undefined
  
     9 | });
    10 | const Form = t.form.Form;
  &gt; 11 | class SignInScreen extends React.Component {
       |                                                                                                         ^
    12 | 
    13 | 
    14 |     render() {
  
    at new SignInScreen (screens/SignInScreen.js:11:423)
    at constructClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4810:22)
    at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6581:9)
    at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7408:20)
    at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10149:16)
    at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10181:28)
    at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10267:11)
    at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11135:11)
    at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11047:11)
    at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11021:7)
  
    console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8075
      The above error occurred in the &lt;SignInScreen&gt; component:
          in SignInScreen (at SignInScreen-test.js:7)
  </code></pre>
  
  <p>jest config: </p>
  
  <pre><code>  "jest": {
      "preset": "react-native",
      "transform": {
        "^.+\\.js$": "&lt;rootDir&gt;/node_modules/react-native/jest/preprocessor.js"
      },
      "transformIgnorePatterns": []
    }
  </code></pre>
  
  <p>.babelrc</p>
  
  <pre><code>{
    "presets": ["module:metro-react-native-babel-preset"]
  }
  </code></pre>
  
  <p>My test code:</p>
  
  <pre><code>import 'react-native';
  import React from 'react';
  import SignInScreen from '../screens/SignInScreen';
  import renderer from 'react-test-renderer';
  
  test('SignInScreen snapshot test', () =&gt; {
      const snap = renderer.create(&lt;SignInScreen/&gt;).toJSON();
      expect(snap).toMatchSnapshot();
      });
  </code></pre>
  
  <p>Any ideas? </p>